Connecting
Learn/L6 · Vite and Local Development

What is Vite?

Vite is the dev server and bundler that runs your app locally and builds it for production.

Difficulty 2/5

Mental model

devbuildYour source codeVitelocalhost:5173dist/ (deploy)

Plain English

Vite gives you two superpowers: a dev server that shows your app instantly as you edit, and a build command that packages everything for production. You almost never call Vite directly — you call 'npm run dev' or 'npm run build'.

Analogy

Vite is the kitchen and the takeaway counter. Dev mode = kitchen with the lights on, you taste as you cook. Build = packaged meal ready to ship.

Jessica's wedding portal

`npm run dev` opens localhost:5173 with hot reload as you edit the wedding portal.

Agentify CRM

`npm run build` produces the bundle deployed to Vercel.

Go deeper

Local dev server + production builder.

Common mistakes

  • Editing the built dist/ files. Always edit src/.
  • Forgetting that env vars only work if prefixed with VITE_ in the frontend.

AI-agent trap

Agents propose Webpack configs by reflex. This stack is Vite — don't let them switch.
Quick check
Which command starts the local dev server?

Summary

Vite serves your source files using native ES modules in development for instant feedback, and bundles them with Rollup for production.

Confidence: