Topic 3 of 54
Scaffolding with Vite
Overview
For years, 'Create React App' (CRA) was the standard way to start a React project. However, CRA is now incredibly slow and outdated. Vite (French for 'fast') is the modern, lightning-fast build tool that has become the industry standard for scaffolding Single Page Applications (SPAs). It uses native ES modules to start the dev server instantly, regardless of how large your app gets.
Syntax
The command scaffolds a barebones React app using the Vite bundler. It gives you a clean starting point with Hot Module Replacement (HMR) out of the box.
Creating a Vite + React Project
bash
# Run this command in your terminal
npm create vite@latest my-react-app -- --template react
# Navigate into the folder
cd my-react-app
# Install dependencies
npm install
# Start the blazing fast dev server
npm run devCommon Pitfalls
- Still using 'npx create-react-app'. The React documentation itself no longer recommends it.
- Putting sensitive API keys inside the frontend code. Vite uses the 'VITE_' prefix for environment variables, but they are still visible in the browser.
Interview Tips
- If an interviewer asks how you start a new React project, mentioning Vite instead of Create React App shows you are up-to-date with modern frontend tooling.
Real-World Example
The basic folder structure provided by Vite is clean and minimal, preparing you for production.
example
bash
my-react-app/
├── node_modules/ # Dependencies
├── public/ # Static assets (images, favicon)
├── src/ # Your React code
│ ├── assets/ # CSS and images
│ ├── App.jsx # Root component
│ └── main.jsx # Entry point where React mounts to the DOM
├── index.html # The single HTML file
├── package.json # Project metadata & scripts
└── vite.config.js # Vite configuration