Vite

# Create new project
npm create vite@latest my-app

# Choose template:
# - vanilla (JavaScript)
# - vue
# - react
# - preact
# - lit
# - svelte

# Or specify directly:
npm create vite@latest my-react-app -- --template react

# Navigate and install
cd my-react-app
npm install

# Start dev server
npm run dev

# Dev server starts instantly!
# Visit: http://localhost:5173

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  // Plugins (React, Vue, etc.)
  plugins: [react()],
  
  // Dev server config
  server: {
    port: 3000,
    open: true,  // Auto-open browser
    cors: true
  },
  
  // Build config
  build: {
    outDir: 'dist',
    sourcemap: true,
    minify: 'esbuild',  // Super fast!
    
    // Rollup options
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom']
        }
      }
    }
  },
  
  // Path aliases
  resolve: {
    alias: {
      '@': '/src',
      '@components': '/src/components'
    }
  }
});

// .env file
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

// ⚠️ Must start with VITE_ to be exposed!

// Usage in code:
const apiUrl = import.meta.env.VITE_API_URL;
const appTitle = import.meta.env.VITE_APP_TITLE;

console.log(apiUrl);  // https://api.example.com

// Built-in environment variables:
import.meta.env.MODE        // 'development' or 'production'
import.meta.env.BASE_URL    // base URL
import.meta.env.PROD        // boolean
import.meta.env.DEV         // boolean

// Different env files:
.env                  # All modes
.env.local            # All modes (gitignored)
.env.development      # Development only
.env.production       # Production only