Deploy MERN App on VPS

How to Deploy a MERN App on a VPS (Beginner-Friendly Guide)

So you’ve built your first MERN app (MongoDB, Express, React, Node.js) and now you want to show it off to the world. Running it locally is fun, but if you really want people to access it, you’ll need to deploy it on a server.

Don’t worry — this guide is written like I’m explaining it to a friend. No heavy jargon, no confusing shortcuts. Just step-by-step instructions that even a beginner can follow. We’ll use Ubuntu 22.04 VPS (since it’s super common and cheap).

By the end, your app will be live on the internet! 🌍

🛠️ What We’ll Cover

• What is a VPS (in simple words)
• Preparing your VPS for deployment
• Installing Node.js, Nginx, and Git
• Setting up MongoDB (two options: local on VPS or Atlas)
• Running your backend (Express + Node.js)
• Building and serving your React frontend
• Setting up Nginx as a reverse proxy
• Running your app in the background with PM2
• Bonus tips (SSL, domains, backups)

☁️ Step 1: Understanding What a VPS Is

Think of a VPS (Virtual Private Server) as a computer that lives in the cloud. It has its own operating system (in our case Ubuntu 22.04), storage, and memory — just like your laptop. But instead of being on your desk, it’s in a data center, always online.

Providers like DigitalOcean, Linode, Vultr, or AWS Lightsail let you rent these servers for a few dollars a month.

🧹 Step 2: Preparing Your VPS

After creating a VPS, you’ll get an IP address and login details.
Open your terminal and connect to the VPS:

ssh root@your_server_ip

(replace your_server_ip with your VPS’s actual IP).

First, update your server so it’s fresh and clean:

sudo apt update && sudo apt upgrade -y

⚙️ Step 3: Install Node.js, NPM, and Git

Your MERN app needs Node.js to run.
Run:

sudo apt install -y nodejs npm git

Check versions:

node -v
npm -v
git --version

If you see version numbers, you’re good! ✅

🍃 Step 4: Set Up MongoDB (Two Options)

sudo apt install -y mongodb
sudo systemctl enable mongodb
sudo systemctl start mongodb

Check if it’s running:

systemctl status mongodb

• Go to MongoDB Atlas
• Create a free cluster
• Get your connection string (looks like mongodb+srv://username:password@cluster0...)
• Use this string in your backend .env file.

👉 Personal Tip: For beginners, Atlas is easier and more reliable.

📂 Step 5: Clone Your MERN App

Now, bring your project from GitHub (or any repo) into the VPS:

git clone https://github.com/your-username/your-mern-app.git
cd your-mern-app

Install dependencies:

npm install

🔧 Step 6: Run Your Backend

If your backend is in a server/ folder, go there:

cd server
npm install

Create a .env file with your MongoDB connection string and any secrets. Example:

PORT=5000
MONGO_URI=mongodb://localhost:27017/myapp
JWT_SECRET=supersecret

Start your backend:

node index.js

If everything is fine, you’ll see something like:

Server running on port 5000
Connected to MongoDB

🎨 Step 7: Build Your React Frontend

Go to your React app folder:

cd client
npm install
npm run build

This creates a build/ folder with static files (HTML, JS, CSS). These are what you’ll serve to users.

🌐 Step 8: Install and Configure Nginx

Nginx is like a traffic manager. It will:

• Send requests for your React app (/) to the frontend build.
• Send requests for your API (/api) to your backend.

Install Nginx:

sudo apt install -y nginx

Edit config:

sudo nano /etc/nginx/sites-available/mern-app

Add this config:

server {
             listen 80;

             server_name yourdomain.com;

             location / {
                 root /root/your-mern-app/client/build;
                 index index.html;
                 try_files $uri /index.html;
             }

             location /api {
                 proxy_pass http://localhost:5000;
                 proxy_http_version 1.1;
                 proxy_set_header Upgrade $http_upgrade;
                 proxy_set_header Connection 'upgrade';
                 proxy_set_header Host $host;
                 proxy_cache_bypass $http_upgrade;
             }
          }

Enable it:

sudo ln -s /etc/nginx/sites-available/mern-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

🔄 Step 9: Keep Your App Running with PM2

If you just run node index.js, your app stops when you close the terminal. To fix this, use PM2:

sudo npm install -g pm2

Start backend with PM2:

pm2 start index.js --name "mern-backend"
pm2 save

Now your app runs forever in the background.

🔒 Bonus: Add SSL for Free (HTTPS)

Nobody likes the “Not Secure” warning. Luckily, Let’s Encrypt gives free SSL.

Install Certbot:

sudo apt install certbot python3-certbot-nginx -y

Run:

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

Done! Your app is now secure with HTTPS. 🔐

🎉 Final Thoughts

Congratulations, you did it! 🎊 You just deployed your MERN app on a VPS. Here’s a quick recap:

• You connected to your VPS and installed the basics
• Set up MongoDB (local or Atlas)
• Cloned and ran your backend
• Built and served your React frontend
• Used Nginx as a traffic manager
• Kept everything alive with PM2
• (Optional) Secured it with SSL

Now you can proudly share your domain with friends, clients, or employers.
👉 Pro Tip: Always keep backups of your code and database. VPS crashes can happen!

Ready to Deploy Your Next Project?

Now that you've successfully deployed your MERN app, you're ready to take on bigger challenges. Whether it's scaling your application, implementing CI/CD pipelines, or exploring containerization with Docker, the foundation you've built today will serve you well.

If you found this guide helpful and want to see more deployment tutorials, feel free to connect with me on social media or check out my other projects on GitHub.