Vite Build Tool Cheat Sheet

Quick reference guide for Vite: vite.config.ts, plugin configuration, environment variables, and dev server.

Build Tools
vite
build-tool
frontend

Vite is a modern frontend build tool that provides a fast development server using native ES Modules (ESM) and bundles production code with Rollup.

Configuration File Example (`vite.config.ts`)

typescript
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,
    open: true,
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, "")
      }
    }
  },
  build: {
    outDir: "dist",
    sourcemap: true
  }
});

Environment Variables (`import.meta.env`)

Vite exposes environment variables on the special import.meta.env object.

Table
Variable NamePurpose / Output
import.meta.env.VITE_APP_TITLECustom env variable (MUST start with VITE_)
import.meta.env.MODECurrent running app mode (development or production)
import.meta.env.BASE_URLBase URL path configured in vite.config.ts
import.meta.env.PRODBoolean flag (true during production build)
import.meta.env.DEVBoolean flag (true during local dev server)

Essential Vite CLI Commands

Table
CommandAction / Purpose
npx create-vite app-name --template react-tsScaffold new project template
npx viteStart local HMR development server
npx vite buildCompile optimized production bundle to dist/
npx vite previewBoot local HTTP server to preview dist/ production bundle

Common Pitfalls & Tips

[!WARNING] Environment variables must be prefixed with VITE_ (e.g. VITE_API_URL) to be exposed to client-side frontend code bundle!

[!TIP] Use resolve.alias in vite.config.ts along with compilerOptions.paths in tsconfig.json for clean path imports like @/components/Button.

Related tools

CSS & JS MinifierHTML Minifier