How to Create a React Application Using Vite

Spend less time creating React applications

(Image credit: Dev Community)

There are many ways to create a React application, and one of them is with create-react-app. React and create-react-app are both maintained by the company that built them, i.e., Facebook. The create-react-app is a wonderful tool, no doubt, and it supports all setups by default. Nevertheless, as your project’s code increases, you can expect longer build times, a slower start on the development server, and a 2 to 5-second delay before your changes in the code take effect. If the app’s code spreads more widely, these issues could get worse quickly. “Time is money,” a quote by Benjamin Franklin, can, I believe, be applicable here.

I used CRA for my React apps for almost two and a half years, and I was delighted with it because there were no configuration files, and the build times didn’t bother me because I was working on small projects with 5,000–10,000 lines of code. The development server was usually always available in under five minutes when I started my project, but as soon as I tried to write something substantial—like 25,000 lines of code—I found that I had to wait anywhere from five to ten seconds to view the results. This brings us to the next question;

Why is the CRA dev server slow?

So basically, Create-react-app’s development server is slow because it is built using webpack, a module bundler. Webpack takes longer to process requests than more basic, lightweight web servers. Additionally, the development server has many features designed to help with debugging and development that may also slow it down.

If your codebase has more than 15,000 lines, the development server may start slowly, and you may have to wait a while before seeing the updates.

How can it be accelerated?

Recently, I learned about a quicker method for setting up React apps, which also provides all the important features that create-react-app does; it is the next generation and also makes it easier to create apps quickly. It is using a tool called Vite.

In this article, I’ll walk you through the process of installing a React.js app using Vite and also point out key changes and differences for your understanding. So let’s go and set up our React + Vite project.

Step 1: Prerequisites

The packages needed to be installed are;

• Node.Js

Note: To check your node version, use the command below

node --version

• Yarn or Npm

Note: To check your yarn or npm version, use the appropriate command, depending on which one you use. In this project, we will be using yarn.

yarn --version

npm --version

Step 2: Setting up our Project

I will show you guys two different approaches you can choose from when creating your new React app with Vite. Though the results are the same, the approach is just slightly different.

Approach 1:

Open up the code editor of your choice. One amazing code editor you can use is Visual Studio Code. Then, you need to run the following command in the terminal:

yarn create vite vite-react-project --template react-ts

Now change the directory to the project directory;

cd react-vite

Then install all the dependencies;

yarn install

after which we start the local development server.

yarn run dev

Approach 2:

First, you need to run the following command:

yarn create vite

Here, I have vite-react-project as the project name.

✔ Project name: … vite-react-project

Select react as the framework (use the up and down keys to navigate between options):

✔ Select a framework: › react

Add TypeScript by selectingreact-ts:

✔ Select a variant: › react-ts

Finally, change the directory to the project directory, install all the dependencies, and start the local development server.

cd vite-react-project
yarn install
yarn run dev

Now launch your preferred web browser and navigate to the following URL:

http://localhost:5173/

You should see the following webpage:

A react application running locally — created using vite

Conclusion

From this article, we have learned multiple ways to create a React app using Vite. It seems very efficient, faster, and saves more time compared to CRA. Try Vite; you can see the difference.

The official documentation can be found here. Amazing! You now understand how to use Vite to build a React app!

Thank you for reading.