Create React App with Vite: Step-by-Step Guide

Vite has quickly gained popularity among React developers for its lightning-fast dev server and Hot Module Replacement (HMR). You can create React app with Vite and enjoy a 10X faster development server speed.

Until now, most of us developers used Create React App (CRA) to develop React applications. However, CRA did not provide such a smooth experience. Nevertheless, we had to work with CRA. Because there was no better alternative. But thanks to Vite, now we can enjoy a more advanced and smooth environment for React development.

For a long time, developers had a love-hate relationship with Create React App (CRA). Vite has added a new dimension to it. However, there are many similarities and differences between Vite and CRA. You can find a detailed comparison article on this topic at KingsCoder.

Read Vite vs Create React App: The Shocking Truth article for a detailed comparison and performance test between CRA and Vite

The purpose of this blog post is to show you the proper way to start a React project with Vite. And highlighting some common mistakes beginners make in the Vite installation process. So that you avoid making those mistakes.

Vite Basics Under The Hood

Vite is a front-end development tooling software whose aim is to create the best experience for front-end developers. Basically, it does two things, firstly it gives you a localhost server and a Hot Reloading option to develop your applications. Second, it bundles all of your project’s assets for production via esbuild.

Why is Vite So Popular?

The main reason why Vite is so popular among developers is its speed. Seriously it’s crazy fast. You will get at least 10x faster localhost server starting than CRA. And get an almost instant hot reloading facility.

How does Vite achieve this speed? The answer is simple, it uses the browser’s ESModule support to its advantage. Vite does not bundle project assets like CRA when starting the server. It just starts the dev server. The browser then uses its native ESModule to import your project’s files via HTTP requests.

Vite shares some responsibilities with the browser to reduce the pressure on itself and keep itself lightweight. This technique allows the Vite to achieve its high speed.

Create React App with Vite

To start a React project with Vite you need to have Node.js and npm or yarn installed on your PC.

And natively ESModule-supported browsers must be installed. ESModule is currently natively supported by all the latest popular browsers. So, just have any modern web browser which one you like.

If you have those already installed on your computer. Then you are ready to go.

Step 1: Getting Started

First, open a terminal in the folder where you want to start your React project with Vite. It can be any terminal: open cmd, PowerShell, Linux terminal, or VScode terminal whichever is convenient for you.

After opening the terminal, type the following command and enter to install Vite.

npm create vite@latest

Or, if you prefer yarn:

yarn create vite

Step 2: Give a Project Name

After executing this command Vite will ask you to give a project name.

As you can see in the above screenshot I have named “vite-npm” as the project name. You can type any name you like. After giving the name hit enter. One important thing is that your folder name shouldn’t contain any uppercase letters.

Step 3: Select React

Now you will see options to select several frameworks including Vanilla, Vue, React, and Preact.

Now select React in option 3. You can navigate the options using the keyboard up and down arrow keys.

Step 4: Select a Template for React App

After selecting the React option, you will see four templates for creating a React application. Four templates respectively: TypeScript, TypeScript with SWC Transpiler, Vanilla JavaScript, and JavaScript with SWC Transpiler.

Select the template you want to work with using the keyboard up and down arrow keys.

For the sake of this tutorial, I am selecting the first option which is the default TypeScript template.

After selecting the template, Vite will create a folder automatically according to the given project name. All the necessary files for the React project will be created in that folder.

Now, only the last two steps are left to complete the installation process.

Step 5: Navigate Project Folder

Now, you need to navigate to the newly created project folder in the terminal. Basically, you just need to open the terminal in the newly created project’s folder.

To do this, type the following command and enter:

cd your-project-folder-name

Here I will type my folder name “vite-npm” instead of “your-project-folder-name“. Because it’s my React project’s folder name. You just type your project’s folder name.

Step 6: Final Installation

Now everything is ready for final installation. Follow the command below to complete the installation.

npm install

