If you have created an awesome web app using MERN Stack, then your next step is to let the world see it — which means Deployment. However, the deployment process might be a bit confusing, especially when you are handling both the front end and back end separately.
In this Blog, we will learn how to deploy MERN Stack apps using Vercel for frontend React and Render for backend Node/Express. So let’s begin the process step-by-step.
Why Deployment is crucial for Developers?
If you create and store your project in the local environment, then it is limited to your system only. The main goal of deployment is to make your project publically accessible which means anyone using the internet can access it.
Here are a few main reasons for deployment:
- To create a Portfolio.
- Provide demo to Client
- To test it for Real-world use.
- To add and showcase them in your Resume/CV.
Deployment is the final and crucial step in your development cycle. Now let’s move on to some tools and learn how to deploy MERN Stack apps efficiently.
Overview: How to Deploy MERN Stack Apps Using Vercel and Render
Both Vercel and Render are modern cloud platforms which makes deploying web apps very easy for developers.
| Feature | Vercel (Frontend) | Render (Backend) |
|---|---|---|
| Best For | React Frontend | Node.js/Express Backend |
| Free Plan | Yes | Yes |
| Auto Deployment | Yes (Git se) | Yes (Git se) |
| Easy Setup | Very Easy | Thoda technical |
| CI/CD | Integrated | Integrated |
Versel is best for static or client-side rendered React Apps whereas Render is perfect for dynamic server-side code like Node.js APIs.
Preparing the MERN Project for Deployment
We have to properly structure a few things before deployment:
1. Frontend Folder: React app should be stored in the client/ folder and make sure “homepage” is set in package.json.
"homepage": "https://your-frontend-url.vercel.app"2. Backend Folder:Node.js app should be in the server/ folder and make sure the start script is properly defined in package.json.
"scripts": {
"start": "node index.js"
}3. .gitignore Check:Remember not to push node_modules or your build folders on GitHub! Make sure .gitignore is properly configured.
4. Single Git Repo:Your whole project must be in a single repo but make sure the client and server are structured in separate folders.
How to Deploy MERN Stack Apps: Frontend (React) on Vercel
In this section, we will learn the steps for how to deploy React frontend on Vercel. Many developers get confused regarding React hosting, so this section is for you.
Step 1: Push code to GitHub
Make sure that your client/ folder (React frontend) is on GitHub repo.
Step 2: Go to vercel.com
- Sign in with GitHub
- Click on “New Project”
- Import your GitHub repo.
- Select client/ as root directory.
Step 3: Build Settings
- Framework: React
- Build Command: npm run dev
- Output Directory: build
Step 4: Click Deploy
Vercel automatically builds it and your React frontend goes live.
Bonus:
Whenever you upload any file on GitHub, Vercel automatically redeploys it.
That’s built-in CI/CD for your front end! This is the best practice for deploying MERN stack apps.
How to Deploy MERN Stack Apps: Backend (Express/Node) on Render
Backend deployment might be technical for some developers but Render will guide you in deploying Node.js apps easily. Follow the following steps to deploy the backend on Render:
Step 1: Push Backend to GitHub
Make sure that your server/ folder is on the same GitHub repo or create a separate repo.
Step 2: Go to render.com
- Sign in with GitHub
- Click on “New + Web Service”
- Select your backend repo or server/ subfolder.
Step 3: Configure the Settings
- Name: Your App Name
- Environment: Node
- Build Command: npm install
- Start Command: node index.js or npm start
- Root Directory: server/
- Auto Deploy: Enable it
Step 4: Add Environment Variables
Add keys like:
MONGO_URI = your_mongo_db_connection_string
JWT_SECRET = your_jwt_secretStep 5: Deploy!
Click Create Web Service and Render will host your backend.
Your backend live URL will look like this:
https://your-app-name.onrender.com
How to Connect Frontend and Backend in MERN Stack Apps after Deployment
Now, we know that your React frontend is on Vercel and the Node backend is on Render and to make your app work they must be connected. This is the most searched part by developers.
Option 1: Proxy in React
Add your backend URL as a proxy in the package.json of your React app.
Example:
“proxy”: “https://your-backend-url.onrender.com”
Option 2: Use Full URLs in Axios
Axios.get("https://your-backend-url.onrender.com/api/data")Enable CORS in the Backend:
Install the CORS package in your Backend app and use it:
const cors = require("cors");
app.use(cors());This step is crucial and many developers search for it.
How to use Environment Variables when deploying MERN Stack aaps
Sensitive data like MongoDB URI, API Keys, and JWT secrets should not be hardcoded in code.
In Render:
Go to your service → Environment → Add variables like:
MONGO_URI, JWT_SECRETIn Vercel:
Go to Project → Settings → Environment Variables
This step is critical if you want to follow best practices for securely deploying MERN Stack Apps.
Tips to Smoothly Deploy MERN Stack Apps:
- First test it on a local host.
- Clear and Organize Client/Server folders.
- Use .env files for local testing.
- Use render logs to debug errors.
- Make sure to enable Auto-redeploy via Git push.
- Use HTTPS APIs.
Conclusion: How to Deploy MERN Stack Apps Like a Pro
Deployment can be a bit daunting the first time, but with platforms like Vercel and Render, your MERN Stack App becomes more secure, scalable, and fast.
Now you know how to deploy MERN Stack Apps step by step using free platforms, CI/CD, environment variables, and modern web hosting best practices.
So if your MERN project is ready, deploy it and let the world experience it.
Share and help your fellow developers if you like the blog!🙌
Happy Deploying!🚀
