.env                    # Loaded always
.env.local              # Loaded always, ignored by git
.env.development        # Loaded in development (npm run dev)
.env.development.local  # Loaded in development, ignored by git
.env.production         # Loaded in production (npm run build)
.env.production.local   # Loaded in production, ignored by git

# .env — shared defaults
VITE_APP_NAME="FutureTechZone"
VITE_APP_VERSION="1.0.0"

# .env.development — development overrides
VITE_API_URL="http://localhost:8000/api"
VITE_ENABLE_DEBUG=true
VITE_ANALYTICS_ID=""            # No analytics in development

# .env.production — production values
VITE_API_URL="https://api.futuretechzone.in/api"
VITE_ENABLE_DEBUG=false
VITE_ANALYTICS_ID="UA-XXXXXXXXX-1"

// Only variables prefixed with VITE_ are exposed to the browser
// This prevents accidentally exposing server secrets

const apiUrl = import.meta.env.VITE_API_URL;
const appName = import.meta.env.VITE_APP_NAME;
const isDev = import.meta.env.DEV;       // Built-in: true in development
const isProd = import.meta.env.PROD;      // Built-in: true in production
const mode = import.meta.env.MODE;       // "development" or "production"

// TypeScript types for env variables
// vite-env.d.ts
interface ImportMetaEnv {
    readonly VITE_API_URL: string;
    readonly VITE_APP_NAME: string;
    readonly VITE_ANALYTICS_ID: string;
}

interface ImportMeta {
    readonly env: ImportMetaEnv;
}

# React support (with Fast Refresh)
npm install -D @vitejs/plugin-react

# React with SWC compiler (faster than Babel)
npm install -D @vitejs/plugin-react-swc

# Vue.js support
npm install -D @vitejs/plugin-vue

# Legacy browser support
npm install -D @vitejs/plugin-legacy

# Auto-import components and composables
npm install -D unplugin-auto-import unplugin-vue-components

# SVG as React components
npm install -D vite-plugin-svgr

# PWA support (service worker, manifest)
npm install -D vite-plugin-pwa

# Bundle size analysis
npm install -D rollup-plugin-visualizer

# Mock server in development
npm install -D vite-plugin-mock

# Image optimization
npm install -D vite-plugin-imagemin

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import svgr from "vite-plugin-svgr";
import { VitePWA } from "vite-plugin-pwa";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
    plugins: [
        react(),

        // Use SVG files as React components
        svgr(),

        // Progressive Web App support
        VitePWA({
            registerType: "autoUpdate",
            manifest: {
                name: "FutureTechZone",
                short_name: "FTZ",
                theme_color: "#0066cc",
                icons: [
                    { src: "/icon-192.png", sizes: "192x192", type: "image/png" },
                    { src: "/icon-512.png", sizes: "512x512", type: "image/png" }
                ]
            }
        }),

        // Bundle analyzer (run: npx vite build then open stats.html)
        visualizer({ filename: "stats.html", open: true })
    ]
});

// Import SVG as a React component
import { ReactComponent as Logo } from "./logo.svg";
import logoUrl from "./logo.svg";  // Import as URL

function Header() {
    return (
        <header>
            <Logo className="logo" width={120} height={40} />
        </header>
    );
}

# Build for production
npm run build

# Output:
dist/
├── index.html                  # Entry HTML with hashed asset references
├── assets/
│   ├── index-a2b3c4d5.js       # Hashed filename (cache-friendly)
│   ├── react-f1e2d3c4.js       # Vendor chunk (cached separately)
│   ├── index-b5c6d7e8.css      # Compiled and minified CSS
│   └── logo-9a8b7c6d.svg       # Asset with content hash

Tree-shaking:
→ Dead code elimination — only code you actually use is included
→ If you import only { useState } from React, useState is all that ships

Code splitting:
→ Separate bundles for different routes — lazy loading
→ Vendor chunks cached separately from your code

Asset optimization:
→ CSS minification and combining
→ Small assets (< 4KB) inlined as base64
→ Hashed filenames for permanent caching

Minification:
→ JavaScript minified (remove comments, shorten variable names)
→ HTML whitespace removed

import { lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

// Lazy load pages — each gets its own chunk
const HomePage     = lazy(() => import("./pages/HomePage"));
const BlogPage     = lazy(() => import("./pages/BlogPage"));
const DashboardPage = lazy(() => import("./pages/DashboardPage"));

function App() {
    return (
        <BrowserRouter>
            <Suspense fallback={<div>Loading...</div>}>
                <Routes>
                    <Route path="/"          element={<HomePage />} />
                    <Route path="/blog"      element={<BlogPage />} />
                    <Route path="/dashboard" element={<DashboardPage />} />
                </Routes>
            </Suspense>
        </BrowserRouter>
    );
}

// Result: DashboardPage code is ONLY downloaded when user visits /dashboard
// Home page load is faster because dashboard code is not included

npm run build
npm run preview
# Production build served at http://localhost:4173
# Test exactly what users will experience

# 1. Remove CRA
npm uninstall react-scripts

# 2. Install Vite
npm install -D vite @vitejs/plugin-react

# 3. Create vite.config.ts

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
    plugins: [react()],
    server: { port: 3000 }
});

# 4. Move index.html from public/ to project root
# 5. Update index.html — add type="module" to script tag

<!-- index.html — in project root -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>  <!-- Add type="module" -->
</body>
</html>

// 6. Update package.json scripts
{
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "preview": "vite preview"
    }
}

# 7. Replace process.env with import.meta.env
# process.env.REACT_APP_* → import.meta.env.VITE_*
# Update .env files: REACT_APP_ prefix → VITE_ prefix

# 8. Run it!
npm run dev

npm create vite@latest my-app -- --template react-ts

npm create vite@latest my-app -- --template vue-ts

npm create vite@latest my-app -- --template svelte-ts

npm create vite@latest my-app -- --template vanilla-ts

// vite.config.ts for a component library
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

export default defineConfig({
    plugins: [react()],
    build: {
        lib: {
            entry: resolve(__dirname, "src/index.ts"),
            name: "MyLibrary",
            fileName: "my-library"
        },
        rollupOptions: {
            external: ["react", "react-dom"],
            output: {
                globals: { react: "React", "react-dom": "ReactDOM" }
            }
        }
    }
});