Follow these Simple Steps to Create a React app Project Using Vite

Johnson Francis — Thu, 14 Mar 2024 11:34:27 +0000

Creating a React project with the create-react-app command can be time-consuming for developers. The major benefits of using Vite are a faster development start and simple configuration. Using either of these approaches will still result in the same intent and objective; however, Vite is much faster to set up than create-react-app.

In this article, I will walk you through how to use Vite to create a React project for faster development. At the end of this guide, you will have a solid understanding of how to create a React app in a much faster way than using the create-react-app method.

Requirements and Installations:

Visual Studio Code: Download VS Code
Nodejs: Download Nodejs
Basic understanding of REACTJS

Step 1. Locate the folder where you want your React project saved. Click inside the address bar of the folder and enter code . to open your Visual Studio Code editor. Navigate your mouse icon to view from the menu tab, and select terminal from the drop-down menu.
For Keyboard shortcut, Hold the ctrl key and tilde key on your keyboard to open the terminal

Step 2. Run npm create vite@latest vite_reactapp -- -- template react.
vite_reactapp is the name you are giving your project. This command creates a new directory named vite-reactapp, you can give it any name you want. the -- -- template react specifies that you are creating a React project.

Step 3. cd vite_reactapp to change from your current directory to a new directory.

Step 4. Run npm install to install all packages and the necessary dependencies.

Step 5. Run npm run dev to open and start the local server where you can see your running react application. it's always in this format "https://localhost/5173" which is a default port used by Vite. if the default is already been used by another application, it will pick the next available port which is usually https://localhost/3000.

Finally, You should have your development webpage look like this:

What has been your experience creating a react project with vite, and does it appear to be faster and better than the conventional method?
Please leave your opinions and tips in the comments section below. Let us learn from each other's experiences.

DEV Community: Johnson Francis

Follow these Simple Steps to Create a React app Project Using Vite