Skip to main content

Vite

What is Vite​

Vite is a build tool and development server for modern web projects. It is MIT licensed and currently at version 8.x. With ~64.2M weekly npm downloads and ~79.1k GitHub stars, it is the de facto standard build tool for new frontend projects, replacing webpack and the deprecated Create React App.

Why we recommend it​

  • Instant dev server — ESM-based dev server starts in milliseconds regardless of project size. No bundling during development.
  • Lightning-fast HMR — hot module replacement reflects changes instantly, keeping the developer feedback loop tight.
  • Rolldown bundler — Vite 8 uses Rolldown (Rust-based), unifying development and production into a single bundler with significant speed improvements.
  • First-class framework support — official plugins for React, TypeScript, and Tailwind CSS. Configuration is minimal — most projects need only a few lines in vite.config.ts.
  • Rollup-compatible plugin API — large ecosystem of existing Rollup plugins works out of the box, plus Vite-specific plugins for framework integrations.

When to use​

  • New React SPAs (replaces deprecated Create React App)
  • Any frontend project using React, TypeScript, or Tailwind CSS
  • Library development — Vite's library mode produces ESM and CJS bundles with minimal config
  • Projects where fast iteration speed is a priority

When NOT to use​

  • Projects already on a stable webpack/Next.js setup — don't migrate for the sake of it
  • Full-stack React apps needing SSR, file-system routing, and API routes — use Next.js or Astro instead
  • Content-focused sites (blogs, marketing sites) — consider Astro, which uses Vite under the hood
caution

Vite 8 requires Node.js ≥ 20.19 or ≥ 22.12. Check your CI and production environment before upgrading.

Environment variables​

Vite has built-in environment variable support — no additional packages needed. Variables are loaded from .env files in the project root and exposed to browser code via import.meta.env, but only if prefixed with VITE_. Unprefixed variables are available server-side during the build process but are not injected into the browser bundle.

src/config.ts
// ✅ Available in the browser (VITE_ prefix)
const apiBase = import.meta.env.VITE_API_BASE_URL;

// ❌ Undefined in the browser (no VITE_ prefix)
const secret = import.meta.env.API_SECRET;

For the full picture — .env file naming conventions, mode-based loading order, TypeScript types, and secrets management — see Environment Variables.

Resources​