Vite: dev server and build
Start a Vite project, use its instant HMR dev server, run the build command, and preview the production output.
Vite: dev server and build is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is Vite?
Vite is a next-generation frontend build tool created by Evan You (creator of Vue). It provides an extremely fast dev server using native ESM and esbuild, plus a Rollup-powered production build.
Creating a Vite Project
npm create vite@latest scaffolds a new project. Choose your framework (Vanilla, React, Vue, Svelte, Preact, Lit) and variant (JS or TS). It's instantly ready — no configuration needed.
npm create vite@latest my-app
# Choose: React + TypeScript
cd my-app
npm install
npm run dev # dev server on localhost:5173The Dev Server — Instant Start
Vite doesn't bundle in development. It serves each file as a native ESM module. The browser imports them directly. No bundling = sub-100ms cold start regardless of project size. Only changed files are re-compiled on HMR.
HMR — Hot Module Replacement
Vite's HMR replaces only the changed module in the running app without a full page reload. For React with @vitejs/plugin-react, component state is preserved during HMR. Changes appear in under 50ms.
The vite.config.js / vite.config.ts
Vite is configured with a vite.config.ts file. Common options: plugins, resolve aliases, server port, proxy for API calls, and build output directory.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
resolve: {
alias: { '@': '/src' },
},
server: {
port: 3000,
proxy: {
'/api': 'http://localhost:8080',
},
},
});Environment Variables
Vite exposes env variables prefixed with VITE_ via import.meta.env. Store them in .env, .env.development, and .env.production. Never prefix secrets with VITE_ — they're included in the browser bundle.
# .env
VITE_API_URL=https://api.example.com
# In code:
const apiUrl = import.meta.env.VITE_API_URL;npm run build — Production Build
npm run build invokes Rollup under the hood to bundle, minify, and tree-shake the app. Output goes to the dist/ folder ready for deployment.
npm run build
# Output:
# dist/
# index.html
# assets/
# index-a1b2c3.js (minified app bundle)
# vendor-d4e5f6.js (node_modules chunk)
# index-7h8i9j.cssAnalysing the Bundle
Use vite-bundle-visualizer or rollup-plugin-visualizer to generate a treemap of the bundle contents. Helps identify oversized dependencies and opportunities for lazy loading.
npm run preview
npm run preview serves the production dist/ build locally. Use it to verify the production build before deploying — it catches issues that only appear when the app is not in dev mode.
Code Splitting in Vite
Dynamic import() statements automatically create separate chunks. React Router lazy routes and Vue's defineAsyncComponent also trigger splitting. Check chunk sizes in the build output.
Vite for Libraries
Vite's library mode (build.lib) builds npm libraries, outputting both ESM and CJS formats. Specify an external list to prevent bundling peer dependencies like React.
Quick Check
Why is Vite's development server faster than webpack's?
Recap: Vite
npm create vite@latest scaffolds instantly. Dev server uses native ESM — no bundling, instant HMR. vite.config.ts for plugins, aliases, and proxy. VITE_ prefix for browser-safe env vars. npm run build produces an optimised Rollup bundle. npm run preview tests the production build locally.
Frequently asked questions
Is the “Vite: dev server and build” lesson free?
Yes — the full text of “Vite: dev server and build” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Vite: dev server and build”?
Start a Vite project, use its instant HMR dev server, run the build command, and preview the production output. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Vite: dev server and build” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.