Vite Setup

# 1. Scaffold
npm create vite@latest myapp -- --template react-ts
cd myapp
npm install
npm run dev

# 2. vite.config.ts - typed, plugin-based
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': path.resolve(__dirname, 'src') },
  },
  server: {
    port: 5173,
    proxy: {
      '/api': { target: 'http://localhost:3000', changeOrigin: true },
    },
  },
  build: {
    sourcemap: true,
    target: 'es2022',
    rollupOptions: {
      output: { manualChunks: { react: ['react', 'react-dom'] } },
    },
  },
});


# 3. Env vars - VITE_ prefix is required for client exposure
# .env.development
VITE_API_URL=http://localhost:3000

# Usage
const url = import.meta.env.VITE_API_URL;


# 4. Static assets
import logo from './assets/logo.svg';
<img src={logo} alt='logo' />

# Or inline as URL
import iconUrl from './icon.png?url';


# 5. Dynamic import + code splitting
const Settings = React.lazy(() => import('./Settings'));


# 6. Build + preview
npm run build           # -> dist/
npm run preview         # serve dist/ locally


# 7. Deploy targets
# - Cloudflare Pages, Netlify, Vercel: drop the repo, set build cmd
# - Static S3 + CloudFront: aws s3 sync dist/ s3://bucket --delete

# 8. Vitest comes with Vite ergonomics
# npm i -D vitest jsdom @testing-library/react

# vitest.config.ts can re-use plugins from vite.config.ts


# 9. Production tips
# - Set Cache-Control: public, max-age=31536000, immutable for /assets
# - Set Cache-Control: max-age=60 for index.html (so deploys roll out)
# - Use Brotli/gzip at the edge

npm create vite@latest my-app -- --template react
cd my-app && npm i && npm run dev