Why Choose Vite?

Aside from the fact that create react app is dead, Vite (French for “quick”) is a modern build tool that offers significant improvements over traditional bundlers like webpack and Create React App for frontend development:

  • Lightning-fast server start with native ES modules
  • Hot Module Replacement (HMR) that feels truly instant
  • Optimized builds using pre-configured Rollup
  • Less configuration compared to webpack-based setups
  • TypeScript support available out of the box

Prerequisites

  • As of May 4th 2025, Vite requires Node.js version 18+ or 20+. However, some templates require a higher Node.js version to work.

Installing Vite and Creating a Vite React Application

  1. Open a terminal and navigate to a host directory

    npm install -D vite

    Or install Vite globally (optional but recommended):

    npm install -g create-vite

  2. Create a new Vite project:

    npm create vite@latest my-vite-app
  3. Choose a template when prompted (e.g., react, react-ts, etc.)
  4. Navigate to your new project: 
    cd my-vite-app
  5. Install dependencies: 
    npm install
  6. Start the development server: 
    npm run dev

Example of Creating a Vite React Application

npm create vite@latest my-vite-app
Need to install the following packages:
create-vite@6.4.1
Ok to proceed? (y) y


> npx
> create-vite my-vite-app

│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript
│
◇  Scaffolding project in /Users/william/Projects/react/my-vite-app...
│
└  Done. Now run:

  cd my-vite-app
  npm install
  npm run dev

Project Structure

  • src/: Contains React source code
  • public/: Static assets that will be served as-is
  • vite.config.js: Vite configuration
  • package.json: Project dependencies and scripts
  • index.html: Root HTML file (note: in the project root, not in public/)