Vite

Overview

Vite is a next-generation frontend build tool providing instant dev server startup via native ES modules and production builds bundled by Rolldown (since Vite 8; earlier versions used Rollup and esbuild). It supports React, Vue, Svelte, and vanilla TypeScript projects with advanced bundling strategies, plugin extensibility, and library mode.

Instructions

• To start a project run npm create vite@latest (or npm create vite@latest storefront -- --template react-ts). Vite 8 needs Node.js 20.19+ or 22.12+.
• When setting up a project, create vite.config.ts with the appropriate framework plugin (@vitejs/plugin-react, @vitejs/plugin-vue), configure resolve.alias with @ mapping to src/, and set environment variables with VITE_ prefix in .env, .env.local or .env.[mode] files (restart the dev server after editing them). Add vite-env.d.ts with an ImportMetaEnv interface for typed variables.
• When configuring the dev server, set up API proxying with server.proxy, enable HTTPS with @vitejs/plugin-basic-ssl, and use server.watch polling for containers or VMs.
• When optimizing builds, split vendor code with build.rolldownOptions.output.codeSplitting (Vite 8; the object form of manualChunks was removed and the function form is deprecated; on Vite 7 and older use build.rollupOptions.output.manualChunks). CSS code splitting is on by default. build.target defaults to 'baseline-widely-available' (Chrome 111, Edge 111, Firefox 114, Safari 16.4).
• When creating plugins, use the Rollup-compatible plugin API with resolveId, load, and transform hooks, and leverage virtual modules with the virtual: prefix.
• When building libraries, configure build.lib with entry point and output formats (es, cjs, umd), externalize peer dependencies, and use vite-plugin-dts for TypeScript declaration generation. Default formats are es and umd for one entry, es and cjs for several; AMD and SystemJS output was removed in Vite 8.
• When upgrading to Vite 8: rename build.rollupOptions to build.rolldownOptions, expect Oxc instead of esbuild for transforms and minification (esbuild options are auto-converted to oxc but deprecated), and Lightning CSS for CSS minification. If a default import from a CommonJS package changes behavior, set legacy.inconsistentCjsInterop: true temporarily.
• When migrating from Webpack, replace webpack.config.js with vite.config.ts, swap loaders for Vite plugins, and update REACT_APP_* env vars to VITE_*. Create React App is no longer maintained, so this is the usual path off it.
• When integrating testing, use Vitest, which shares the Vite config (recent Vitest versions need Node 22.12+).

A typical dev setup with an alias and an API proxy: