How to Deploy a MERN Stack Application
Habib ur Rehman
Posted on November 20, 2024
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!
Posted on November 20, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 27, 2024