Vite for React SPA

🔥 Why Vite is Great for SPA React Projects

1. Blazing Fast Dev Experience

• ESM-based Hot Module Replacement (HMR): Vite uses native ES Modules, so dev server startup is instant, and code changes reflect nearly instantly.
• Unlike older tools like Create React App (CRA), Vite doesn't bundle everything upfront—only what’s needed.

2. Minimal Config, Extensible When Needed

• Out of the box: ✅ JSX support, ✅ TypeScript, ✅ CSS Modules/PostCSS, ✅ Environment variables.
• Need more? It uses Rollup under the hood for production, so you can customize or add plugins easily.

3. First-Class TypeScript + React Support

npm create vite@latest my-app --template react-ts

It scaffolds a clean project in seconds. You’re ready to go with full TypeScript and React setup.

4. Lightweight & SPA-Ready

• Vite is perfect for SPAs because:

  • It supports React Router easily.
  • You don’t get the overhead of a backend framework like Next.js or Remix.
  • You can control routing and deployment exactly how you want (e.g., with static hosting on Vercel, Netlify, etc.).

5. Built-in Features

• Code splitting
• Tree shaking
• Built-in dev server
• Easy static asset handling

---

⚖️ When to Choose Vite Over Next.js or CRA

Use Case	Choose Vite
Pure SPA (no SSR or API layer)	✅ Best Choice
Want fast startup & dev speed	✅ Ideal
Full control over routing/build	✅ Preferable
Don’t need server-side rendering	✅ Good fit
Need backend/API integration	❌ Consider NestJS + Vite or Next.js

If you want a frontend-only app that fetches from APIs (like a NestJS backend), Vite is excellent.

---

💡 Example: Create Vite + React + TypeScript Project

npm create vite@latest my-app --template react-ts
cd my-app
npm install
npm run dev

📁 Folder Structure Preview

my-app/
├─ src/
│  ├─ App.tsx
│  ├─ main.tsx
│  └─ assets/
├─ public/
├─ index.html
├─ vite.config.ts

---

🧠 Best Practices with Vite in SPA

• Use React Router DOM for client-side routing.
• Use .env files for API keys, base URLs.
• Keep Vite’s config minimal unless you need advanced Rollup behavior.
• For production: run vite build and deploy the dist folder to static hosting.

---

⚠️ When Vite isn't Ideal

If you need:

• SSR (Server-side rendering) → Use Next.js
• Incremental static regeneration (ISR) or hybrid SSR → Use Next.js
• Backend + frontend in one → Use NestJS + Vite with Vite as frontend

---

✅ Verdict

Yes, Vite is arguably the best option today for building a modern, fast, and clean React SPA if:

• You don’t need SSR.
• You want fast builds and DX.
• You’re building a frontend-only client (e.g., talking to a NestJS API).

---

vite.config.ts for a React SPA using Vite that proxies API requests to a NestJS backend (which might run at http://localhost:3000).

---

🛠 Vite Proxy Config for NestJS Backend

✅ Goals:

• Vite runs on http://localhost:5173
• NestJS runs on http://localhost:3000
• All requests to /api are proxied to NestJS
• Avoid CORS issues in development

---

📄 vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173, // Frontend port
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // NestJS backend
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
})

---

📁 Frontend Call Example (e.g., using Axios or Fetch)

// This call from React (port 5173) will be proxied to NestJS (port 3000)
fetch('/api/users')
  .then(res => res.json())
  .then(data => console.log(data))

Behind the scenes:
/api/users → proxied to → http://localhost:3000/users

---

💡 Bonus: Handling Environment Variables

Add a .env file at the root of your Vite project:

VITE_API_BASE_URL=/api

Then in your code:

const apiUrl = import.meta.env.VITE_API_BASE_URL;
fetch(`${apiUrl}/users`);

---

🔒 Don't forget for Production

In production:

• You need to handle the /api routing via reverse proxy (e.g., Nginx, Vercel rewrites, or within your backend).
• Or configure your frontend to use the full backend URL directly if they're deployed separately.

---

The full NestJS + Vite Docker dev setup as well:

---

complete Docker-based development setup for a fullstack Vite (React) + NestJS app. This includes:

• ✅ Yarn workspaces or separate folders
• ✅ Live reload in both apps
• ✅ Vite proxy to NestJS for /api
• ✅ Docker + docker-compose dev setup

---

🏗️ Folder Structure (Monorepo or Parallel)

You can go with one of the following:

Option A – Monorepo-style:

fullstack-app/
├── client/       # Vite + React
├── server/       # NestJS
├── docker-compose.yml
└── README.md

---

1️⃣ Vite (React) Frontend Setup

client/vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    host: true, // Allow Docker access
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://server:3000', // use Docker service name
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
})

client/package.json

{
  "name": "client",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^5.0.0"
  }
}

---

2️⃣ NestJS Backend Setup

server/main.ts

import { NestFactory } from '@nestjs/core'
import { AppModule } from './app.module'

async function bootstrap() {
  const app = await NestFactory.create(AppModule)
  app.setGlobalPrefix('api') // Base path for APIs
  await app.listen(3000, '0.0.0.0')
}
bootstrap()

server/package.json

{
  "name": "server",
  "version": "1.0.0",
  "scripts": {
    "start:dev": "nest start --watch"
  },
  "dependencies": {
    "@nestjs/common": "^10.0.0",
    "@nestjs/core": "^10.0.0",
    "@nestjs/platform-express": "^10.0.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.8.1"
  },
  "devDependencies": {
    "@nestjs/cli": "^10.0.0",
    "@nestjs/schematics": "^10.0.0",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.0"
  }
}

---

3️⃣ Docker Setup

client/Dockerfile

# --- React Dev ---
FROM node:18-alpine
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY . .
EXPOSE 5173
CMD ["yarn", "dev"]

server/Dockerfile

# --- NestJS Dev ---
FROM node:18-alpine
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY . .
EXPOSE 3000
CMD ["yarn", "start:dev"]

Root docker-compose.yml

version: '3.8'

services:
  client:
    build:
      context: ./client
    ports:
      - "5173:5173"
    volumes:
      - ./client:/app
      - /app/node_modules
    depends_on:
      - server

  server:
    build:
      context: ./server
    ports:
      - "3000:3000"
    volumes:
      - ./server:/app
      - /app/node_modules
    command: yarn start:dev

---

✅ Usage

🔧 1. Start the Dev Stack

docker-compose up --build

• Frontend: http://localhost:5173
• Backend: http://localhost:3000/api

⚙️ 2. Make a test route in NestJS

server/src/app.controller.ts

@Get('hello')
getHello(): string {
  return 'Hello from NestJS';
}

Then test in your React app:

useEffect(() => {
  fetch('/api/hello')
    .then(res => res.text())
    .then(console.log)
}, []);

---

📦 Optional: Add MongoDB to Compose

Want to persist data? Add this to docker-compose.yml:

  mongo:
    image: mongo:6
    ports:
      - "27017:27017"
    volumes:
      - mongo-data:/data/db

volumes:
  mongo-data:

Then in NestJS, connect to mongodb://mongo:27017.

---

🧠 Recap

Layer	Tool	Purpose
Frontend	Vite	Fast React SPA
Backend	NestJS	Modular API w/ TypeScript
Proxy	Vite Dev	/api → NestJS
Runtime	Docker	Isolated Dev Envs