How to Build your React.js App using Vite
Tags: webdev, react, vite
Published: 2022-12-20 00:34:16

by [Joseph Chege](https://blog.openreplay.com/authors/joseph-chege)

Vite is a JavaScript build tool that simplifies how you build your front-end web applications. Vite is made to speed up the build process and aims to provide a faster development experience for modern web apps.

## Vite Features

A few features make Vite outstands its alternatives. These include:

- Hot Module Replacement (HMR)- Creating an application using Vite uses the HMR to run your app. This will make your apps much faster and more powerful with increased application startup performance, and simplify and speed up the build process.
- It allows you to select different frameworks you want your application to work with.
- Bundles your application and makes it ready for production. Vite bundles all the dependencies, modules, and code together for production.
- It uses Native modules (ESM) based dev server. Applications have different modules and routes. When running your applications with Vite, the application is executed based on a single request. This means the server won't bundle the whole application just to execute a single request. Vite uses ESM to load routes separately, and thus a module is only executed if the request made depends on it. Running your dev server with ESBuild bundler will give your application superpowers compared to other bundles such as Webpack.

## Vite vs create-react-app: Why use Vite

With such amazing benefits, as a developer, you want to run front-end applications with Vite. Consider creating an app using React.js (a JavaScript library for creating front-end web apps). You will probably use the `create-react-app` command to bootstrap your React application. The command creates the project structure required to develop, build and run a basic React.js application.

Here the goal is to create a React app. Vite provides an equivalent of `create-react-app`. However, you get to make your application more powerful.

- Vite is faster. It takes less time to bootstrap a React app as compared to `create-react-app`.
- The bundled app varies in size, and Vite tends to create an application with less size bundler.
- The sizes of build output will vary as well. If the initially created application were small, the build output would be smaller.
- It's faster and more powerful to build an app that runs on Vite. Vite has an optimized build process.
- Vite has an instant server start. Any change to your code is compiled faster and displayed on the browser almost immediately.

## Creating a React.js App using Vite

Let's dive in and run React.js with Vite. Ensure you have [Node.js](https://nodejs.org/en/) runtime installed on your computer. Navigate to where you want the application to live and open the command prompt that point to that folder. Then initialize Vite as follows.

```bash
npm init vite
```

Go ahead and enter a name for your project. This will allow you to select any front-end framework on which you want Vite to run. In this case, go ahead and select React.

![1](https://blog.openreplay.com/images/how-to-build-your-react-app-using-vite/images/image01.jpg)


Most fronted frameworks run either on JavaScript or Typescript. Vite allows you to set this up right before your project gets created. In this case, we are running the application with JavaScript. If you want to use typescript, go ahead, and select `react-ts` as the framework variant.

![2](https://blog.openreplay.com/images/how-to-build-your-react-app-using-vite/images/image02.jpg)


With that, Vite will scaffold a react project within seconds. Go ahead and change to the newly created project using the cd command:

```bash
cd vite-project
```

Then install the project dependencies:

```bash
npm install
```

Finally, run your application to test everything out:

```bash
npm run dev
```

And there you have your React app running on Vite. To access the dev server, open `http://localhost:3000/` on a browser, and you will be served with your first React-Vite application. Right away, you can go ahead and start building on your application.

## npm init vite vs. create-react-app

To fully understand which command to select for your project. Let's compare the two based on how they scaffold the same project.

Go ahead and create an app using `create-react-app`:

```bash
npx create-react-app my-app
```

While executing this command, note how long it takes to scaffold the project. Using this command, it takes some time to create the project structure required to develop, build and run a React.js project.

Now go ahead and run the project. Change to the newly created project using the cd command:

```bash
cd my-app
```

Finally, run your application to test everything out:

```bash
npm start
```

Let's now test how long it takes to run each app. So go ahead and the create-react-app server. Then rerun each server using the following time Measure command:

```bash
Measure-command {npm start}
```

![3](https://blog.openreplay.com/images/how-to-build-your-react-app-using-vite/images/image03.jpg)


This takes about 7845 Milliseconds to start the server. However, this is not the case with Vite.

![4](https://blog.openreplay.com/images/how-to-build-your-react-app-using-vite/images/image04.jpg)


It took Vite about 825 Milliseconds to set the server up and running. That is considerably faster as compared to `create-react-app`.

Another thing you should note is the amount of disk size each project takes. Here is a sample of how these two projects compare in terms of disk sizes:

- Vite

![5](https://blog.openreplay.com/images/how-to-build-your-react-app-using-vite/images/image05.jpg)


- Create-react-app

![6](https://blog.openreplay.com/images/how-to-build-your-react-app-using-vite/images/image06.jpg)

As you can see, Vite is the clear winner here, and the same applies to their build output sizes.

Also, when restarting the applications based on the changes you make. Vite tends to be faster, and changes will immediately reflect on the browser.



<h2>Open Source Session Replay</h2> 

_<a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a> is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data._

![OpenReplay](https://blog.openreplay.com/banner-blog_1oYPGT.png)

_Start enjoying your debugging experience - <a href="https://github.com/openreplay/openreplay" >start using OpenReplay for free</a>._





## Migrating from create-react-app to Vite

Assuming you have a traditional create-react-app, let's briefly discuss how you can migrate your existing create-react-app and use Vite instead. This way, you can take advantage of everything that Vite offers. At this point, you should have an existing React app. You can [learn how to create a simple one here](https://reactjs.org/docs/create-a-new-react-app.html).

Inside your project, you need to update the `package.json` file to remove old dependencies and add the new Vite dependencies. `create-react-app` uses react-scripts to build your project. Therefore, you need to first uninstall its associated dependencies. In your project directory, run:

```bash
npm uninstall react-scripts
```

Once done, it's time to introduce your Vite dependencies. Vite is used do development purposes. When adding Vite, ensure you add the needed Vite libraries as devDependencies, as illustrated here. You need two libraries. These are:

- [Vite](https://www.npmjs.com/package/vite) - This is the Vite NPM dev server that serves your source files over native ES modules.
- [@vitejs/plugin-react](https://www.npmjs.com/package/@vitejs/plugin-react) - A Vite plugin for React projects.

To install the above libraries, run the following command, ensuring you have the `--save-dev` flag to instruct NPM to install them as devDependencies:

```bash
npm install vite @vitejs/plugin-react --save-dev
```

The above changes should reflect inside your `package.json` file as such.

When using react-scripts, it uses the `public` folder to access assets outside of the module system. Files inside the `public` folder won't be processed by Webpack, the default `create-react-app` build system. They will be copied into the build folder untouched and make the present files a part of the build. It does so by adding the assets with a variable `PUBLIC_URL` to access all files inside the public folder. This can have the following problems:

- If an asset is missing, `create-react-app` will return a 404 error to the user.
- The resulting filenames will not include content hashes. You will be required to add additional query parameters or rename existing ones whenever they change.
- Post-processing or minification are not applied to any files in the public folder.

However, when using Vite, the Asset build system works differently. It treated static assets differently. `PUBLIC_URL` won't work in this case. To solve that, Vite uses a [Public Base Path](https://vitejs.dev/config/shared-options.html#base) (/). To implement this, navigate to the `public/index.html` file and replace all `%PUBLIC_URL%` with `public` Base Path. This should be `/,` and it should be implemented as follows:

```html
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
```

This way:

- A missing asset will cause a compilation error instead of returning 404 errors to uses.
- You don't need to worry about content hashes.
- Assets get minified and bundled together, reducing the number of network requests.

Vite a great fan of `.jsx`. Ensure you rename your `.js` files to `.jsx`. Then edit the index.js entry point to point to the file `.jsx` file extension. So inside `public/index.html` add the following just `<div id="root"></div>`:

```js
<script type="module" src="/src/index.jsx"></script>
```

During development, `index.html` serves as your application's entry point on Vite, a server. `index.html` is handled by Vite as source code and an access point in the module graph. This concept uses a "root directory", where your server is served from. Therefore, go ahead and move the `public/index.html` file to the root directory of your project.

At the root directory, create a `vite.config.js` file ad add the following script:

```js
export default defineConfig({
  plugins: [react()]
})
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
```

Finally, update the running scripts inside `package.json` from:

```javascript
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
```

To the following Vite commands:

```javascript
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
```

To test your application, use the above Vite command. For example, to run your local development server, run:

```bash
npm run dev
```

![7 create-react-app to Vite](https://blog.openreplay.com/images/how-to-build-your-react-app-using-vite/images/image07.png)


Vite is now ready, and you can use its advantages alongside your React projects.

## Conclusion

In summary:

The main reason Vite is faster and more powerful in many aspects is the number of dependencies used to scaffold, build and run the app. If you navigate to each project's `package.json` file. You can see a clear picture of the dependencies to run each app.

To conclude, Vite is a fantastic tool that you should consider when creating and building your front-end application. It is compatible with almost every front-end framework. Its powerful features will help you create and build applications faster and more lightweight apps.


> A TIP FROM THE EDITOR: Want more on React and Vite? Don´t miss our earlier [Building a React Application with Vite](https://blog.openreplay.com/building-a-react-application-with-vite) article, then!






[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)