Vite

A fast development server and build tool for front-end projects.

Vite (French for 'fast') is a build tool that serves your code to the browser as native ES modules during development, so the dev server starts quickly and changes appear almost immediately. It was created by Evan You, the author of Vue, and is widely used for Vue, React, Svelte and plain JavaScript projects.

  • Intermediate
  • 6 lessons
  • Runs in your browser
Not started yet
Start lesson 1

Lessons

  1. Why Vite?You'll learn what Vite does differently from older bundlers like Webpack: it skips bundling during development and lets the browser load ES modules directly, so even large projects start quickly.
  2. Vite ConfigYou'll learn how to use `vite.config.ts` to set up plugins, path aliases, a dev-server proxy, build options and environment variables.
  3. Imports & AssetsYou'll learn how to import CSS, images, JSON and SVGs directly from JavaScript, and how Vite processes those files when you build.
  4. Plugins & HMRYou'll learn how to add plugins, including the official ones for most frameworks, and how Hot Module Replacement (HMR) updates the page as you edit without a full reload.
  5. Build & OptimizationYou'll learn what `npm run build` produces and how to inspect and tune it. Vite uses Rollup to minify, split and hash your files for production.
  6. Vite CheatsheetCommands, config, and env handling on one page.

Install it on your own computer

You need Node.js installed. Running `npm create vite` sets up a new project with Vite included, or you can add Vite to an existing project with npm. You do not need this to follow the lessons: the examples run in your browser.

Bash
# Create a new project:
npm create vite@latest my-project
# Choose: framework (React/Vue/Svelte/Vanilla) and variant (JS/TS)

cd my-project
npm install
npm run dev

What people build with Vite

Learn the basics first, then pick up these tools when a project needs them.

Practical uses

  • Run fast frontend development servers
  • Bundle production web applications
  • Build reusable JavaScript libraries
  • Prototype framework and vanilla projects

Projects to try

  1. Vanilla TypeScript microsite
  2. React component playground
  3. Multi-page app
  4. Published component library

Common tools and packages

@vitejs/plugin-react@vitejs/plugin-vueVitestvite-plugin-pwaRollup pluginsStorybookSassSVGR

Well-known software

Vue projectsSvelteKit toolingVitestStorybookLaravel frontend buildsAstro integrations