Modules

Examples

End-to-end walkthroughs: a React + TypeScript app, aliases and env usage, a dev proxy, and a manual chunk-splitting build.

Path: examples

Third-party documentation. This is independently authored analysis of the public Vite codebase — not the official docs, and not reviewed or endorsed by the Vite team.

Examples

End-to-end walkthroughs of the four flows developers hit most: scaffolding a project, wiring aliases and environment variables, proxying an API in development, and tuning the production chunk output.

Scaffold and run

Run npm create vite@latest my-app -- --template react-ts to generate a React + TypeScript project.
Run npm install, then npm run dev — the dev server starts in milliseconds and serves native ESM at http://localhost:5173.
Edit a component and watch Fast Refresh preserve the browser state without a full reload.
Run npm run build to produce an optimized dist/, then npm run preview to serve it locally and verify what ships.

Aliases and environment variables

Add resolve.alias so imports like @/api/client resolve to src/api/client, and put API configuration in .env under a VITE_ prefix so it's available as import.meta.env.VITE_API_URL. Because inlining happens at build time, non-VITE_ secrets must never be used in client code.

Dev proxy

When the frontend and a backend run on different ports, configure server.proxy to forward /api to the backend. The proxy runs in the dev server only; production deployments are expected to terminate proxying at the edge (reverse proxy, CDN, or platform routing).

Chunk splitting for caching

Large single bundles invalidate on every change. Use build.rollupOptions.output.manualChunks to separate vendored libraries (e.g. react/react-dom) from application code, so users re-download only the app chunk on release, not the stable vendor bundle.

Examples

Scaffold a React + TypeScript app

bash

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev        # http://localhost:5173
npm run build      # Rollup build → dist/
npm run preview    # serve the production build

STATUSexample

create-vite scaffolds from a template; npm run dev starts the native-ESM server, npm run build produces the optimized dist/, and preview serves it locally.

Alias + env in vite.config.ts

typescript

import { defineConfig } from &#039;vite&#039;
import react from &#039;@vitejs/plugin-react&#039;
import path from &#039;node:path&#039;
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { &#039;@&#039;: path.resolve(__dirname, &#039;src&#039;) },
  },
})
 
// .env:
//   VITE_API_URL=https://api.example.com
// Usage in code (VITE_-prefixed vars only):
//   const apiUrl = import.meta.env.VITE_API_URL
//   const isDev = import.meta.env.DEV      // true in `vite dev`
//   const mode = import.meta.env.MODE      // 'development' | 'production'

STATUSexample

defineConfig gives full type-checking of the config; resolve.alias remaps deep imports; only VITE_-prefixed variables are exposed via import.meta.env.

Dev proxy for /api

typescript

import { defineConfig } from &#039;vite&#039;
 
export default defineConfig({
  server: {
    proxy: {
      &#039;/api&#039;: {
        target: &#039;http://localhost:8000&#039;,
        changeOrigin: true,
      },
    },
  },
})

STATUSexample

A dev-server proxy avoids CORS issues during local development by forwarding /api requests to a backend.

Manual chunks for caching

typescript

import { defineConfig } from &#039;vite&#039;
 
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: [&#039;react&#039;, &#039;react-dom&#039;],
        },
      },
    },
  },
})

STATUSexample

manualChunks gives long-lived vendor bundles their own filenames so library upgrades don't invalidate app caches.

Edge Cases

A dependency shipped as CommonJS is handled automatically by pre-bundling — but if it references Node globals like process or Buffer, you still need to polyfill or alias them explicitly.
Dynamic import() returns a Promise split into its own chunk — keep code-split boundaries coarse to avoid waterfall requests on slow networks.
import.meta.env vars are inlined at build time and only VITE_-prefixed ones are exposed; anything sensitive must not be prefixed with VITE_.
Large monorepos benefit from setting server.fs.allow or using the workspace root option, otherwise the dev server refuses to serve files outside the project root.