How to Set Up a React App with Vite

We will be using these tools :

• VSCODE for our code editor
• Node.js for our package manager
• Vite for our development environment

If you havan’t install these tools yet, you can click on the links for each one above.

Step 1 – Create Your Project Folder

Open VSCODE and press clt+j to open terminal then navigate to the folder where you want to build your project – for example Desktop. Now run this command on your terminal to install vite.

npm create vite@latest your-project-name -- --template react

“your-project-name” should be replaced with your project name. for example budget-app

This command will create you project folder.

Our Project name is “budget-app”, the budget-app folder will be created in the Programming folder on our Desktop.

‌Note that we used -- --template react to make sure we’re building a React app with Vite.

Step 2 – Nevigate to Your Project Folder

Write the command below in your terminal and press enter :

cd budget-app 

This command will navigate to your project folder. You should have done this:

Step 3 – Start Your Vite Server

to start your vite server, you need to run command npm run dev :

npm run dev

This command will start you development server :

To start your development server, you should click on the blue link while holding down the Ctrl key.

Now you are all set to write your code in App.js .