Why Vite (and What It Isn't)

Vite is a dev server and a production bundler. That's the whole product. The reason it feels magical is that it stopped pretending to be a bundler in development.

The two-mode trick

Older React tooling — Create React App, webpack-based starters — used the same bundler for development and production. Every time you saved a file, webpack rebuilt a chunk graph and re-ran your code through Babel. Cold starts took 15-60 seconds for medium projects. Hot reload was 'fast' only relative to a full restart.

Vite splits the modes:

Dev: native ES modules in the browser, served on demand by Vite's dev server. No bundling. Source files transform on request. Cold start is the time to start a Node process plus your first import chain — usually sub-second.
Build: vite build uses Rollup under the hood. This is a real bundler: tree-shaking, code splitting, minification, CSS extraction. The output is what you ship.

The trick works because browsers shipped native ESM support years ago. In dev, your code is what you wrote (with TS/JSX stripped). In prod, it's optimized.

What Vite is not

Vite is not a framework. It does not give you routing, data fetching, auth, or a deployment story. You compose those on top: React Router for routing, TanStack Query / SWR / native fetch for data, Tailwind v4 for styling, an auth library for auth. The shape of your app is your decision.

Vite is also not opinionated about file structure. There's no app/ or pages/ directory it cares about. You organize src/ however you want.

Vite vs Turbopack vs webpack vs esbuild

You'll hear these names. Quick map:

esbuild — A Go-based JS/TS bundler/transformer. Vite uses esbuild internally for dependency pre-bundling and TS stripping.
webpack — The classic. CRA was built on it. Still powers a lot of legacy. Slower than Vite at every scale.
Turbopack — Vercel's bundler, written in Rust, that powers Next.js's dev server (and increasingly its production builds). Not used outside Next.js — don't reach for it in a Vite project.
Vite — Native ESM in dev + Rollup in prod. Framework-agnostic. The default for SPAs in 2026.

Vite isn't tied to React. The same Vite binary builds Vue, Svelte, Solid, vanilla TS, even Tauri's frontend. You'll see the @vitejs/plugin-react plugin wire React-specific behavior on top — Fast Refresh, JSX handling, automatic dev-only React imports.

The whole config

A working Vite + React + TS config fits in eight lines. There's no hidden magic — what you see is what runs.

Code

vite.config.ts — minimal, with the dev-server proxy cwkPippa uses·ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    // Forward /api requests to a FastAPI backend running on :8000.
    // This is exactly how cwkPippa's frontend talks to its Python backend in dev.
    proxy: {
      "/api": "http://localhost:8000",
    },
  },
});

What `npm run dev` actually runs (package.json scripts)·json

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  }
}

Exercise

Run npm create vite@latest hello-vite -- --template react-ts, then cd hello-vite && npm install && npm run dev. Open the dev URL, edit src/App.tsx, and time how long the change takes to appear in the browser. Then open vite.config.ts and add the same /api proxy from the code block above (even if you don't have a backend yet — just verify the config loads).

Hint

If the dev server doesn't restart on vite.config.ts changes, kill and restart it. Vite watches the config file but a malformed one can crash silently.

Why Vite (and What It Isn't)

The two-mode trick

What Vite is not

Vite vs Turbopack vs webpack vs esbuild

The whole config

Code

External links

Exercise

Progress

Comments 0