ViVite · Lesson 1 of 6

Why Vite?

Webpack bundles everything on start. With 10,000 modules that's 30+ seconds. Vite skips bundling during dev — the browser loads ES modules directly. That's a 2-second start regardless of project size.

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

◆ Note
Unlike Webpack, Vite's entry point is `index.html` at the project root, not a JavaScript file. Vite parses the HTML to find `<script type="module">` tags and uses those as entry points. This matches how the browser natively loads ES modules.