How To Deploy MERN App to Digital Ocean
Deploying a MERN (MongoDB, Express, React, Node.js) application to
DigitalOcean is an excellent way to bring your full-stack web
application to life with complete control, scalability, and reliability.
DigitalOcean provides powerful cloud infrastructure that developers love
for its simplicity and flexibility.
In this comprehensive guide, you'll learn step-by-step how to deploy
your MERN application on DigitalOcean, from server setup to live
deployment. Whether you're deploying for a personal project or for
production use, this tutorial will walk you through every stage clearly.
π§© Understanding the MERN Stack
Before diving into deployment, it's essential to understand what makes
the MERN stack such a popular choice for modern web development:
- MongoDB -- A NoSQL database for flexible, document-based data
storage. - Express.js -- A minimal Node.js framework that powers the
backend and API logic. - React.js -- A front-end library for creating dynamic user
interfaces. - Node.js -- A runtime environment that executes JavaScript code
on the server.
All four technologies use JavaScript, enabling developers to build
powerful mern-stack development with a single language.
π Why Choose DigitalOcean for Deployment?
DigitalOcean offers developers a reliable and efficient platform to
deploy applications. Unlike platforms such as Vercel or Heroku,
DigitalOcean gives you complete control over your server
environment.
Key Advantages of DigitalOcean:
- Full Root Access: Gives you total control over your server
configuration. - Scalability: Easily scale your droplets (servers) as traffic
increases. - Performance: SSD-based virtual machines ensure speed and
reliability. - Affordability: Plans start as low as $5/month.
- Flexibility: Ideal for deploying Node.js APIs, databases, and
React frontends all in one place.
π οΈ Step 1: Prepare Your MERN Project for Deployment
Before deploying, make sure your project is production-ready and
properly structured. A standard MERN app should look like this:
/mern-app
β
βββ /client # React frontend
β βββ public/
β βββ src/
β
βββ /server # Node.js + Express backend
β βββ models/
β βββ routes/
β βββ server.js
β
βββ package.json
βββ README.md
If you're developing both frontend and backend separately, now is the
time to integrate them into one main directory to simplify deployment.
βοΈ Step 2: Set Up a DigitalOcean Droplet
A Droplet is a virtual private server (VPS) provided by
DigitalOcean. You'll host your MERN app on this droplet.
Create a Droplet
- Log in to your DigitalOcean
account. - Click "Create" β "Droplets."
- Choose your operating system (Ubuntu 22.04 LTS is recommended).
- Select a plan (the $5/month plan works for most small projects).
- Add SSH keys (recommended for secure access) or set a root password.
- Choose a data center region near your target audience.
- Click Create Droplet.
Once created, note the public IP address --- you'll need this to
connect via SSH.
π» Step 3: Connect to Your Server via SSH
Open your terminal and connect to the server:
ssh root@your_server_ip
Replace your_server_ip with the IP address of your droplet.
If you added an SSH key during droplet creation, you'll connect
automatically. Otherwise, you'll be prompted for your password.
π§© Step 4: Install Node.js, npm, and Git
Once inside the server, update the system packages and install Node.js:
apt update && apt upgrade -y
apt install nodejs npm git -y
Verify the installation:
node -v
npm -v
git --version
You should see version numbers displayed for each.
π§± Step 5: Clone Your MERN Repository
Next, clone your project from GitHub (or any Git provider):
git clone https://github.com/yourusername/mern-app.git
cd mern-app
If you don't have a repository, you can upload your files manually using
SFTP or scp.
π§© Step 6: Install Project Dependencies
Inside your project directory, install backend dependencies:
cd server
npm install
Then, navigate to the frontend and install its dependencies:
cd ../client
npm install
npm run build
The build command will create a production-ready React build in theclient/build folder.
π Step 7: Connect MongoDB Atlas
Since hosting a MongoDB database on the same droplet can be complex, the
easiest option is to use MongoDB Atlas.
Steps to Configure MongoDB Atlas:
- Visit MongoDB Atlas.
- Create a free cluster.
- Configure your database user and IP whitelist.
- Get your MongoDB connection URI.
- Add it to your backend
.envfile as:
<!-- -->
MONGO_URI=your_mongodb_connection_string
PORT=5000
NODE_ENV=production
Then, connect it inside your backend entry file (server.js orapp.js):
import mongoose from "mongoose";
import dotenv from "dotenv";
dotenv.config();
mongoose.connect(process.env.MONGO_URI)
.then(() => console.log("MongoDB Connected"))
.catch(err => console.log(err));
π§ Step 8: Serve the Frontend from Express
To make your app production-ready, configure Express to serve your React
frontend.
In your backend server.js file, add this code:
import path from "path";
app.use(express.static(path.join(__dirname, "../client/build")));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "../client/build", "index.html"));
});
This ensures your backend serves the React build files directly.
β‘ Step 9: Install and Configure PM2
PM2 is a powerful Node.js process manager that keeps your app running
even after you close the terminal.
Install PM2 globally:
npm install -g pm2
Start your application with PM2:
cd /root/mern-app/server
pm2 start server.js --name "mern-app"
pm2 save
pm2 startup
This ensures your app restarts automatically on system reboot.
π Step 10: Install and Configure Nginx as a Reverse Proxy
To make your app accessible via the internet (on port 80 or 443), you
need to use Nginx as a reverse proxy.
Install Nginx:
apt install nginx -y
Open the Nginx configuration file:
nano /etc/nginx/sites-available/mern-app
Add the following configuration:
server {
listen 80;
server_name your_domain_or_ip;
location / {
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;
}
}
Save and exit (CTRL + X, then Y, then Enter).
Enable the configuration:
ln -s /etc/nginx/sites-available/mern-app /etc/nginx/sites-enabled/
nginx -t
systemctl restart nginx
Now your MERN app should be accessible at your server's IP address.
π Step 11: Secure with SSL (HTTPS)
For production apps, SSL is essential. The easiest way is to use
Certbot for free SSL certificates from Let's Encrypt.
Install Certbot:
apt install certbot python3-certbot-nginx -y
Run Certbot to secure your site:
certbot --nginx -d your_domain.com -d www.your_domain.com
Follow the prompts, and your app will now be served over HTTPS.
π Step 12: Automate Deployment (Optional)
For easier updates, you can set up automatic deployment with Git hooks
or GitHub Actions. This allows you to push code to your repo and
automatically redeploy it to your DigitalOcean server.
Example Git pull setup:
cd /root/mern-app
git pull origin main
pm2 restart all
π§° Troubleshooting Common Issues
1. MongoDB connection errors:
Ensure your MongoDB URI is correct and your IP address is whitelisted in
MongoDB Atlas.
2. Port conflicts:
If another process uses port 80 or 5000, use sudo lsof -i :5000 to
find and stop it.
3. React app not loading:
Check that the build directory exists and that Express is correctly
serving static files.
4. Firewall issues:
Allow HTTP/HTTPS traffic using:
ufw allow 'Nginx Full'
ufw enable
πΌ Why Hire AAMAX for MERN Stack Development?
Building and deploying a MERN application requires expertise across both
backend and frontend technologies. That's where
AAMAX can help.
AAMAX is a full-service digital agency specializing in Web
Development, Digital Marketing, and SEO Services. Our team of expert
developers can help you design, build, and deploy robust MERN
applications tailored to your business needs.
Whether you're developing a SaaS product, an eCommerce platform,
or a custom web app, AAMAX ensures high performance, scalability,
and professional deployment strategies using platforms like
DigitalOcean, AWS, and Vercel.
π Conclusion
Deploying a MERN app on DigitalOcean gives you the perfect balance of
control, power, and flexibility. From setting up your droplet to
securing your app with SSL, every step helps you create a
production-ready environment.
By following this guide, you can confidently deploy your MERN app and
make it live for the world to access. And if you'd like professional
help in building or deploying your application, consider working with
AAMAX --- your trusted partner in MERN Stack Development and
full-service digital growth.
Want to publish a guest post on aamax.co?
Place an order for a guest post or link insertion today.
Place an Order