How to Deploy a MERN Stack Application

The MERN (MongoDB, Express.js, React, Node.js) stack is one of the most popular tech stacks for building modern web applications. Deploying a MERN stack application can be challenging, especially for those new to managing servers. In this tutorial, we will guide you through deploying a MERN stack application on DigitalOcean using a Droplet.

Prerequisites
Before diving into deployment, ensure you have the following:
A working MERN stack application ready for deployment.
A DigitalOcean account (with billing set up).
Basic knowledge of SSH and command-line tools.
Node.js and npm installed locally for testing.

Step 1: Create a DigitalOcean Droplet
Log in to DigitalOcean:
Visit DigitalOcean and log in to your account.
Create a Droplet:
Click the "Create" button and select "Droplets."
Choose an image: Select Ubuntu 22.04 as the operating system.
Select the Droplet size: For a MERN stack application, a basic plan with 2 GB RAM and 1 CPU is sufficient.
Add your SSH key: To securely connect to your server. If you don’t have one, generate an SSH key pair.
Finalize and create the Droplet.
Access the Droplet:
Use SSH to log in:
bash
Copy code
ssh root@

Step 2: Set Up the Server Environment
Update and Install Dependencies
Update the system and install necessary packages:
bash
Copy code
sudo apt update && sudo apt upgrade -y
sudo apt install -y build-essential curl

Install Node.js and npm
Install the latest stable version of Node.js:
bash
Copy code
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

Verify the installation:
bash
Copy code
node -v
npm -v

Install MongoDB
Add MongoDB's official repository:
bash
Copy code
wget -qO - https://www.mongodb.org/static/pgp/server-6.0.asc | sudo apt-key add -
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/6.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-6.0.list
sudo apt update

Install MongoDB:
bash
Copy code
sudo apt install -y mongodb-org

Start MongoDB and enable it to run on boot:
bash
Copy code
sudo systemctl start mongod
sudo systemctl enable mongod

Check the MongoDB service:
bash
Copy code
sudo systemctl status mongod

Step 3: Deploy Your Application
Transfer Files to the Server
Use scp or any FTP tool to transfer your MERN stack application to the Droplet:
bash
Copy code
scp -r /path/to/your-app root@:/var/www/mern-app

Install Application Dependencies
Navigate to your app directory:
bash
Copy code
cd /var/www/mern-app

Install dependencies:
bash
Copy code
npm install

Step 4: Configure the Backend
Environment Variables
Create a .env file in the backend directory for sensitive information:
plaintext
Copy code
MONGO_URI=mongodb://localhost:27017/mern_db
PORT=5000
JWT_SECRET=your_secret_key

Start the Backend Server
Run your backend server:
bash
Copy code
node server.js

Test the API by accessing http://:5000/api.

Step 5: Configure the Frontend
Update Frontend API URL
In the frontend code (likely in src/config.js or similar), replace the local API URL with the server's IP:
javascript
Copy code
export const API_URL = "http://:5000/api";

Build the React App
Build your React application for production:
bash
Copy code
npm run build

Move the build folder to the public directory of your backend or serve it using serve:
bash
Copy code
npm install -g serve
serve -s build

Step 6: Configure a Process Manager (PM2)
To keep the application running, use PM2:
bash
Copy code
sudo npm install -g pm2
pm2 start server.js --name mern-app
pm2 save
pm2 startup

Step 7: Set Up Nginx as a Reverse Proxy
Install Nginx:
bash
Copy code
sudo apt install -y nginx

Create a new configuration file for your app:
bash
Copy code
sudo nano /etc/nginx/sites-available/mern-app

Add the following configuration:
nginx
Copy code
server {
listen 80;
server_name ;

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

}

Enable the configuration:
bash
Copy code
sudo ln -s /etc/nginx/sites-available/mern-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Step 8: Secure Your Application with SSL
Install Certbot for SSL certificates:
bash
Copy code
sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d

Follow the prompts to complete the SSL setup.

Conclusion
Congratulations! Your MERN stack application is now live on DigitalOcean. This tutorial covered every step, from setting up the Droplet to deploying and securing your application. Regularly monitor your server and update dependencies to ensure smooth performance.
If you have any questions or face issues, feel free to comment below or check out DigitalOcean’s Community resources. Happy coding!