MERN Deployment Architecture Overview

Deploying a MERN application means taking three separate concerns — the database, the API server, and the React frontend — and hosting each in the right environment for its purpose. MongoDB runs best on a managed cloud service (Atlas) that handles replication, backups, and scaling. The Express API runs on a Node.js host (Render, Railway, or a VPS) that can execute server code. The React build output is static HTML, CSS, and JavaScript that can be served from a global CDN (Netlify, Vercel, or Cloudflare Pages) at essentially zero cost and with near-instant load times worldwide. Understanding this architecture — and how the three pieces communicate through environment variables and CORS — is the foundation for everything in this chapter.

Production Architecture Overview #

┌──────────────────────────────────────────────────────────────────────┐
│                         MERN Blog Production                         │
│                                                                      │
│  Browser                                                             │
│    │                                                                 │
│    ├──→ https://mernblog.netlify.app  (React SPA)                   │
│    │       Netlify CDN · Vite build output · _redirects fallback     │
│    │                                                                 │
│    └──→ https://api.mernblog.onrender.com  (Express API)            │
│            Render Node.js service · PORT=10000                       │
│            MONGODB_URI → MongoDB Atlas cluster                       │
│            JWT_SECRET, CLOUDINARY_*, EMAIL_*, ...                    │
│                                                                      │
│  MongoDB Atlas (M0 free tier)                                        │
│    · mernblog.cluster0.mongodb.net                                   │
│    · Network access: Render service IP + your dev IP                 │
│    · Database user: mernblog-prod (strong password)                  │
│    · Automated backups enabled                                       │
│                                                                      │
│  Cloudinary CDN  (images, avatars, cover photos)                     │
│  Resend / SendGrid  (transactional email)                            │
└──────────────────────────────────────────────────────────────────────┘

Environment Variables by Layer #

Production CORS Configuration #

// server/index.js — production-ready CORS
const corsOptions = {
  origin: (origin, callback) => {
    const allowed = [
      process.env.CLIENT_URL,      // https://mernblog.netlify.app
      'http://localhost:5173',     // local dev (optional — remove in strict prod)
    ].filter(Boolean);

    // Allow requests with no origin (Postman, server-to-server)
    if (!origin || allowed.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error(`CORS: ${origin} not allowed`));
    }
  },
  credentials:    true,
  methods:        ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
};

app.use(cors(corsOptions));
app.options('*', cors(corsOptions)); // preflight for all routes

Production vs Development Differences #

Common Mistakes #

Mistake 1 — Hardcoding the API URL in React #

❌ Wrong — URL hardcoded, breaks in production:

const api = axios.create({ baseURL: 'http://localhost:5000/api' }); // breaks in prod!

✅ Correct — use Vite environment variable:

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:5000/api',
}); // ✓ different per environment

Mistake 2 — Forgetting to set NODE_ENV=production #

❌ Wrong — NODE_ENV undefined → Express shows full error stack traces to users, uses dev email transporter.

✅ Correct — set NODE_ENV=production in the Render environment variables. This enables error message sanitisation, production email transport, and performance optimisations in Express and other libraries.

Mistake 3 — Not adding a health check endpoint #

❌ Wrong — hosting platforms cannot verify the API is running:

// No health endpoint — Render uses root / which may redirect or return HTML

✅ Correct — add a simple health check route:

app.get('/api/health', (req, res) => res.json({ status: 'ok', env: process.env.NODE_ENV }));
// Render health check URL: https://api.mernblog.onrender.com/api/health ✓

Quick Reference — Hosting Platforms #