DEV Community

loading...
Cover image for What is Vite and how to use it with React

What is Vite and how to use it with React

NARUHODO
Software engineer during the week and apprentice blogger during the weekend. I like JS and Rust. 🤓
Originally published at naruhodo.dev Updated on ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

Move inside that directory:

cd react-vite-example
Enter fullscreen mode Exit fullscreen mode

Initialize the npm project:

npm init -y
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

And the development dependencies:

npm install --save-dev vite @vitejs/plugin-react-refresh
Enter fullscreen mode Exit fullscreen mode

(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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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

touch vite.config.js
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Add the following content:

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

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
Enter fullscreen mode Exit fullscreen mode

Create the /src/index.jsx file:

touch src/index.jsx
Enter fullscreen mode Exit fullscreen mode

Add the following content:

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

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

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

Discover more posts from me on my personal blog: https://naruhodo.dev

Discussion (0)

Forem Open with the Forem app