Lesson 1 of 6

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 directly, so even large projects start quickly.

Vite solves two problems: slow dev server startup (because old tools pre-bundle everything) and slow HMR (Hot Module Replacement). Vite uses native browser ES modules during development — no bundle at all. For production builds, it uses Rollup for optimized output.

Bash

# Create and start a new project
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev    # starts in <300ms

# Available templates:
# vanilla, vanilla-ts
# vue, vue-ts
# react, react-ts
# preact, preact-ts
# lit, lit-ts
# svelte, svelte-ts
# solid, solid-ts
# qwik, qwik-ts

# Build for production
npm run build

# Preview the production build locally
npm run preview

Bash

# Resulting project structure:
my-app/
├── public/            # Static assets (copied as-is)
│   └── favicon.svg
├── src/
│   ├── main.ts        # App entry point
│   ├── App.tsx        # Root component
│   └── assets/        # Processed assets (images, fonts)
├── index.html         # Entry HTML (NOT in public/)
├── vite.config.ts     # Vite configuration
├── tsconfig.json
└── package.json

Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.