Creating a react app from scratch takes more effort than needed and that is why different tools have been created to streamline the process of setting up the App. Such tools that are mostly used include the
npx create-react-app and
Both tools work as expected but they have different approaches and features that make one prefer one over the other. Overall,
Vite offers some more advantages over Create React App.
In this article, you will see how to set up a react App using the
Vite tool. Let's get started.
What is Vite
In the real sense, Vite is faster than
create-react-app thanks to the GO-based bundler (esbuild) as opposed to the traditional bundler. It also uses the native ECMAScript modules (ESM) in the browser during development to load JS modules directly on the browser leading to faster load times and instant updates.
Another advantage to using Vite over create-react-app is the smaller bundle size which is better for faster load times.
Now that we somehow understand the pros of using Vite over the old CRA(Create-react-app) tool, let's see how to set up a React app with Vite.
Before we get started, make sure you have Node 16+ and
npm installed on your machine. If they are not, check out our tutorials on how to install them.
Setting Up React App with Vite
Follow the steps below to create a new React App with Vite.
Open your terminal and navigate to the project folder (where you want to set up the React project) using the cd command.
Once in the right directory, run the command below.
npm create vite@latest
After the command executes, you will be prompted to enter your project's name as shown in this image.
Enter a name for your project and press
Next, you should select a framework. Use the arrow keys to select
Reactfrom the options available.
The next prompt ask for a React Variant. In this section, use the arrow keys to select
This is how your terminal should look so far.
As seen in this image, after the steps above are completed, you are asked to navigate to the project folder and install dependencies. To do so, move to the directory specified in step 3 as shown below. In my case, I left it to the default name.
Once in the right directory, run
npm icommand to install the dependencies.
Once the dependencies are installed, run your project with the command below.
npm run dev
After running this command, you should see something like this.
Head over to the localhost URL and your project should open on the browser as shown below.
With this homepage open, your React App was created successfully, you can now open the source code and make changes which will be reflected in real-time as you develop your application.
As seen in this article,
Vite is a fast way to get started with React App development. It offers several advantages over the CRA tool which uses the traditional bundler making it bulky and slow.
Vite on the other hand, uses the ES Module to load JS modules in the browser. This makes it load faster and update instantly.
If you found the article helpful, Share it and enjoy developing your React App.
Thank you for reading : )