How to Deploy a MERN Stack Application on AWS or Vercel

Deploying a MERN (MongoDB, Express, React, Node.js) stack application is a crucial step to make your app accessible to users. Choosing the right deployment platform depends on your needs:

AWS (Amazon Web Services) is ideal for scalable, high-performance applications.
Vercel is great for quick and easy deployment, especially for frontend applications.

In this guide, we will walk through deploying a MERN stack application on AWS (using EC2 and S3) and Vercel (for serverless hosting).

1. Preparing Your MERN Application for Deployment

Before deployment, make sure:

Your backend (Node.js/Express) and frontend (React) apps are working locally.
You have a MongoDB database (Atlas for cloud storage).
Environment variables are correctly set up.

Step 1: Configure Environment Variables

Create a .env file in the backend and include:

MONGO_URI=your-mongodb-uri
JWT_SECRET=your-secret-key
PORT=5000

For the frontend, configure API endpoints in src/config.js or use .env:

REACT_APP_API_URL=http://your-api-url.com

2. Deploying the MERN Stack on AWS (EC2 & S3)

Step 1: Set Up an EC2 Instance

Sign in to AWS Console and go to EC2 Dashboard.
Click Launch Instance → Choose Ubuntu (or Amazon Linux).
Select an instance type (t2.micro for free tier).
Configure security groups to allow inbound traffic on ports 22 (SSH), 80 (HTTP), and 5000 (Backend API).
Launch the instance and connect via SSH:

ssh -i your-key.pem ubuntu@your-ec2-instance-ip

Step 2: Install Node.js and MongoDB

sudo apt update
sudo apt install nodejs npm

If using MongoDB Atlas, skip installing MongoDB locally. Instead, connect to Atlas in your .env file.

Step 3: Deploy the Backend on EC2

Transfer your backend files to EC2:

scp -i your-key.pem -r ./backend ubuntu@your-ec2-instance-ip:~/backend

2. SSH into EC2 and install dependencies:

cd backend
npm install

3. Run the backend server:

node server.js

Step 4: Deploy the Frontend on AWS S3

Build the React app:

cd frontend
npm run build

Create an S3 Bucket on AWS and enable static website hosting.
Upload the build folder files to S3.
Configure CORS and Bucket Policy for public access.

3. Deploying the MERN Stack on Vercel

Step 1: Deploy the Frontend (React) on Vercel

Install the Vercel CLI:

npm install -g vercel

2. Log in and deploy the React app:

cd frontend
vercel

Step 2: Deploy the Backend (Node.js) on Vercel

Navigate to the backend folder:

cd backend

2. Create a vercel.json file for API configuration:

{
  "version": 2,
  "builds": [{ "src": "server.js", "use": "@vercel/node" }],
  "routes": [{ "src": "/(.*)", "dest": "server.js" }]
}

3. Deploy the backend:

vercel

Step 3: Configure MongoDB Atlas for Production

In MongoDB Atlas, update your CORS settings to allow Vercel/AWS domains.

4. Testing and Finalizing the Deployment

Ensure frontend and backend are connected.
Open your deployed frontend URL and check if API requests work.
Use Postman or browser DevTools to test API calls.
Monitor the logs on AWS (pm2 logs) or Vercel (vercel logs).

Conclusion

Deploying a MERN stack application on AWS gives full control over server infrastructure, making it ideal for high-performance applications. Meanwhile, Vercel provides a fast and serverless deployment option, perfect for frontend-heavy applications.

By following this guide, you now have a deployed and scalable MERN stack application running on AWS or Vercel! 🚀