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!
Learn Build Tools
Start creating your own professional web applications using build tools such as Webpack, esbuild, Parcel, and Vite.Try it for freeSetting 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
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
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
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()]});
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"}
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]} />╵ ^
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>
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';
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
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.
'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'
Meet the full teamRelated articles
- Article
Creating a React App
Use Vite to easily create a React application on your own computer. - Article
Comparison of Build Tools
Compare Webpack, Parcel, esbuild, and Vite to find the best JavaScript build tool for your project based on features, speed, and use cases. - Article
Getting started with Node Package Manager
Learn how to use Node Package Manager (NPM) to install, manage, and update dependencies in Node.js projects with best practices and examples.
Learn more on Codecademy
- Course
Learn Build Tools
Start creating your own professional web applications using build tools such as Webpack, esbuild, Parcel, and Vite.With CertificateIntermediate2 hours - Free course
Learn React: Introduction
Build powerful interactive applications with React, a popular JavaScript library.Beginner Friendly6 hours - Free course
Learn React
In this React course, you’ll build powerful interactive applications with one of the most popular JavaScript libraries.Intermediate13 hours