Setting up a React Project with Vite: A Step-by-Step Guide

Introduction

React is a JavaScript library developed by Facebook that allows developers to build reusable UI components and efficiently update them, resulting in fast and responsive web applications.

Vite is a fast-build tool and development server that is designed to enhance the development experience for modern web applications. It is designed to offer quick hot module replacement (HMR) and efficient build times by utilizing native ES modules, which makes it highly compatible and ideal for frameworks such as React, Vue.js, and others.

In this step-by-step guide, we will explain the process of setting up a React project using Vite, following the official Vite documentation.

Prerequisites

Before you begin ensure that Node.js and NPM are installed on your system. You can check if you have these installed by running the following commands in your terminal:

node -v
npm -v

If the version numbers are not returned by these commands, download and install Node.js from the official website.

Setting up a React Project with Vite

STEP 1: Create a new React project

Open your terminal and navigate to the directory where you want to create your new React project. Run the following command to create a new React project using Vite's template:

npx create-vite@latest my-react-app --template react

This command will create a new directory named ‘my-react-app’ and initialize a React project using the Vite template for React. After the command has been executed, navigate to the newly created project directory and run the following command;

cd my-react-app

STEP 2: Installing dependencies

Install the project dependencies by running the following command:

npm install

This command will create a package.json file and install all the required dependencies specified in it.

STEP 3: Running the development server

To start the development server, run the following command:

npm run dev

This command will compile your React code and launch the development server. You should see the following output in your terminal:

> my-react-app@0.0.0 dev
> vite

  VITE v4.3.5  ready in 1225 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Click on the link http://localhost:3000/ which will open up your default web browser and, your React application will be up and running.

STEP 4: Building for production

When your development is complete and you are ready to deploy your React application to a production environment, you need to build it. To build your React application, run the following command:

npm run build

This command will compile and bundle your React code into optimized static assets and place them in the dist directory.

STEP 5: Serving the production build locally

Once the build is complete, you can serve the optimized production build locally to ensure everything is working as expected. Run the following command to serve the production build:

npm run preview

This command will start the Vite server, serving the production build at http://localhost:4173/. Open your browser and navigate to the provided URL to see your React application running in the production environment.

Conclusion

Setting up a React project with Vite offers the benefits such as a lightning-fast development server, optimized builds, simplified configuration, compatibility, etc., resulting in a highly efficient and productive development experience.

By following the steps outlined in this guide, you have successfully created a new React project using Vite, set up the development server, built your application for production, and served the optimized build.

Adetutu Oluwasanmi