A step-by-step guide to deploy React frontend, Node.js backend, and Dashboard on a fresh VPS using NGINX reverse proxy, PM2 process manager, and free SSL via Certbot. Perfect for production-ready hosting with subdomains (api & dashboard) and automatic service startup.

deploy-cheatsheet.md

🌐 Easy Hosting Guide on Vps (MEAN stack)

✅ Step 0: Set Up Domain First

1. Open your domain provider’s dashboard (e.g., Namecheap, GoDaddy, Cloudflare, Hostinger, Porkbun, etc.)
2. Go to Domain List → DNS Zone
3. Now observe: 🔍 If there are old A records named @, api or dashboard 👉 Delete them first.

⚠️ DNS will NOT work if there are multiple A records with the same name.

4. Now add three new A records as shown below (use your VPS IP):

---

✅ Step 1: Log in to VPS Using VS Code

1. Open VS Code
2. Go to Extensions (Ctrl + Shift + X)
3. Search Remote - SSH → Install

4. Press Ctrl + Shift + P → search:

5. When asked, enter:

6. Press Enter and you will be connected 🎉

---

✅ Step 2: Install Necessary Software in VPS

Copy and run:

apt update && apt upgrade -y
apt install -y nginx curl unzip git certbot python3-certbot-nginx

curl -fsSL https://deb.nodesource.com/setup_24.x | bash -
apt install -y nodejs
npm i -g pm2

systemctl enable nginx
systemctl start nginx

👉 This installs all required packages & starts NGINX.

---

✅ Step 3: Upload Your Projects (Drag & Drop)

In VS Code, open /var/www/ folder.

Drag your project folders here:

Project	Upload To
Frontend (React)	/var/www/frontend
Backend (Node.js)	/var/www/backend
Dashboard (React)	/var/www/dashboard

Then go inside each folder and run:

npm install

---

✅ Step 4: Run Projects Using PM2

cd /var/www/frontend
pm2 start npm --name frontend -- start

cd /var/www/backend
pm2 start npm --name backend -- start

cd /var/www/dashboard
pm2 start npm --name dashboard -- start

Save and enable autostart:

pm2 save
pm2 startup

---

✅ Step 5: Configure NGINX

📁 Go to /etc/nginx/nginx.conf

http {
   # in this block 
   client_max_body_size 0; # Unlimited or replace 0 to value

   # Also consider adjusting timeouts for large uploads
   client_body_timeout 60s;
   client_header_timeout 60s;
   keepalive_timeout 60s;
   send_timeout 60s;

}

📁 Go to /etc/nginx/sites-available/

---

⚠️ Important

🔥 Delete the file named default. 🛑 Do not delete any other file.

Why? If it stays, your subdomains will not work and you will see the default NGINX page.

---

🛠 Create 3 files:

• root
• api
• dashboard

Put the following configuration (change subdomain + port):

server {
    listen 80;
    server_name (subdomain.)yourdomain.com;

    location / {
        proxy_pass http://localhost:(port);
        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 them:

sudo ln -s /etc/nginx/sites-available/root /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/api /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/dashboard /etc/nginx/sites-enabled/

---

🔁 Reload NGINX

nginx -t
systemctl reload nginx

---

✅ Step 6: Install SSL (HTTPS Free Certificate)

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

Choose Redirect HTTP to HTTPS when asked.

---

🎉 Done!

URL	Shows
https://yourdomain.com, https://www.yourdomain.com	Main App
https://api.yourdomain.com	Backend API
https://dashboard.yourdomain.com	Dashboard

---

⚙️ Useful Commands

🟢 PM2

pm2 ls
pm2 restart name/all
pm2 stop name
pm2 delete name
pm2 save
pm2 startup
pm2 logs (name)

🌐 NGINX

nginx -t
systemctl reload nginx

🔐 SSL Renew Test

certbot renew --dry-run

Great

good

So useful resource. Thanks for sharing such a valuable documentation with us.

So useful resource. Thanks for sharing such a valuable documentation with us.

Welcome 😍

I don't know what feedback I provide, but I love you. (She says)

Incredible work! 🎉

This script is an excellent showcase of your skills in crafting efficient, well-structured code. The logic is crisp, and the organization of functions makes it both readable and easy to follow. I really appreciate how you’ve broken down complex tasks into manageable components—making this a great resource for anyone looking to learn or improve their skills. Keep up the awesome work, this is a goldmine! 🚀💡

good job

Ok

not bad at all

it's helpful for me.