DEV Community

Cover image for Setting up a React Project with Vite: A Step-by-Step Guide
Adetutu Oluwasanmi
Adetutu Oluwasanmi

Posted on

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

OUTLINE

  • Introduction
  • Prerequisites
  • Setting up a React Project with Vite
  • Conclusion

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

STEP 2: Installing dependencies

Install the project dependencies by running the following command:

npm install
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (5)

Collapse
 
kalebu profile image
Jordan Kalebu

Thanks for sharing, A Nice one

Collapse
 
hasnae21 profile image
AHOUZI HASNAE

Thanks for sharing, that was very helpful.

Collapse
 
jainnitin profile image
N J

Simple and step-by-step explanation. This is useful.

Collapse
 
davidson015 profile image
David Ogunsola

This was really helpful. Thanks!!

Collapse
 
adetutu profile image
Adetutu Oluwasanmi

Thanks for the feedback.