What is Vite and how to use it with React

If you haven't heard of it yet, Vite is a new build tool for frontend apps (created by Evan You, the creator of Vue.js). It works much like Webpack and Parcel but faster ("vite" means fast in French). Vite uses the amazing esbuild behind the scenes. esbuild is a JavaScript (and TypeScript) bundler written in Golang which is one of the reason it's so fast.

Often when building a new project with React it is recommended to start with create-react-app. But now that Vite is here, you can easily set up a new project from scratch yourself, because Vite is very simple to configure.

Before we start, you will need to install Node.js and NPM (bundled with Node.js) if you haven't already. I will be using NPM in this guide but if you prefer Yarn or PNPM, feel free to use it.

Open your terminal and create a new directory:

mkdir react-vite-example

Move inside that directory:

cd react-vite-example

Initialize the npm project:

npm init -y

After running the commands you should have a package.json file inside the newly-created directory.

Add the base dependencies required for this project:

npm install --save react react-dom

And the development dependencies:

npm install --save-dev vite @vitejs/plugin-react-refresh

(The @vitejs/plugin-react-refresh library will be used to enable HMR a.k.a. Hot Module Replacement)

Add the following lines to the package.json scripts:

// /package.json
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"

Create a new file vite.config.js at the root of the project:

touch vite.config.js

Add the following content:

// /vite.config.js
import reactRefresh from "@vitejs/plugin-react-refresh";
import vite from "vite";

const config = vite.defineConfig({
plugins: [reactRefresh()],

export default config;

By default Vite is looking for a index.html file in the root of your project. That's how it will determine the dependencies required to run your app (JS files, CSS files, assets, etc).

Create the index.html file at the root of the project:

touch index.html

Add the following content:

<!-- /index.html -->
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>

You can see that there is a reference to a /src/index.jsx file in the index.html. That will be the JavaScript entry-point of the React app.

Create the /src directory:

mkdir src

Create the /src/index.jsx file:

touch src/index.jsx

Add the following content:

import React from "react";
import { render } from "react-dom";

render(<div>Hello World!</div>, document.getElementById("root"));

That's it.

You can now create your app in React and benefit from the speed of Vite and the HMR thanks to the @vitejs/plugin-react-refresh module we've installed.

Use the npm run dev command to run a local server with HMR. To build a production bundle, use npm run build then you can preview it with npm run serve.

The production bundle will be in the /dist directory and is the one you need to deploy on your hosting platform (such as Netlify or Vercel).

I hope this guide was helpful! Of course this is very basic, I haven't covered how to use CSS and assets, out-of-the-box Vite already supports CSS modules (if the file ends with .module.css) and importing assets such as images so there is no additional step required.

You can find the full example on GitHub: https://github.com/ncribt/react-vite-example