Vite is the modern default: instant dev server, hot reload, optimized builds — zero configuration for 95% of projects.
Zero to running
npm create vite@latest my-app # pick: Vanilla / React / Vue + JS / TS cd my-app && npm install && npm run dev # → http://localhost:5173 with hot reload
What you get
- Save a file → browser updates in ~50ms (no refresh, state preserved in React)
- Import anything: CSS, images, JSON —
import data from "./qs.json" - TypeScript/JSX work out of the box
Env variables (the gotcha)
# .env — must be prefixed to reach the browser! VITE_API_URL=https://api.example.com SECRET_KEY=xxx # ← NOT exposed (good!) // in code: fetch(import.meta.env.VITE_API_URL + "/students");
The prefix rule exists so you can't accidentally ship server secrets to the client — anything without VITE_ stays private.
Ship it
npm run build # → dist/ folder: minified, hashed, tree-shaken npm run preview # test the production build locally
Drag dist/ to Netlify or connect the repo to Vercel (they auto-detect Vite) — see the hosting guide. Interview line: "Vite serves native ES modules in dev (instant) and bundles with Rollup for production" — that's the whole architecture.