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
- Node version ≥ 18.
- 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.