Deploy Your MERN Stack App to Vercel or Render (2025 Step-by-Step Guide)

You've built your MERN app locally — now it’s time to go live. In 2025, platforms like Vercel and Render make deploying full-stack apps easier than ever.

This guide walks you through deploying a MERN app (MongoDB, Express, React, Node) to Vercel or Render, step-by-step.

---

🚀 Deployment Options at a Glance

---

📂 Folder Structure

mern-app/
├── client/        # React frontend
├── server/        # Express backend
├── .env
├── README.md

💡 Make sure your frontend and backend are clearly separated for Render, or merge them into one for Vercel.

---

🔧 Preparing for Deploy

1. Push your code to GitHub

2. Create a .env file with:

   • MONGO_URI
   • JWT_SECRET
   • PORT=5000

3. Add start script in server/package.json:

"scripts": {
  "start": "node index.js"
}

1. Optional (for combined deploy):
   In client/package.json, add:

"proxy": "http://localhost:5000"

---

🌐 Deploy to Render (Recommended for Full-Stack)

1. Go to https://render.com
2. Create Web Service
3. Connect GitHub repo
4. Set root directory to server/
5. Add environment variables (MONGO_URI, etc.)
6. Choose Node version + region
7. Click Deploy

✅ React frontend can be deployed separately via Static Site on Render or Netlify.

---

⚡ Deploy to Vercel (Recommended for Frontend)

1. Go to https://vercel.com
2. Connect GitHub repo
3. Set root to client/
4. Add .env vars if needed (Vercel → Project Settings)
5. Click Deploy

🔁 For backend, use Render, Railway, or Vercel’s Serverless API routes.

---

🧠 Tips for Clean Deployment

• Don’t commit your .env file
• Use .env.production for live secrets
• Add CORS setup in Express:

const cors = require("cors");
app.use(cors({ origin: "https://yourfrontend.vercel.app" }));

---

✅ Summary

Your MERN app is ready to go global. Choose the right platform, link your repo, and go live in minutes — not days.

---

Published on: 2025-06-18