Setting Up Modern React with Vite0%
React Project Directory Structure and Entry Points

Setting Up Modern React with Vite

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Setting Up Modern React with Vite

1. Why Vite Replaced Create React App

For many years, create-react-app (CRA) was the standard boilerplate tool for bootstrapping React projects. CRA relied internally on Webpack, which bundled every JavaScript file, CSS file, and third-party dependency into a single massive memory bundle before starting the local development server. As applications expanded, cold-start build times stretched into minutes, and Hot Module Replacement (HMR) experienced noticeable lag.

Vite (pronounced veet, French for "quick") fundamentally redefined front-end build tooling by capitalizing on modern browser capabilities and native ES Modules (ESM):

  • Instant Cold Server Start: Vite does not bundle source code upfront during development. Instead, it serves source code over native ESM, allowing the browser to load individual modules on demand as requested.
  • Lightning-Fast HMR: Utilizing esbuild (written in Go), Vite pre-bundles external dependencies 10 to 100 times faster than JavaScript-based bundlers. Changes to components update almost instantaneously in the browser without losing component state.
  • Optimized Production Bundles: When deploying to production, Vite employs Rollup under the hood to output highly optimized, tree-shaken, and chunk-split static assets.
Output
Webpack / CRA Dev Server:
[Entry] ──> [Bundle 500+ modules into memory] ──> [Server Ready (Slow)]
 
Vite Dev Server:
[Start Server Instantly] ──> [Browser requests App.jsx via ESM] ──> [Transform App.jsx on demand]

2. Prerequisites and Environment Verification

Before bootstrapping a modern React application, ensure you have the active Long-Term Support (LTS) release of Node.js installed on your workstation.

Bash / Terminal
# Verify Node.js version (Node 18.x or 20.x+ recommended)
node -v
# Example output: v20.14.0
 
# Verify npm (Node Package Manager)
npm -v
# Example output: 10.7.0

3. Scaffolding a New React Project

Execute the npm create vite@latest CLI command in your terminal. You can configure project parameters interactively or pass flags directly:

Bash / Terminal
# Initialize project using the React template
npm create vite@latest msk-react-starter -- --template react
 
# Navigate into the project root directory
cd msk-react-starter
 
# Install project dependencies listed in package.json
npm install
 
# Launch the local development server
npm run dev

The terminal will output the local network URL (typically http://localhost:5173). Opening this link in any modern browser displays your active Vite + React environment with live Hot Module Replacement enabled.

4. Understanding the Core Configuration Files

package.json

Specifies your application scripts, development tools, and production dependencies:

JSON
{
"name": "msk-react-starter",
"private": true,
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.3.0",
"vite": "^5.3.0"
}
}

vite.config.js

The central build configuration file where official plugins such as @vitejs/plugin-react are registered:

JavaScript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
open: true
}
});
Interactive Quiz

Practice Quiz

Question 1
What major development feature allows Vite to start local development servers almost instantaneously?
Question 2
Which underlying tool does Vite use for high-speed dependency pre-bundling during development?
Question 3
What terminal command is used to launch the Vite local development server?
Question 4
By default, what port does the Vite development server bind to?
Question 5
Which file contains the list of installed packages, scripts, and project metadata in a React application?
Next Lesson

React Project Directory Structure and Entry Points

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Why React and Single-Page ArchitectureReact Project Directory Structure and Entry Points

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext