Vite

Next-generation frontend build tool with instant HMR.

When to Use

• Modern frontend development
• React/Vue/Svelte projects
• Fast development server
• Library bundling

Quick Start

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

Core Concepts

Configuration

// vite.config.ts
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: 3000,
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
      },
    },
  },
  build: {
    outDir: "dist",
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],
        },
      },
    },
  },
});

Environment Variables

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

# .env.production
VITE_API_URL=https://api.prod.example.com

// Usage in code
const apiUrl = import.meta.env.VITE_API_URL;
const isDev = import.meta.env.DEV;

Common Patterns

CSS & Assets

// Import CSS
import "./styles.css";
import styles from "./Component.module.css";

// Import assets
import logo from "./logo.svg";
import url from "./image.png?url";
import raw from "./file.txt?raw";

TypeScript Configuration

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "types": ["vite/client"],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

Best Practices

Do:

• Use path aliases for imports
• Configure proper proxy for API
• Enable sourcemaps in dev
• Use environment variables

Don't:

• Import from node_modules manually
• Skip TypeScript client types
• Ignore build warnings
• Use CommonJS in ESM project

Troubleshooting

Issue	Cause	Solution
HMR not working	Browser cache	Hard refresh or check config
Module not found	Path alias issue	Check vite/ts config
Build error	Dependency issue	Check for CJS/ESM conflicts

References

• Vite Documentation
• Vite Plugins