write a vite tutorial

ai answer

Vite Tutorial (2026)

Vite (French for “quick,” pronounced veet) is the default frontend toolchain for modern web apps. It gives you an instant ES-module dev server, fast HMR, and a production build powered by Rolldown. This guide uses Vite 8 (current line as of 2026).

Official docs: https://vite.dev

1. Prerequisites

• Node.js 20.19+ or 22.12+ (Node 18 is unsupported)
• npm, pnpm, yarn, or bun
• A modern browser for development

node -v

2. Create a project

npm create vite@latest

Or skip the prompts:

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

Open http://localhost:5173.

Official templates include vanilla, vanilla-ts, react, react-ts, react-compiler-ts, vue-ts, svelte-ts, solid-ts, and others. Try it with no install at https://vite.new/react-ts .

3. What the scaffold looks like

my-app/
├── public/           # copied as-is (favicon, robots.txt)
├── src/
│   ├── App.tsx
│   └── main.tsx      # JS entry
├── index.html        # HTML entry — lives at the project root
├── package.json
└── vite.config.ts

index.html is source, not a static file in public/:

<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>

Scripts:

4. How Vite stays fast

• Your source is served as native ESM. No full-app bundle on startup.
• node_modules are pre-bundled once into node_modules/.vite/deps.
• Saves trigger HMR — only the changed module updates. React Fast Refresh / Vue SFC HMR keep component state.

npm run dev -- --host      # LAN
npm run dev -- --port 3000
npm run dev -- --open

Vite 8 uses Rolldown as the single bundler (dev pre-bundle + production), which is why builds are much faster than Vite 5/6-era Rollup builds.

5. Config

vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 5173,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
})

Mirror the alias in tsconfig so the editor agrees:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["src/*"] }
  }
}

React Compiler (optional):

plugins: [react({ compiler: true })]

6. Environment variables

Only names starting with VITE_ reach the browser.

.env

VITE_API_URL=https://api.example.com
SECRET_KEY=stays-on-the-server

const api = import.meta.env.VITE_API_URL
const isDev = import.meta.env.DEV

Restart the dev server after changing .env files. Do not use process.env.REACT_APP_* — that is Create React App, not Vite.

7. CSS, images, JSON

import './index.css'
import styles from './Button.module.css'
import logo from './assets/logo.png'
import data from './data.json'

<img src={logo} alt="" />
<button className={styles.primary}>OK</button>

public/logo.png is referenced as /logo.png and is never hashed. Importable images belong in src/.

Glob (file-based routing, icon folders):

const pages = import.meta.glob('./pages/*.tsx')

8. Proxy a backend (skip CORS in dev)

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
})

fetch('/api/users') now hits your API.

9. Production

npm run build
npm run preview

Deploy the dist/ folder to any static host.

Not serving from the domain root (GitHub Pages, etc.):

export default defineConfig({
  base: '/my-repo/',
})

Default production browsers are Baseline Widely Available (Chrome/Edge 111+, Firefox 114+, Safari 16.4+ on current Vite 8). Use @vitejs/plugin-legacy only if you must support much older browsers.

10. Common mistakes

11. Next steps

• Features: https://vite.dev/guide/features
• Config: https://vite.dev/config
• Tests with the same pipeline: Vitest
• Type-check is separate: Vite transpiles with Oxc; run tsc --noEmit (or the scaffold’s tsc -b) for real type errors

A downloadable copy of this tutorial:

If you want a version aimed at a specific stack (React, Vue, a library build, or SSR), say which one and I’ll extend it.