How To Set Up a React Project with Vite

How to Set Up a React Project with Vite

How To Set Up a React Project with Vite

If you are a React developer, you are likely familiar with create-react-app. It is a popular tool for creating new React projects. Vite, the new kid on the block, is quicker and simpler to operate. This post will demonstrate how to configure a React project with Vite.

Step 1: Install Vite

Installing Vite is the initial step. Using the following command on your terminal will accomplish this:

npm install -g vite

This will globally install Vite on your machine, allowing you to use it in any project.

Step 2: Create a New React Project

The following step involves creating a new React project. To accomplish this, use the terminal and navigate to the directory where the project will be created. Then, execute the subsequent command:

npx create-react-app my-app

This will build a new “my-app” React project. Go to the project directory once the project has been created:

cd my-app

Step 3: Install Required Packages

The next step is to install the necessary Vite-React package dependencies. This can be accomplished by entering the following command:

npm install --save-dev react react-dom vite @vitejs/plugin-react-refresh

This will install React, React-DOM, Vite, and the Vite plugin required for React compatibility.

How To Set Up a React Project with Vite

Step 4: Configure Vite

After installing the required packages, it is time to configure Vite. Edit the package.json file for your project and add the following line:

"scripts": { "dev": "vite" }

This instructs Vite to use the default setup and launch the development server when “npm run dev” is executed.

Step 5: Start the Development Server

The final step involves initiating the development server. Execute the following command to proceed:

npm run dev

This will start the development server and launch your React application in a new browser window. Vite now supports the development of React applications!

Additional Configuration

How To Set Up a React Project with Vite

Vite includes numerous configuration options that might assist you in optimizing your React application. Here are few instances:

Change the Port Number

The default port number for the development server in Vite is 3000. Add the following line to your package if you need to utilize a different port number. json file:

"scripts": { "dev": "vite --port 4000" }

This will instruct Vite to use port 4000 rather than the default port number.

Enable CSS Modules

If you wish to use CSS Modules in your React project, add the following line to your vite.config.js file:

export default { css: { modules: true } }

This will enable CSS Modules and permit the usage of unique class names in each CSS file.

Enable JSX Fragments

You may enable JSX Fragments in your React application by adding the following line to your vite.config.js file:

export default { jsx: { fragments: true } }

This will enable JSX Fragments and allow you to wrap your elements with >/> instead of a div.

Final Thoughts

With Vite, creating a new React project is quick and simple. Vite can assist you with accelerating the development process and optimizing your code. We strongly urge that React developers give Vite a try!

With the additional configuration choices, you may optimize and tailor your React application to your specific requirements. Thus, begin utilizing Vite immediately and observe how it might enhance your React development process!

Common Issues and Troubleshooting

While setting up a React project with Vite is very simple, you may encounter problems along the way. Here are some frequent concerns and their respective solutions:

Error: Cannot find module ‘react’

The occurrence of this error indicates that Vite cannot locate the React module. Verify that React and React-DOM have been installed by executing the following command:

npm install --save react react-dom

Error: Port 3000 is already in use

This error indicates that another program is already utilizing port 3000. Stop the other program or adjust the port number that Vite uses to resolve this issue. To modify the port number, add the line below to your package. json file:

"scripts": { "dev": "vite --port 4000" }

Error: Failed to compile

It indicates that there is an issue with your code if you receive this error. Check for syntax problems and missing dependencies in your code. Moreover, you can examine the console log for additional information on the error.


Vina makes setting up a React project simple and quick. Vite’s fast development server and optimized build process can help you accelerate the React development process and improve the efficiency of your code. This post should have helped you get started using Vite and provided insight into how it can enhance your React development workflow.

Scroll to Top