CheatPress

Vite Frontend build tool

Version 8.3.4 · source

Vite, Postcard, light preview Light · Postcard 102 × 152 mm · PDF Vite, Postcard, dark preview Dark · Postcard 102 × 152 mm · PDF Vite, Postcard, ink saver preview Ink saver · Postcard 102 × 152 mm · PDF
Vite, A5, light preview Light · A5 148 × 210 mm · PDF Vite, A5, dark preview Dark · A5 148 × 210 mm · PDF Vite, A5, ink saver preview Ink saver · A5 148 × 210 mm · PDF
Vite, A4, light preview Light · A4 210 × 297 mm · PDF Vite, A4, dark preview Dark · A4 210 × 297 mm · PDF Vite, A4, ink saver preview Ink saver · A4 210 × 297 mm · PDF
Vite, A4 landscape, light preview Light · A4 landscape 297 × 210 mm · PDF Vite, A4 landscape, dark preview Dark · A4 landscape 297 × 210 mm · PDF Vite, A4 landscape, ink saver preview Ink saver · A4 landscape 297 × 210 mm · PDF
Vite, A3, light preview Light · A3 297 × 420 mm · PDF Vite, A3, dark preview Dark · A3 297 × 420 mm · PDF Vite, A3, ink saver preview Ink saver · A3 297 × 420 mm · PDF
Vite, A3 landscape, light preview Light · A3 landscape 420 × 297 mm · PDF Vite, A3 landscape, dark preview Dark · A3 landscape 420 × 297 mm · PDF Vite, A3 landscape, ink saver preview Ink saver · A3 landscape 420 × 297 mm · PDF
Vite, Letter, light preview Light · Letter 8.5 × 11 in · PDF Vite, Letter, dark preview Dark · Letter 8.5 × 11 in · PDF Vite, Letter, ink saver preview Ink saver · Letter 8.5 × 11 in · PDF
Vite, Tabloid, light preview Light · Tabloid 11 × 17 in · PDF Vite, Tabloid, dark preview Dark · Tabloid 11 × 17 in · PDF Vite, Tabloid, ink saver preview Ink saver · Tabloid 11 × 17 in · PDF

Start here

npm create vite@latest
Scaffold a project
npm install
Install dependencies
npx vite
Start dev server
npx vite --open
Dev server, open browser
npx vite build
Production build to dist/
npx vite preview
Serve the built output
npx vite --host
Expose on the network
npx vite --force
Re-bundle dependencies

Concepts

  1. index.html entry point
  2. Dev server localhost:5173, HMR
  3. dist/ bundled assets
  4. Local check not for production

Dev server

vite
Start the dev server (aliases: dev, serve)
vite <root>
Serve a different project root
The config file must live in that root.
vite --port <port>
Set the port (default 5173)
vite --strictPort
Fail instead of picking another port
vite --host [host]
Listen on all addresses or a given host
On WSL2 --host alone may not be enough for LAN access.
vite --open [path]
Open the browser on start
vite --force
Ignore the optimizer cache
vite --mode <mode>
Set the env mode (default development)
vite --base <path>
Set the public base path
vite --config <file>
Use a specific config file

Build

vite build
Production build into dist/
vite build --outDir <dir>
Change the output directory
vite build --sourcemap [output]
Emit source maps (true, inline, hidden)
vite build --mode <mode>
Build with another env mode
Mode and NODE_ENV are separate: build keeps NODE_ENV=production.
vite build --watch
Rebuild when files change
vite build --minify <minifier>
Pick minifier: oxc, terser, esbuild, false
vite build --target <target>
Set the transpile target
vite build --base <path>
Build for a sub-path deployment
vite build --emptyOutDir
Empty outDir even outside the root
vite build --manifest [name]
Emit a manifest of hashed assets
vite build --ssr [entry]
Build an entry for server rendering

Preview

vite preview
Serve the built dist/ locally
vite preview --port <port>
Set the preview port
vite preview --host [host]
Expose the preview on the network
vite preview --open [path]
Open the browser on start
vite preview --outDir <dir>
Serve a non-default build folder
vite optimize
Pre-bundle dependencies (deprecated)
Deprecated: this already runs automatically.

Dev server keys

h
Show the shortcut list
r
Restart the server
u
Print the server URL
o
Open in the browser
c
Clear the console
q
Quit the server

Scaffolding

npm create vite@latest <name>
Create a project interactively
npm create vite@latest <name> -- --template <tpl>
Scaffold a template (npm 7+ needs --)
pnpm create vite <name> --template <tpl>
Same with pnpm (no extra --)
npm create vite@latest . -- --template <tpl>
Scaffold in the current directory
npm create vite@latest <name> -- --no-interactive
Scaffold without prompts
Template names
Framework Plain JS TypeScript
vanilla vanilla vanilla-ts
vue vue vue-ts
react react react-ts
react (compiler) react-compiler react-compiler-ts
preact preact preact-ts
svelte svelte svelte-ts
solid solid solid-ts
lit lit lit-ts
qwik qwik qwik-ts

Env and debugging

Env files (later rows win)
File Loaded Git
.env always commit
.env.local always ignored
.env.<mode> that mode only commit
.env.<mode>.local that mode only ignored
vite --debug [feat]
Show debug logs (e.g. vite:*)
vite --version
Print the Vite version
vite --help
Show CLI help
npx vite@<sha>
Try an unreleased build via pkg.pr.new

Recipes

New React + TypeScript app
npm create vite@latest my-app -- --template react-tscd my-appnpm installnpm run dev
Staging build with its own env
# loads .env and .env.stagingnpx vite build --mode stagingnpx vite preview --outDir dist
Proxy API calls in vite.config.js
export default defineConfig({  server: { proxy: {    '/api': { target: 'http://localhost:4567', changeOrigin: true }  } }})
Test the build on a phone
npx vite buildnpx vite preview --host --port 4173