Creating a React App with Vite

Every React application starts with a scaffold — a generated project with the correct build tooling, folder structure, and configuration already in place. In the MERN stack, Vite is the standard scaffolding tool for React. It creates a project with a development server that starts in milliseconds, hot module replacement that updates the browser instantly on every save, and a production build pipeline optimised for modern browsers. In this lesson you will scaffold the MERN Blog client, start the development server, and make your first code changes.

Why Vite, Not Create React App? #

Scaffolding the MERN Blog Client #

# Navigate to your monorepo root (mern-blog/)
cd mern-blog

# Scaffold the React client with Vite
npm create vite@latest client -- --template react

# Expected output:
# ✔ Project name: client
# ✔ Package name: client
# Scaffolding project in /mern-blog/client...
# Done.

# Install dependencies
cd client
npm install

# Install core packages for the MERN Blog client
npm install axios react-router-dom

# Start the development server
npm run dev

# Expected output:
# VITE v5.x.x  ready in 312 ms
# ➜  Local:   http://localhost:5173/
# ➜  Network: use --host to expose

What Gets Scaffolded #

client/
├── public/
│   └── vite.svg                 ← static assets served at /
├── src/
│   ├── assets/
│   │   └── react.svg            ← imported assets (processed by Vite)
│   ├── App.css                  ← styles for App component
│   ├── App.jsx                  ← root application component
│   ├── index.css                ← global styles
│   └── main.jsx                 ← entry point — mounts React into the DOM
├── index.html                   ← HTML shell — Vite injects the JS bundle here
├── vite.config.js               ← Vite configuration
└── package.json

Your First Code Change #

// src/App.jsx — replace the scaffolded content
function App() {
  return (
    <div className="app">
      <header>
        <h1>MERN Blog</h1>
        <nav>
          <a href="/">Home</a>
          <a href="/about">About</a>
        </nav>
      </header>
      <main>
        <p>Welcome to the MERN Blog. Posts will appear here.</p>
      </main>
    </div>
  );
}

export default App;

Save the file → Vite detects the change → HMR updates the browser instantly
No page reload required — the component updates in place within milliseconds

Configuring the Vite Proxy for the Express API #

// client/vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    proxy: {
      // Forward all /api requests to the Express server during development
      '/api': {
        target:      'http://localhost:5000',
        changeOrigin: true,
      },
    },
  },
});

// With this config:
// fetch('/api/posts') in React → forwarded to http://localhost:5000/api/posts
// No CORS issues in development — the proxy makes it same-origin
// In production: deploy React to a CDN and configure CORS on Express

npm Scripts in the React Project #

{
  "scripts": {
    "dev":     "vite",           // Start dev server at http://localhost:5173
    "build":   "vite build",     // Build for production → dist/ folder
    "preview": "vite preview",   // Preview the production build locally
    "lint":    "eslint . --ext js,jsx"
  }
}

Common Mistakes #

Mistake 1 — Running npm install in the wrong directory #

❌ Wrong — installing React packages in the server directory:

cd mern-blog/server
npm install axios react-router-dom  # wrong directory — installs in server/node_modules

✅ Correct — always cd into client/ before installing client packages:

cd mern-blog/client
npm install axios react-router-dom  # correct ✓

Mistake 2 — Using CRA instead of Vite for new projects #

❌ Wrong — starting with the deprecated Create React App:

npx create-react-app client  # deprecated — slow dev server, unmaintained

✅ Correct — always use Vite for new React projects:

npm create vite@latest client -- --template react  # ✓ fast, modern

Mistake 3 — Forgetting to configure the Vite proxy #

❌ Wrong — making API calls with the full URL in development:

fetch('http://localhost:5000/api/posts') // hardcoded dev URL — breaks in production

✅ Correct — use the Vite proxy and relative URLs:

fetch('/api/posts') // relative URL → proxied to Express in dev, direct in production ✓

Quick Reference #