Vite Cheatsheet

# ── Commands ────────────────────────────
npm create vite@latest app -- --template react-ts
npm run dev            # dev server, instant HMR
npm run build          # production build -> dist/
npm run preview        # serve the dist/ build locally

# templates: vanilla(-ts) vue(-ts) react(-ts)
#            preact svelte solid lit qwik

# ── Env variables ───────────────────────
# .env               loaded always
# .env.development   npm run dev only
# .env.production    npm run build only
# .env.local         gitignored secrets
#
# MUST start with VITE_ to reach client code:
# VITE_API_URL=https://api.example.com

// vite.config.ts — the config you'll actually write:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'node:path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': path.resolve(__dirname, 'src') },
  },
  server: {
    port: 3000,
    proxy: {                       // avoid CORS in dev
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
})

// In app code:
import.meta.env.VITE_API_URL      // your env vars
import.meta.env.DEV               // true in dev
import.meta.env.PROD              // true in build
import logo from './logo.svg'     // assets become URLs
const mods = import.meta.glob('./pages/*.tsx')  // lazy import many