How to Deploy a MERN/PERN App for Free (Step-by-Step, 2026)

You've built your first full-stack app. Now what? This guide walks you through deploying a MERN or PERN stack application completely free — perfect for your resume and portfolio. </p>

Why deployment matters

Building an app on your local machine is great, but recruiters want to see it live. A deployed project proves you understand the full development lifecycle, not just writing code. Plus, free tiers from modern platforms make this easier than ever.

What you'll deploy

• **Frontend**: React (built with Vite or Create React App)
• **Backend**: Node.js + Express REST API
• **Database**: PostgreSQL (PERN) or MongoDB (MERN)

We'll use Vercel for the frontend, Render for the backend, and Neon (PERN) or MongoDB Atlas (MERN) for the database — all on free tiers.

Prerequisites

Before you start:

• Your app code in a GitHub repository
• Node.js installed locally
• A working app on `localhost`

Step 1: Deploy your database

For PERN (PostgreSQL)

Using Neon (recommended for students):

1. Go to [neon.tech](https://neon.tech) and sign up with GitHub 2. Create a new project (choose the closest region) 3. Copy your connection string — it looks like:

postgresql://user:password@ep-xyz.us-east-2.aws.neon.tech/neondb?sslmode=require

4. Run your database migrations:

DATABASE_URL="your-neon-connection-string" npm run migrate

Alternative: Supabase also offers a generous free tier with a Postgres database.

For MERN (MongoDB)

Using MongoDB Atlas:

1. Sign up at [mongodb.com/cloud/atlas](https://www.mongodb.com/cloud/atlas) 2. Create a free M0 cluster (512 MB storage) 3. Whitelist `0.0.0.0/0` in Network Access (allow all IPs) 4. Create a database user and copy your connection string:

mongodb+srv://user:password@cluster0.xxxxx.mongodb.net/mydb?retryWrites=true&w=majority

Keep this connection string safe — you'll need it for your backend.

Step 2: Deploy your backend (Node + Express)

Using Render:

1. Sign up at [render.com](https://render.com) with GitHub

2. Click New → Web Service

3. Connect your GitHub repo 4. Configure:

• **Name**: `my-app-backend` (or your project name)
• **Environment**: Node
• **Build Command**: `npm install` or `npm ci`
• **Start Command**: `npm start` or `node server.js`
• **Plan**: Free

5. Add environment variables:

• `DATABASE_URL`: your Neon or MongoDB connection string
• `NODE_ENV`: `production`
• `PORT`: `10000` (Render assigns this automatically)
• `JWT_SECRET`: generate a random string (use `openssl rand -base64 32`)

6. Click Create Web Service

Render will build and deploy your backend. You'll get a URL like:

https://my-app-backend.onrender.com

Important: Understanding the PORT variable

Your Express server must listen on `process.env.PORT`:

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Render (and most hosting platforms) assign the port dynamically — never hardcode port 5000 in production.

Free tier cold starts

Render's free tier spins down your backend after 15 minutes of inactivity. The first request after a cold start takes 30–60 seconds. This is normal and acceptable for portfolio projects. Just mention it in your README or during interviews.

Step 3: Deploy your frontend (React)

Using Vercel:

1. Sign up at [vercel.com](https://vercel.com) with GitHub

2. Click Add New → Project

3. Import your GitHub repository

4. Vercel auto-detects Vite or CRA — just click Deploy

5. Add your backend API URL as an environment variable:

• Variable name: `VITE_API_URL` (for Vite) or `REACT_APP_API_URL` (for CRA)
• Value: `https://my-app-backend.onrender.com`

6. Redeploy after adding the env variable

Your frontend is live at:

https://my-app.vercel.app

Update your API calls

In your React code, use the environment variable:

const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000';

async function fetchJobs() {
  const response = await fetch(`${API_URL}/api/jobs`);
  return response.json();
}

Step 4: Fix CORS issues

Your backend needs to allow requests from your Vercel domain. Update your Express CORS config:

import cors from 'cors';

const allowedOrigins = [
  'http://localhost:5173',
  'http://localhost:3000',
  'https://my-app.vercel.app',
];

app.use(cors({
  origin: (origin, callback) => {
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  credentials: true,
}));

Push this change to GitHub — Render will auto-deploy.

Step 5: Test your deployed app

1. Open your Vercel URL in an incognito window (to avoid cached localhost data)

2. Test the main features:

• Page loads
• API requests work
• Database reads and writes succeed

3. Check browser DevTools (Network tab) for errors

Common issues and fixes

"Cannot connect to database"

• Double-check your `DATABASE_URL` environment variable
• For Neon/Supabase: ensure `?sslmode=require` is in the connection string
• For MongoDB Atlas: ensure IP `0.0.0.0/0` is whitelisted

"API request failed" / CORS error

• Verify your `VITE_API_URL` or `REACT_APP_API_URL` is correct
• Check backend CORS config includes your Vercel domain
• Make sure your backend is running (not cold-start sleeping)

"App works locally but not in production"

• Environment variables missing or incorrect
• Hardcoded `localhost` URLs in your frontend
• Database migrations not run on production DB

Add the live link to your resume

Now that your app is deployed:

1. Add both URLs to your GitHub README:

## Live Demo
- Frontend: https://my-app.vercel.app
- Backend API: https://my-app-backend.onrender.com

2. Include the live link on your resume under Projects:

Job Board Web App | React, Node.js, PostgreSQL
Live: my-app.vercel.app | GitHub: github.com/username/repo
- Built a full-stack job board with authentication, search, and filters
- Deployed frontend on Vercel, backend on Render, database on Neon

Recruiters want to click and see your work. A live link shows you can ship.

Next steps

• Add a custom domain (Vercel offers free `.vercel.app` subdomains)
• Set up CI/CD: auto-deploy on every push to `main`
• Monitor your app: Render provides basic logs
• Consider upgrading tiers when you're job-ready (removes cold starts)

Free tier limits (as of 2026)

• **Vercel**: 100 GB bandwidth/month, unlimited projects
• **Render**: 750 hours/month (enough for one app), 15-min cold start
• **Neon**: 0.5 GB storage, always free
• **MongoDB Atlas**: 512 MB storage, always free

These limits are more than enough for portfolio projects.

You've shipped your first full-stack app. That's a milestone. Most students stop at `localhost` — you're ahead.