Vite Build Tool Guide — Fast Frontend Development with HMR

What Is Vite?

Vite (French for "fast") is a frontend build tool created by Evan You (creator of Vue.js). It leverages native ES modules in the browser during development, serving files on demand rather than bundling everything upfront. This makes the dev server start near-instantly regardless of project size.

For production builds, Vite uses Rollup under the hood, producing optimized static assets with tree-shaking, code splitting, and CSS extraction.

Why Vite Over Webpack or CRA?

• Instant cold start — Vite serves source files as native ESM, so it only transforms files when the browser requests them. Webpack bundles everything first.
• Lightning-fast HMR — Hot Module Replacement only invalidates the changed module, not the full bundle chain.
• Zero config for React/Vue/Svelte — First-class plugin support for all major frameworks.
• Smaller config surface — Most common needs work out of the box; the config file is typically under 20 lines.

Getting Started

# Create a new React + Vite project
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

The dev server starts at http://localhost:5173. Changes to source files reflect in the browser in under 50ms.

vite.config.ts Essentials

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
})

Environment Variables

Vite uses .env files with a VITE_ prefix for variables exposed to the client:

# .env.local
VITE_API_URL=http://localhost:8000
VITE_APP_NAME=MyApp

// In your components
const apiUrl = import.meta.env.VITE_API_URL
const isDev = import.meta.env.DEV

Variables without the VITE_ prefix are server-side only and never bundled into client code.

Migrating from Create React App

1. Replace react-scripts with vite and @vitejs/plugin-react in package.json
2. Add vite.config.ts with the React plugin
3. Move public/index.html to project root and replace %PUBLIC_URL% references
4. Add <script type="module" src="/src/main.tsx"></script> to index.html
5. Replace process.env.REACT_APP_* with import.meta.env.VITE_*

Frequently Asked Questions

Does Vite work with TypeScript?

Yes. Vite transpiles TypeScript using esbuild (extremely fast), but does not type-check. Run tsc --noEmit separately or use the vite-plugin-checker plugin for in-browser type errors.

How do I analyze bundle size?

Install rollup-plugin-visualizer and add it to your plugins array. It generates an interactive HTML report of your bundle composition after npm run build.

Can I use Vite for a library?

Yes. Set build.lib in your config to output both ESM and CJS formats, ideal for publishing to npm.