From Dev to Deploy

How to Deploy a MERN Stack App on DigitalOcean (Step-by-Step Guide)

Isabella Otoo's photo
Isabella Otoo
·

3 min read

Introduction

Deploying a MERN (MongoDB, Express.js, React, Node.js) stack application can be overwhelming for beginners, but with DigitalOcean, the process becomes much easier. This guide will walk you through deploying your MERN app on a DigitalOcean Droplet, ensuring a smooth and scalable deployment. Plus, using DigitalOcean gives you access to affordable and reliable cloud infrastructure.

🔹 Sign up for DigitalOcean using my affiliate link – coming soon! to get free credits!

Prerequisites

Before we begin, make sure you have: ✅ A DigitalOcean account (Sign up here) ✅ A MERN stack application ready for deployment ✅ Basic knowledge of Linux commands ✅ Installed Node.js, npm, and Git on your local machine

Step 1: Create a DigitalOcean Droplet

A Droplet is a virtual private server (VPS) on DigitalOcean where you will deploy your MERN app.

1️⃣ Log in to your DigitalOcean Dashboard. 2️⃣ Click Create → Droplets. 3️⃣ Choose Ubuntu 22.04 as your operating system. 4️⃣ Select a Basic Plan (The $4 or $6 plan is great for small apps). 5️⃣ Add your SSH key (recommended) or choose a password for authentication. 6️⃣ Click Create Droplet.

Once your Droplet is created, you’ll get an IP address. Save this for later.

Step 2: Connect to Your Droplet via SSH

Use your terminal or command prompt to connect to your Droplet:

ssh root@your_droplet_ip

If prompted, enter your password or accept your SSH key.

Step 3: Install Required Dependencies

Once logged into your server, update your packages and install Node.js:

sudo apt update && sudo apt upgrade -y
sudo apt install -y nodejs npm git

Verify Node.js and npm installation:

node -v
npm -v

Step 4: Clone Your MERN App from GitHub

If your app is hosted on GitHub, run:

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

Then install dependencies:

npm install

For backend:

cd backend
npm install

Step 5: Set Up Environment Variables

Create a .env file in your backend directory:

nano .env

Add your environment variables, e.g.,

PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret

Save and exit (CTRL + X, then Y, then Enter).

Step 6: Start Your MERN App with PM2

To keep your app running continuously, use PM2:

sudo npm install -g pm2
pm run build
pm2 start server.js --name "mern-backend"

For frontend:

cd frontend
npm install
npm run build
pm install -g serve
serve -s build -l 3000

Run this to make sure your processes restart on server reboot:

pm2 startup
pm2 save

Step 7: Set Up Nginx as a Reverse Proxy

Install Nginx:

sudo apt install nginx -y

Create an Nginx configuration file:

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

Paste the following:

server {
    listen 80;
    server_name your_domain_or_ip;

    location / {
        proxy_pass http://localhost:3000;
        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;
    }
}

Save and exit (CTRL + X, Y, Enter).

Enable the config and restart Nginx:

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

Step 8: Secure Your Server with SSL (HTTPS)

To secure your site, install Certbot and set up SSL:

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your_domain

Follow the prompts, and Certbot will generate a free SSL certificate.

Conclusion.

Congratulations! 🎉 Your MERN app is now live on DigitalOcean with Nginx and SSL. To scale further, consider DigitalOcean’s managed databases, load balancers, and backups.

🚀 Sign up for DigitalOcean using my affiliate link – coming soon! to get free credits and deploy your app today! 💰

DigitalOcean