How to Build Web Apps Using Vite

Getting started with Vite

In this article, we will use Vite to bundle an existing web app. Vite may be the right build tool for you if your project contains many modules as it can bundle files at lightning speed by pre-bundling dependencies.

Vite makes it easy to start a project as it comes with template presets for projects using vanilla JavaScript (JS), as well as frameworks such as Vue, React, Preact, Svelte, and TypeScript. Vite also provides Hot Module Replacement, which is automatically configured when a project is created using create-vite. The functionalities of Vite can be easily extended by using plugins.

You can follow along with your own project or download this simple React app for a photo carousel.

Let’s get started!

Setting up the project

If you are following along with your own project, make sure it is a Node.js project. Remember that you can initialize Node.js using:

npm init -y

to clipboard
Copy to clipboard

If you are following along using the provided React app, the project is already a Node.js project. But you will need to install the dependencies that are in the package.json file by running the following command:

npm install

to clipboard
Copy to clipboard

Next, you will need to install Vite as well as react-refresh to add HMR support by running:

npm install vite @vitejs/plugin-react-refresh 

to clipboard
Copy to clipboard

Configuring Vite with vite.config.js

In order to properly use Vite, you will need to create a vite.config.js file in the root of your project. This file will contain the configuration for your project, including any additional plugins that your project may require.

Add the following code to your vite.config.js file:

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';

export default defineConfig({
  plugins: [reactRefresh()]
});

to clipboard
Copy to clipboard

In the configuration file, we are using a plugin called react-refresh() from @vitejs/plugin-react-refresh. This plugin will be used to refresh the page when you make a change to a react component.

Adding build and serve commands

Let’s add our start, build, and serve commands in the "scripts" section of package.json. These commands are used to do either of the following:

• Serve a development build of our app.
• Build a production build.
• Serve the production build of our app locally.

"scripts": {
  "start": "vite",
  "build": "vite build",
  "serve": "vite preview"
}

to clipboard
Copy to clipboard

In the code block above, the build command runs with the default entry point at ./index.html to bundle the app with the exit point at ./dist. After running the serve command, the project is served from ./dist.

Remember that you can run the build, start, or serve commands with npm run X, where X is our custom script.

If you are following along with the starting code of our React app, you will notice that running npm run start will produce the following error:

 > src/app.js:31:11: error: Unexpected "<"
    31 │     return <Carousel src={PATHS[currentImg]} />
       ╵            ^                                    

to clipboard
Copy to clipboard

This error is caused by Vite encountering [JSX] code in a JS file. We will address this in the next section.

Fixing JSX errors in Vite

Our scripts will throw errors because our Carousel.js file contains JSX. While this is supported in Vite, JSX files must have the .jsx extension. If you are following along using the provided starting code, you will need to change the file extension of both App.js and Carousel.js to App.jsx and Carousel.jsx, respectively.

The file structure of ./src should now look like this:

|-- src
|   |-- app.jsx
|   |-- Carousel.CSS
|   |-- Carousel.jsx
|   |-- sun.svg

You will also need to edit the value of the src attribute of the opening [<script>] tag in ./index.html from '/src/app.js' to '/src/app.jsx' to reflect the change in file extension.

<script type="module" src="/src/app.jsx"></script>

to clipboard
Copy to clipboard

Handling CSS with Vite

When [CSS] files are imported directly in JS using the import statement, Vite will automatically gather all referenced CSS files and bundle them into a single CSS file at the exit point.

You will see that in the provided starting code we import Carousel.css in Carousel.js like below:

import './Carousel.css';

to clipboard
Copy to clipboard

Vite doesn’t need any plugins or config options specified in order to automatically bundle Carousel.css file at the exit point at ./dist.

Running the Vite app

Now that we’ve configured our vite.config.js file, file extensions, and package.json, running the build command should generate bundled files of the project in ./dist. Notice that the files in the src directory have been bundled and linked in ./dist/index.html.

To view the bundled app in ./dist, you will need to run:

npm run serve

to clipboard
Copy to clipboard

In this article, we discussed how to use Vite to quickly build your application and utilize its extensive plugin system. Next time you’re building a web app on your own, consider using Vite!

Conclusion

Vite is a powerful and efficient build tool that simplifies web app development with features like fast bundling, Hot Module Replacement, and built-in support for various frameworks. By following this guide, you can set up, configure, and optimize your project seamlessly. Next time you start a new web app, consider using Vite for a smoother development experience!

To further enhance your understanding of Vite and modern build tools, consider exploring Codecademy’s Learn Build Tools course.