How To Create a React App with Vite

This tutorial is for those who want to create a React project using Vite for the very first time. Many ways you can create a react project. In this tutorial, I will show how to create a React project using Vite and npm package manager. You can use different package managers like yarn.

Prerequisites

1. Node version ≥ 18.
2. NPM version 8.

Vite requires Node.js version ≥ 18. and npm version 8. However, some templates require a higher Node.js version to work.

Create Vite Project

To create a react project using Vite first you need to go to your desired folder using a terminal.

I will show here two different ways.

Approach 1:

Run the following command

npm create vite@latest

Give a project name here. That will also be the project folder’s name.

In my case, the project name is my-app

Using the keyboard arrow select React. then press enter

Select typeScript or Javascript whatever you prefer. In my case, I selected JavaScript. then press enter

Done.

Approach 2:

Also, you can create a React project using Vite with a single command.

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

done.

Install dependencies and run the project

cd my-app

Now navigate to your project folder.

npm install

To install the dependencies.

npm run dev

finally, start the project

The application is running at http://localhost:5173 for my case. The port might be different if it’s already used by others.

Conclusion

In this article, I showed. How to create a react project using Vite.
You can follow the official document from here.