Skip to content
Get packs

Guide · Open source

How to use Vite: install, run the dev server and build

Updated · written with AI from the project's own documentation and checked against our catalogue data

Vite is an open-source build tool for modern web projects, released under the MIT licence and written in TypeScript. It has a development server that serves your code quickly while you work, and a build command that bundles your code into optimized static files for production. This guide shows you how to scaffold a project, what the dev server and build command do, and where to look for plugins and the JavaScript API.

Vitevitejs/vite · ★ 83.7k · MIT

Quick start

  1. 1Check Node.js. Confirm Node.js is installed and that your version falls in the range shown by the node compatibility badge in the README.
  2. 2Scaffold a project. Run npm create vite@latest in the folder where you want your project to live.
  3. 3Install dependencies. Move into the new project folder and install its dependencies with your package manager.
  4. 4Start the dev server. Start the dev server and open the app in your browser to see changes appear as you edit.
  5. 5Edit and watch HMR. Change a file and watch the update appear almost immediately thanks to Hot Module Replacement.
  6. 6Build for production. Run the build command to bundle your code into optimized static files.

What Vite is and who it is for

Vite (French for "quick") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It has two major parts: a dev server that uses native ES modules and fast Hot Module Replacement (HMR), and a build command that bundles your code with Rolldown for production.

Vite is a tool for building apps, so it suits frontend developers starting a new modern web project and teams that want faster local dev server startup and hot reloading. It is not useful if you only need a finished app, and setup requires JavaScript project knowledge.

  • Instant server start
  • Lightning fast HMR
  • Optimized build
  • Universal plugin interface
  • Fully typed APIs

Check the prerequisites before you install

Vite is installed through a package manager and requires Node.js. The README gives a Node.js version range through its node compatibility badge but does not state an exact version, so check that badge on the project page before you start.

Create a new project with create-vite

The README scaffolds a new project with the create-vite package. Run the command below in the folder where you want the project to live. It creates a new project folder for you using the latest create-vite release.

npm create vite@latest

Run the dev server and see changes instantly

The dev server serves your code while you work. Because it uses native ES modules and fast HMR, changes you save appear almost immediately in the browser without a full reload of the whole app.

Use the dev server while you build features, and use the build command only when you are ready to produce files for deployment.

Build your project for production

The build command bundles your code with Rolldown and is pre-configured to output highly optimized static assets. The result is a set of static files you can host on any static host.

Extend Vite with plugins and the JavaScript API

Vite is extensible through its Plugin API and its JavaScript API, both with full typing support. The Plugin API is the documented way to add behaviour, and the packages list includes @vitejs/plugin-legacy as an official plugin.

Read the official guide at vite.dev for the full list of features and API details.

  • Plugin API: vite.dev/guide/api-plugin.html
  • JavaScript API: vite.dev/guide/api-javascript.html
  • Features overview: vite.dev/guide/features

What people use it for

  • Starting a new modern frontend web project with a fast local dev server
  • Speeding up hot reloading for a team's frontend development workflow
  • Building optimized static files for production deployment
  • Adding custom behaviour through the Plugin API
  • Writing typed integrations with the JavaScript API

Frequently asked questions

How do I install Vite?

The README scaffolds a new project with the create-vite package using npm create vite@latest. Vite is installed through a package manager, so you need Node.js available on your machine.

What Node.js version does Vite need?

The README does not state an exact version. It points to a node compatibility badge that shows the supported range, so check that badge on the project page.

Is Vite free to use?

Yes. Vite is released under the MIT licence, as stated in the project's LICENSE file.

Is Vite better than webpack?

The README lists webpack, Parcel, esbuild and Rspack as comparable projects but does not make a performance claim against them. Vite's stated focus is a faster, leaner development experience with a fast dev server and optimized production builds.

Why is my Vite dev server not updating?

The source does not cover troubleshooting. Check the official docs at vite.dev and the project's Discord chat linked in the README for help.

Can non-developers use Vite?

Not easily. Vite is a development toolchain and setup and use require JavaScript project knowledge.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Vite suits frontend developers starting a new modern web project who want a fast dev server, hot reloading and a plugin system. It is not the right pick if you only need a finished app or if you have no JavaScript project experience.

Install options & downloads