Vite: Fast Dev Server & Modern Build Tool

Q: How do I expose environment variables to the client?

Prefix them with VITE_ and read them via import.meta.env.VITE_FOO. Unprefixed variables stay server-side, which protects secrets from being bundled into client code.

Vite

Vite is a modern frontend build tool and dev server built for speed. In development it serves your source as native ES modules and only transforms what the browser requests, so startup and hot-module replacement feel instant even in large apps. For production it bundles with Rollup.

That dev/prod split is Vite's core trick — skip bundling during development (where it's slow and unnecessary with native ESM), and bundle properly only for the optimized production build.

TL;DR

Vite gives near-instant dev startup and HMR via native ESM.
Dev mode and the production (Rollup) build differ — test both.
It's the default for modern React/Vue/Svelte apps.
Client env vars must use the VITE_ prefix; never leak secrets to the client.

Quick Example

Scaffold and configure a project — a framework plugin is usually all the config you need:

How Vite Works

Dev server

Serves source as ES modules, transforms on demand (pre-bundling dependencies with esbuild), and provides fast HMR — no upfront bundle step.

Production build

Bundles with Rollup, with code splitting and an asset pipeline, producing optimized output for deployment.

Core Concepts

**vite.config.*** — plugins, build, and dev settings.
Plugins — integrate frameworks and transforms (use the ecosystem, don't reinvent).
import.meta.env — environment variables; only VITE_-prefixed vars reach the client.

Best Practices

Separate env vars by environment and keep secrets server-side (only VITE_ vars are exposed).
Use framework plugins (@vitejs/plugin-react, etc.) instead of hand-rolling transforms.
Run a production build in CI — dev behavior doesn't guarantee the bundled output works.

Comparison: Vite vs webpack

See webpack.

Common Mistakes

Env var with the wrong prefix

Using Node-only APIs in browser code

FAQ

Why is Vite so fast in development?

It skips bundling. Browsers load your modules natively over ESM, and Vite only transforms files on request (pre-bundling dependencies with esbuild). There's no big upfront bundle, so startup and HMR are near-instant regardless of app size.

What bundler does Vite use for production?

Rollup. Development uses native ESM + esbuild, but the production build is a proper Rollup bundle with code splitting and minification — which is why you should test the build, not just dev.

Vite or webpack?

Vite for new projects — faster dev experience and minimal config. webpack when you're in a mature codebase already invested in it, or need a very specific configuration its ecosystem supports.

How do I expose environment variables to the client?

Prefix them with VITE_ and read them via import.meta.env.VITE_FOO. Unprefixed variables stay server-side, which protects secrets from being bundled into client code.