🚀 Host a MERN Stack App on a VPS

This guide walks you through hosting a MERN (MongoDB, Express.js, React, Node.js) stack application on a VPS server from scratch — including environment setup, backend/frontend deployment, and SSL installation.

✅ Before You Begin

Use environment variables (likeAPI_URL and DB_URL) to keep sensitive information secure.

Add .gitignore to ignore node_modules.
Backend must have a start script (node index.js or similar). Avoid nodemon in production.

🔐 VPS Setup (Hostinger Example)

Purchase VPS from Hostinger and log in.
Choose Ubuntu 22.04 with control panel.
Set panel password and SSH key.

You can now SSH into your VPS:

ssh <your-username>@<your-vps-ip>

🔄 Update Your Server

sudo apt update && sudo apt upgrade -y

sudo gives admin rights; apt manages packages.

🔧 Install Node.js with NVM

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
source ~/.bashrc
nvm install --lts
node -v

🗃️ Install MongoDB

Follow steps from MongoDB Community Edition Docs.

sudo systemctl start mongod
sudo systemctl enable mongod
sudo systemctl status mongod

MongoDB might show inactive status on first start. Usestart command first.

📦 Install Git + GitHub CLI

sudo apt install git
sudo apt install gh

Authenticate:

gh auth login

🔁 Clone & Set Up Your MERN App

git clone <your-github-repo>
cd your-project

📂 Backend Setup

cd server
npm i -g pnpm
pnpm install

Create .env file:

nano .env

Example content:

MONGODB_URI=mongodb://127.0.0.1/vps-test-db
JWT_SECRET=some_super_secret
PORT=8000

Check contents:

cat .env

Start server with PM2:

npm i -g pm2
pm2 start npm --name "mern-backend" -- start
pm2 ls
pm2 logs mern-backend

PM2 ensures your backend runs continuously, even after crashes or restarts.

🌐 Frontend Setup

cd ../client
pnpm install
pnpm build

Configure .env:

nano .env
# API_URL=http://localhost:8000

Preview site:

pnpm preview --host

Make the port accessible:

sudo ufw allow 4173

vite preview is not for production. Use Nginx to serve your frontend.

🌍 Set Up Nginx

Install Nginx:

sudo apt install nginx

Create site config:

cd /etc/nginx/sites-available
nano yourdomain.com.conf

Example config:

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    root /root/your-app/client/dist;
 
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Enable and restart Nginx:

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

Make sure your frontend is built (pnpm build) and root points to the dist folder.

🌐 Domain DNS Setup

Update your DNS provider:

A Record → @ → your VPS IP
A Record → www → your domain

🔒 Enable HTTPS with Certbot

Install Certbot:

sudo apt install certbot python3-certbot-nginx

Add SSL to frontend domain:

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

Repeat for backend API:

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

After adding SSL, update client.env with https://api.yourdomain.com

Rebuild frontend:

pnpm build

🧠 Final Thoughts

You've successfully deployed a full MERN app on a VPS with Nginx reverse proxy, PM2 process manager, SSL, and secure configuration.

This setup is great for indie projects, client work, or launching SaaS MVPs.

Follow Anirban Das for more full-stack, DevOps, and deployment tutorials.