How to Set Up a React App with Vite

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 Vite.

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

Vite is a fast-build tool that provides lightning-fast development experience for web applications. You can use Vite to create apps for different JavaScript frameworks like React, Vue, Preact, Svelte, and many more. In this article, we will focus on React.

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.

Prerequisites.

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.

How to install Node JS in ubuntu 20.04

In this guide, you will learn how to install/configure Node JS and npm on ubuntu 20.04 and write your first program.

GeekBitsJ4y J3ff

How to Install the Node Version Manager (NVM)

This tutorial shows you how to install the node version manager on your machine to make it easy to manage the different node versions required by your different projects.

GeekBitsJ4y J3ff

Setting Up React App with Vite

Follow the steps below to create a new React App with Vite.

1. Open your terminal and navigate to the project folder (where you want to set up the React project) using the cd command.

2. 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.

   

3. Enter a name for your project and press Enterkey.

4. Next, you should select a framework. Use the arrow keys to select React from the options available.

5. The next prompt ask for a React Variant. In this section, use the arrow keys to select JavaScript. Feel free to choose TypeScript or any other option if you know what you are doing.

   This is how your terminal should look so far.

   

6. 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.

   cd vite-project
   

   Once in the right directory, run npm i command to install the dependencies.

   npm install
   

7. 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.

   

8. 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.

Conclusion

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 : )

,