Or, if you prefer yarn:

yarn

Execute the command and wait for a while. All the required dependencies will be automatically downloaded. And the Vite installation will be completed.

Vite Project Structure and Configurations

Vite prefers the lightweight approach. And it avoids unnecessary dependencies. So that it maintains its primary feature of creating a hassle-free, smooth, and fast developer experience.

Project Structure:

In the screenshot above we can see that by default Vite follows a straight and simple project structure.

The folders are respectively: “node_modules“, “public“, and “src“. After that, there are “index.html” and various config files. A very simple, easy-to-navigate, and straight structure.

Inside the “src” folder you will find the project’s “assets” folder. In the “assets” folder you can keep all the assets of the project like photographs, graphics, videos, etc.

Config Files:

By default, there are three config files. Those files are respectively: “.eslintrc.cjs“, “tsconfig.json“, and “vite.config.js“.

The “.eslintrc.cjs” file is the configuration file of ESLint. It is a great tool that lets you identify patterns in the code. This will increase the consistency of your code and help to reduce bugs.

“tsconfig.json” is the TypeScript configuration file. Since we installed the React project with the TypeScript template, TypeScript is configured by default.

“vite.config.ts” is Vite’s configuration file. Usually in this file, you have to configure the plugins you are using with Vite. But most of the time Vite tries to configure itself automatically.

Start The Vite Dev Server

One of Vite’s most popular features is its fastest local server startup. Since you will be working on a React application through Vite, you need to know how to start the Vite dev server.

To start the dev server with npm:

npm run dev

Or, to start the dev server with yarn:

yarn dev

After executing the command, Vite will prepare the localhost server for you in a fraction of a second.

The image above shows that Vite started the dev server in just 321 milliseconds. And provide a localhost URL.

In my case, the URL is: “http://localhost:5173/“. That means my dev server is started on port 5173. You may get a different port in your case. Just open the localhost URL in your browser and enjoy the Vite experience.

Build with Vite

Vite bundles your code for production with esbuild. Although the build can be configured and customized a lot according to the project type and requirements.

However, since we have only done default installation in this article, we are only talking about the Vite default build process.

To build with npm:

npm run build

To build with yarn:

yarn build

This command will create a folder named “dist” inside your project folder. Inside this “dist” folder you will find all the assets and files of your newly built React application.

Fix Vite is Not Recognized as an Internal or External Command

While working with Vite, one of the common issues is “Vite Is Not Recognized“. This issue is more common with newbies. When you run Vite through npm or yarn, this error appears in the terminal.

Some Possible Causes of The “Vite is Note Recognized”

This error occurs most probably for two main reasons:

The first is not properly installing Vite during installation. That is, you might have installed Vite template files only. But did not install the rest of the dependencies required by Vite.

Secondly, your Vite installed folder path is not selected in your terminal. That is, you have opened the terminal somewhere else instead of opening the terminal where you installed Vite.

Solution for The “Vite is Note Recognized”

Solution 1:

A simple solution to this problem can be to try reinstalling the Vite into the project folder. That is, install Vite again in the folder where you created your project with Vite.

To do this open a terminal in your project folder and type and enter the following command:

npm install

Or if you use yarn:

yarn

Solution 2:

Often times we accidentally open the terminal in the wrong folder path. Check if the terminal is open in the right folder where you installed Vite.

If you have opened the terminal in the wrong folder path then try to open it in the correct path. And try to run Vite again. Hope the problem will be solved.

FAQ

The Bottom Line

Vite has created a standard of speed and efficiency for front-end developers. Whether you’re a newbie or an experienced front-end developer, you are going to love Vite.

Through this article, you have seen the Vite installation process properly. Each topic is described step by step with screenshots. And I hope you don’t have to face much trouble during installation. Also, if you have any questions or comments, don’t hesitate to comment in the comment box below.

Install Vite and surprise the world by creating your ambitious projects. Happy Coding!