Vite Cheat Sheet

Covers scaffolding projects, vite.config.ts options, environment variables, dev server proxying, and the production build/preview workflow.

2 PagesIntermediateMar 12, 2026

Scaffolding & Configuration

Creating a project and configuring the dev server.

bash

# Scaffold a new projectnpm create vite@latest my-app -- --template react-tscd my-app && npm install && npm run dev

vite.config.ts

Plugins, server proxy, and path aliases.

javascript

import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';export default defineConfig({  plugins: [react()],  server: {    port: 5173,    proxy: {      '/api': 'http://localhost:4000', // proxy API calls during dev    },  },  resolve: {    alias: { '@': '/src' },  },});

Environment Variables

Exposing config to client code safely.

javascript

// .env// VITE_API_URL=https://api.example.com// Usage in client code - only VITE_ prefixed vars are exposedconsole.log(import.meta.env.VITE_API_URL);console.log(import.meta.env.MODE);   // 'development' | 'production'console.log(import.meta.env.DEV);    // booleanconsole.log(import.meta.env.PROD);   // boolean

Build & Preview

Production build and local preview commands.

bash

npm run build        # tsc && vite build -> outputs to dist/npm run preview       # serve the production build locallyvite build --outDir build   # custom output directory

Key Features

What makes Vite's architecture fast.

Native ESM dev server- serves source files over native ES modules, no bundling needed in dev
esbuild pre-bundling- dependencies are pre-bundled with esbuild for a fast cold start
Rollup production build- uses Rollup under the hood for an optimized production bundle
Hot Module Replacement (HMR)- near-instant updates in the browser without a full page reload
import.meta.glob()- eagerly or lazily import multiple modules matching a glob pattern
Plugin API- Rollup-compatible plugin interface plus Vite-specific hooks

Pro Tip

Only environment variables prefixed with VITE_ are exposed to client code via import.meta.env - this is a deliberate security boundary, so never prefix real secrets that way or they'll end up in your client bundle.

Was this cheat sheet helpful?

Webpack Cheat Sheet

Babel Cheat Sheet