Creating an App with Vite
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
$ npm create vite@latest my-app -- --template react
$ npm run dev
ready in 180ms⚠️ Run this command in your terminal.
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
$ 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 command in your terminal.
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
npm run dev # local dev server
npm run build # bundles into dist/⚠️ Run this command in your terminal.
- Forgetting to select the React template when running
npm create vite@latest. - Expecting the exact same file structure as Create React App -- Vite's defaults differ slightly.
- Not running
npm installbeforenpm run devafter cloning a Vite project.
- 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@latestscaffolds a new project with a template picker.npm run devstarts the dev server;npm run buildcreates the production bundle.
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: