Vite Guide — Next-Generation Frontend Build Tool

Vite is a modern frontend build tool that uses native ES modules during development for instant server starts and Rollup for optimized production builds — replacing slower tools like Webpack and CRA.

What You’ll Learn

• How Vite’s dev server achieves instant Hot Module Replacement
• Configuring Vite for TypeScript, React, Vue, and Svelte
• Optimizing production builds with code splitting and tree shaking
• Using Vite plugins to extend functionality
• Managing environment variables across development and production

Why Vite Matters

Webpack and Create React App start development servers in 30-60 seconds and take seconds to reflect small changes. Vite starts in under a second and updates changed modules instantly — regardless of project size. It does this by serving native ES modules in development (no bundling needed) and using Rollup for optimized production builds. Doda Browser’s extension development team switched to Vite because the instant feedback loop makes UI tweaks go from code to browser in milliseconds instead of waiting for Webpack rebuilds.

    flowchart LR
    A[JavaScript & TypeScript Basics] --> B[Vite]
    B --> C[Dev Server]
    B --> D[Build]
    B --> E[Plugins]
    C --> F[Native ES Modules]
    D --> G[Rollup Optimization]
    E --> H[Framework Support]
    style B fill:#646cff,color:#fff
  

Core Concepts

Instant Dev Server

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

# Output:
#   VITE v5.0.0  ready in 185ms
#   ➜  Local:   http://localhost:5173/

Output: The dev server starts in ~200ms regardless of project size. Vite doesn’t bundle anything — it serves your source files as native ES modules. When you change a file, Vite sends only that module to the browser via WebSocket. No full rebuild, no page reload.

Hot Module Replacement (HMR)

// In development, Vite's HMR updates modules without reloading
export function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

Output: When you edit the Counter component, only that component updates in the browser — the count state is preserved. Vite uses React Fast Refresh under the hood for React components.

Configuration (vite.config.ts)

// vite.config.ts
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:8080",
        changeOrigin: true,
      },
    },
  },
  build: {
    outDir: "dist",
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],
          ui: ["antd", "@ant-design/icons"],
        },
      },
    },
  },
});

Output: The config enables the React plugin, sets up a @ path alias, proxies /api requests to a backend, and splits vendor libraries into separate chunks for better caching.

TypeScript Support

# Vite supports TypeScript out of the box
npm create vite@latest my-app -- --template vue-ts

# TypeScript is transpiled by esbuild (fast!) during dev
# Type checking is handled by your IDE or a separate tsc command

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Environment Variables

// .env — loaded in all cases
VITE_APP_TITLE=DodaBrowser UI

// .env.local — loaded in all cases, gitignored
VITE_API_URL=http://localhost:8080

// .env.production — loaded only in production
VITE_API_URL=https://api.example.com

// In your code
console.log(import.meta.env.VITE_APP_TITLE);
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE);     // "development" or "production"
console.log(import.meta.env.DEV);      // true in dev, false in prod
console.log(import.meta.env.PROD);     // false in dev, true in prod

Output: Only variables prefixed with VITE_ are exposed to client code. This prevents accidentally leaking secrets. Access them via import.meta.env.VARIABLE_NAME.

Production Build

npm run build

# Output:
# vite v5.0.0 building for production...
# ✓ 42 modules transformed.
# dist/index.html          0.45 kB
# dist/assets/index-D7cfb3b6.js   142.30 kB / gzip: 48.22 kB
# dist/assets/vendor-De3f9c0a.js  42.15 kB / gzip: 15.10 kB

Output: Vite uses Rollup for production builds with automatic code splitting, CSS minification, and asset hashing. The output is ready to deploy to any static host.

Common Mistakes

1. Storing secrets in VITE_ variables: Everything prefixed with VITE_ is public. Never store API keys, database URLs, or passwords in Vite environment variables.

2. Running tsc alongside Vite’s build: Vite uses esbuild for transpilation but doesn’t type-check. Run tsc --noEmit separately in CI if you need type checking.

3. Not configuring the proxy for API calls: Without the server.proxy config, your dev frontend tries to make API calls to localhost:5173 instead of your backend. Proxy passes them through.

4. Using Webpack loaders or plugins with Vite: Vite uses Rollup plugins, not Webpack loaders. Check the Vite plugin catalog before trying to use a Webpack plugin.

5. Expecting CommonJS compatibility in dev mode: Vite serves ES modules. Libraries that only export CommonJS may need to be converted or used with optimizeDeps.include.

Practice Questions

1. How does Vite achieve instant dev server startup? Answer: Vite serves files as native ES modules without bundling during development. The browser imports modules directly, so startup is O(1) regardless of project size.

2. What’s the difference between Vite’s dev and build commands? Answer: vite (dev) serves unbundled ES modules with HMR. vite build uses Rollup to create optimized, production-ready bundles with code splitting and minification.

3. Why are environment variables prefixed with VITE_? Answer: The prefix prevents accidental exposure of sensitive variables. Only variables starting with VITE_ are accessible in client code via import.meta.env.

4. How do you add TypeScript support to a Vite project? Answer: TypeScript works out of the box. Just create a .ts or .tsx file. Use the --template react-ts or --template vue-ts scaffold to get started.

Challenge

Build and optimize a dashboard: create a Vite project with React and TypeScript, configure path aliases, set up an API proxy to a mock backend, split vendor chunks in the build config, deploy the production output to Netlify, and verify that the vendor chunk is cached separately from your app code.

FAQ

Try It Yourself

npm create vite@latest vite-demo -- --template react-ts
cd vite-demo
npm install
npm run dev

Open http://localhost:5173, edit src/App.tsx, and watch the instant HMR update. Check the Network tab — you’ll see individual module requests, not a single bundle.

What’s Next

Related topics: JavaScript, TypeScript, React, Vue, Node.js

What’s Next

Congratulations on completing this Vite tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.