Stop 17 · Build ToolsTopics · 1/9

Vite

In short

Most new React, Vue and Svelte projects start with Vite. You run one command, the dev server is up before your chai cools, and saving a file updates the page almost instantly.

A modern, fast frontend build tool using native ES modules during development (near-instant startup) and Rollup for optimized production builds.

The jaadu cook makes one fresh dosa to order while a big buffet table waits unused.

Think of it like this

Made to order vs full buffet

Old tools cooked the whole buffet before letting you in. Vite is a dosa counter: it makes only the file your browser asks for, right when it asks. For the final party (production), it still prepares everything properly in advance.

Watch it happen

Vite serving files on demand

Browser

Vite server

Your src

GET /src/main.tsx

1/6The browser asks for your entry file as a normal ES module. Nothing was bundled in advance.

The big ideas

What you need to know

Dev server uses native modules

In development, the browser loads your files as ES modules and Vite transforms each one on request. No giant bundle first.

Hot Module Replacement

HMR swaps only the module you edited, so the page updates without a full reload and your form inputs stay filled.

Real bundle for production

npm run build creates an optimised, minified bundle in dist/, with code split into smaller files.

Plugins add features

React, Vue, PWA support and more come as plugins you add to vite.config.ts.

How it works

From idea to live build

1
Scaffold
npm create vite@latest asks for a name and framework, then creates the project.
2
Develop
npm run dev starts the dev server with HMR.
3
Build
npm run build writes optimised files into the dist folder.
4
Preview
npm run preview serves dist locally so you test the real production build.

See it in code

Walk through the code

1// vite.config.ts2import { defineConfig } from "vite";3import react from "@vitejs/plugin-react";4 5export default defineConfig({6  plugins: [react()],7  server: { port: 3000 },8  build: { outDir: "dist", sourcemap: true },9});10 11// Only variables starting with VITE_ reach your code12const apiUrl = import.meta.env.VITE_API_URL;

1/4Import the helper that gives autocomplete, plus the official React plugin.

defineConfig gives you autocomplete. The VITE_ prefix is a safety rule, so random secrets from your .env don't accidentally end up in the browser bundle.

Save yourself the pain

Common mistakes

Oops

Testing only with npm run dev and assuming production behaves the same.

Do this instead

Run npm run build and npm run preview before deploying. Some bugs, like wrong asset paths, show up only in the real build.

Oops

Reading process.env.API_URL in Vite browser code.

Do this instead

Use import.meta.env.VITE_API_URL. Vite exposes env variables through import.meta.env, and only those with the VITE_ prefix.

Your mission

Spin up and ship a Vite app

~20 min

Quick check

Why does the Vite dev server start so quickly even in a big project?

Go deeper

1Scaffold a new project with `npm create vite@latest` and explore the config.
2Compare its dev-server startup time to a Webpack-based project.
3Learn `vite.config.ts` basics: plugins, aliases, build options.