Skip to content

Vite

The build tool that made front-end development feel instant.

Build & PackagingBuild Tool / FrontendJavaScript
Official docs ↗GitHub ↗

What it is

Vite is a modern frontend build tool that provides a fast development server and optimized build process for modern web projects. It leverages native ES modules in the browser and bundles with Rollup for production.

Vite provides a development server with native ES module support and lightning-fast hot module replacement. For production builds, it uses Rollup to bundle and optimize assets. It supports plugins, TypeScript, JSX, CSS preprocessors, and framework-specific configurations.

Licence
MIT
Best known for
Native ESM in development, Rollup for production builds

When to use it

The question documentation cannot answer for you — because it cannot recommend something else.

Reach for it when

  • Any new front-end project — React, Vue, Svelte or vanilla
  • You want a dev server that starts in milliseconds regardless of project size

Look elsewhere when

  • A complex legacy Webpack configuration with custom loaders that has no Vite equivalent
  • You are on a meta-framework such as Next.js that manages its own bundling

Installation

npm create vite@latest

Getting started

The smallest useful thing you can do with it, and what each part means.

Create a new Vite project
# Terminal
npm create vite@latest my-vite-app
cd my-vite-app
npm install
npm run dev
Initializes a new Vite project, installs dependencies, and starts the development server.
Using ES modules
// main.js
import { hello } from './module.js';
hello();
Demonstrates importing a module using native ES module syntax in a Vite project.

Advanced usage

Where the library earns its place over a simpler alternative.

React + Vite setup
# Terminal
npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev
Creates a React project preconfigured with Vite and starts the dev server with fast HMR.
Vite config example
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [react()],
  server: { port: 3000 },
});
Configures Vite to use the React plugin and run the dev server on port 3000.
Optimizing production build
npm run build
# Output is in dist/ folder
Generates an optimized production build using Rollup.
Using plugins
// vite.config.js
import vue from '@vitejs/plugin-vue';
export default {
  plugins: [vue()]
};
Demonstrates adding a Vite plugin for Vue support.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

Port already in use
Specify a different port in vite.config.js under server.port or close the other process using the port.
Module not found
Ensure file paths are correct and modules are installed via npm/yarn.
HMR not updating
Check that the browser supports ES modules and clear the cache. Ensure the project uses supported frameworks/plugins.

Best practices

  • Use ES modules and modern JavaScript syntax for better performance.
  • Take advantage of Vite's HMR during development for instant feedback.
  • Use plugins for framework-specific features and optimizations.
  • Keep configuration minimal; Vite works with zero-config for many projects.
  • Use environment variables and .env files to manage project settings.

Alternatives

Comparable options, and the reason you would pick one over the other.

Background

Why it exists, and what it was reacting to.

Vite was created by Evan You (the creator of Vue.js) to improve the frontend development experience by offering instant server start, fast hot module replacement (HMR), and an optimized build output. It supports frameworks like Vue, React, Svelte, and vanilla JavaScript projects.

Related libraries

Others in Build & Packaging for JavaScript.

← All JavaScript librariesJavaScript guide