React

Vite Commands

Use Vite for lightning-fast React development. Near-instant dev server startup, HMR that stays fast regardless of app size, and optimized production builds.

11 commands

Pro Tips

Create a new project: 'npm create vite@latest my-app -- --template react-ts' for React + TypeScript.

Use 'vite preview' to locally preview the production build before deploying.

Configure path aliases in vite.config.ts: 'resolve: { alias: { "@": path.resolve(__dirname, "./src") } }'.

Common Mistakes

Vite uses ESM in development but bundles for production. Some libraries behave differently — test both modes.

Environment variables must be prefixed with VITE_ to be exposed to client code. Others are server-only.

Commands

Create Vite React app

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

Create Vite project with React and TypeScript.

Create with SWC

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

Create Vite project with SWC compiler (faster).

Start dev server

$ vite

Start Vite dev server with HMR.

Dev with custom port

$ vite --port 3000

Start dev server on custom port.

Build for production

$ vite build

Build production bundle with Rollup.

Preview production

$ vite preview

Preview production build locally.

Force re-optimize

$ vite --force

Force re-optimization of dependencies.

Open browser

$ vite --open

Auto-open browser on server start.

Create Vite + SWC (no TS)

$ npm create vite@latest my-app -- --template react-swc

Create Vite project with SWC compiler (JavaScript, no TypeScript).

Production build with sourcemaps

$ vite build --mode production --sourcemap

Build for production with source maps for debugging.

Preview on network

$ vite preview --host 0.0.0.0

Preview production build accessible on local network.