← Back to React Course | Chapter 1: Environment Setup & Tooling | Lesson 5 of 10

Creating an App with Vite

Vite is a faster, lighter machine for building React projects, like a modern power tool replacing an older one.

In this page:

  1. Why Vite Is Popular
  2. Vite's Project Structure
  3. Running and Building with Vite
Syntax
markup 
npm create vite@latest app-name -- --template react
cd app-name
npm install
npm run dev

Why Vite Is Popular

Vite is a build tool that starts a dev server almost instantly and updates the browser in milliseconds when you save a file, because it serves your source files directly over native ES modules instead of bundling everything up front the way older tools do.

Note: Run npm create vite@latest my-app -- --template react to scaffold a new Vite + React project.
Warning: Vite's instant dev-server startup doesn't mean the production build skips bundling -- npm run build still bundles everything for real users.

Example: Why Vite Is Popular

bash 
$ npm create vite@latest my-app -- --template react
$ npm run dev
  ready in 180ms

⚠️ Run this in your own terminal or Node.js environment.

Vite's Project Structure

A Vite + React project has an index.html at the project root (not inside public/, unlike CRA), a src/ folder with main.jsx as the entry point, and a vite.config.js file for build settings.

Note: main.jsx is where ReactDOM.createRoot renders your App component, mirroring CRA's index.js.
Warning: Vite's index.html living at the project root (not inside src/ or public/) surprises developers coming from Create React App.

Example: Vite's Project Structure

bash 
$ ls -R my-app
my-app:
index.html  node_modules  package.json  public  src  vite.config.js

my-app/public:
vite.svg

my-app/src:
App.css  App.jsx  assets  index.css  main.jsx

⚠️ Run this in your own terminal or Node.js environment.

Running and Building with Vite

npm run dev starts Vite's development server; npm run build creates an optimized production bundle in a dist/ folder, ready to deploy.

Note: Preview a production build locally with npm run preview before deploying, to catch build-specific issues early.
Warning: Deploying the src/ folder directly instead of the built dist/ folder will not work -- browsers need the compiled output.

Example: Running and Building with Vite

bash 
npm run dev    # local dev server
npm run build  # bundles into dist/

⚠️ Run this in your own terminal or Node.js environment.

Related Topics

Creating an App with Create React App · Creating a Production Build · React Project Folder Structure · npm vs yarn vs pnpm

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to select the React template when running npm create vite@latest.
  2. Expecting the exact same file structure as Create React App -- Vite's defaults differ slightly.
  3. Not running npm install before npm run dev after cloning a Vite project.
Chapter Summary
  • Vite is a fast, modern build tool that's now the recommended way to start a React project.
  • It uses native ES modules during development for near-instant server start and hot reload.
  • npm create vite@latest scaffolds a new project with a template picker.
  • npm run dev starts the dev server; npm run build creates the production bundle.
Browser Support

The generated app supports all modern evergreen browsers; Vite's dev server itself relies on native ES module support in the browser during development only.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson Creating an App with Create React App Next Lesson → React Project Folder Structure

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.