Deploying a Full Stack App on a VPS

Are you ready to take your MERN (MongoDB, Express.js, React, Node.js) app live for the world to see? Learning how to deploy a full stack app on a Virtual Private Server (VPS) is a game-changing skill that sets you apart from tutorial-only developers.

In this step-by-step guide, we’ll walk through the full process of deploying a MERN stack app on a VPS using Ubuntu, Docker, Nginx, and Let’s Encrypt SSL. Whether you’re a junior developer or a self-taught coder, this tutorial is built with simplicity, clarity, and production readiness in mind.

🔍 What is a VPS and Why Use It?

What is a VPS?

A Virtual Private Server (VPS) is a virtual machine sold as a service by hosting providers like DigitalOcean, Linode, or Hetzner. It gives you full control of a Linux-based server where you can install packages, run apps, and host websites.

Why Choose VPS Hosting?

Full control: You manage everything—great for learning DevOps.
Better performance: Compared to shared hosting, your app gets dedicated resources.
Scalability: Easily upgrade plans as your traffic grows.
Cost-effective: As low as $5/month for production-level control.

🛠️ Prerequisites

Before we start, make sure you have:

A MERN stack app ready to deploy
GitHub repos for frontend and backend
A VPS server (Ubuntu 22.04 recommended)
Domain name (optional but ideal)
A terminal (with SSH access)
Basic knowledge of command line and Git

🚀 Step-by-Step VPS Deployment Tutorial

Step 1: Setup Your VPS

ssh root@your-vps-ip
apt update && apt upgrade -y
apt install git curl ufw -y

Step 2: Secure Your Server

ufw allow OpenSSH
ufw enable

Step 3: Install Docker and Docker Compose

curl -fsSL https://get.docker.com -o get-docker.sh
sh get-docker.sh
apt install docker-compose -y

Step 4: Clone Your Frontend and Backend Projects

mkdir /app && cd /app
git clone https://github.com/yourusername/frontend.git
git clone https://github.com/yourusername/backend.git

Step 5: Create Dockerfiles

Backend (backend/Dockerfile):

FROM node:18
WORKDIR /app
COPY . .
RUN npm install
EXPOSE 5000
CMD ["npm", "start"]

Frontend (frontend/Dockerfile):

FROM node:18 as build
WORKDIR /app
COPY . .
RUN npm install && npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80

Step 6: Create Docker Compose File

/app/docker-compose.yml:

version: '3'
services:
  backend:
    build: ./backend
    ports:
      - "5000:5000"
    environment:
      - NODE_ENV=production

  frontend:
    build: ./frontend
    ports:
      - "3000:80"

Step 7: Reverse Proxy with Nginx + SSL

apt install nginx -y
nano /etc/nginx/sites-available/yourdomain.com

Sample Nginx Config:

server {
  listen 80;
  server_name yourdomain.com;

  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;
  }

  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
  }
}

ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/
nginx -t
systemctl restart nginx

Install SSL

apt install certbot python3-certbot-nginx -y
certbot --nginx -d yourdomain.com

Step 8: Start Your Containers

cd /app
docker-compose up -d

Your app is now live! 🎉

🔄 Real-World Example

At CodeJourneyWithAamir, we used this exact method to deploy a productivity dashboard MERN app that handles JWT authentication, dynamic charts, and file uploads.

Looking to add JWT authentication next? 👉 Secure React + Express Login System with JWT

🧰 Tools & Resources

📖 More from CodeJourneyWithAamir

✅ Conclusion

Deploying a full stack app on a VPS might seem daunting at first, but once you understand the process, it becomes an empowering part of your dev journey.

✔️ Build production-ready MERN apps
✔️ Secure your deployments with Nginx + SSL
✔️ Run multiple services with Docker effortlessly

💬 Have any questions? Drop them in the comments below.
🚀 Try this in your next project and share your experience with the CodeJourneyWithAamir community!

💖

Enjoyed the Post?

If my blog helped you, please consider supporting me!

Support Me 💖

Code Journey With Aamir