Deploy MERN Stack in Digitalocean (2024 version)

What is Digitalocean?

Digital Ocean is a cloud computing provider that basically offers you a virtual machine (a server) to host your web application.

What do you need?

A basic MERN application (Mongo, Express, React, Node)

In case this is your first time deploying to production, it is better to have a domain name but it is not essential as you can access your website after deployment with an IP address.

Getting Ready:

1- If you do not have an account create one in Digitalocean https://www.digitalocean.com

2- Once you log in you will get a credit of around 300$ or 200$ you can use it for 2 months and we can use it for creating droplets.

3- Create a project as per below after that you will see the project name in the dashboard.

4- Create a VPC under networking tap this will create a private network so you can access all resources with private IP addresses like DBs droplets and load balancers.

• In the left corner, select networking then select VPC Network.
• Select the region where you want your VPC better to select one that is near to your country.
• Keep the default IP address to be generated by digitalocean.
• Choose a name and description.
• Create a VPC network.

5- Now lets create a droplet(server) to host our application.

• In the left corner select Droplets then create Droplet.

• Now you have two options either you create the server and install all dependencies in the server or you can select the stack from the marketplace both ways are correct but if you just starting the marketplace could be a bit costly so this tutorial will go with creating the server installing all dependencies.
• Choose a Region better near your county in my case I will go with Frankuak and below you will see the VPC you just created so this means our droplet (server) will be in the same network.

• Here I will go with Ubuntu, or if you want to go with markeplace click it and search for mern.

• In this tutorial, I will select the shared CPU and regular disk with 4$ per month in a real production application you need to select the base in your needs.

• I will not add any Additional Storage or backups as this is only for testing and learning.
• Choose Authentication Method I will go with a password and keep this password with you as you will use it for login to the server.
• Finalize Details by selecting how many droplets you want I will go with one if you want two you can create it and will have the same configuration.

Once all set click on your project name you see your droplet click on it you will see more details such as public IP address, Private IP, and console.

Greate Now we create the server what we need to do is log in to this server and there are many ways to log in either use digitalocean console or if you are a Mac, Linux user you can use your terminal if you windows user you need to install Putty in this tutorial I will go with digitalocean console

Once you log in you might be asked to enter the password for root here just use the same password where you created the droplet.

Now you log in as a root@yourDroplteHostName, as a best practice better to not use the root user and to create a user and add this user to sudo group.

We need to run the below commands:

Create a user in ubuntu and give it a password.

adduser sara.

Once you create the user you want this user to perform root commands to do this add the user to sudo group.

usermod - ag sudo sara

To see groups belong to Sara

groubs sara

Now sara is in the sudo group we can perform root commands, to switch to Sara user use the below command.

su sara

Now we need node js if you type node -v is not found.

sudo apt update && sudo apt upgrade

sudo apt install nodejs

Check out this link for more details:

(https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04)

Now let's create a directory to place our application let's create in root directory.

cd /

mkdir mern-apps

cd mern-apps

Now we are in mern-app directory you can do pwd to check path, what we need to do is to git all our code files we can clone any node/express app from github.

Once you clone the project, we need to install node dependencies and prepare the frontend build for production (the react app).

to install node modules:

npm i 

To create a frontend build ready for production.

npm run build 

Notice the build has the index.html which we will tell nginx(webserver) to root all requests to this file.

Now if you try to copy the public IP in Google Chrome this won't work,
we need to install two things Nginx to accept requests on port 80 and PM2 which is node processing manager that will ensure running the node without logging in to the server.

Install PM2:

sudo npm i -g pm2

Install Nginx:

sudo apt install nginx

We need also to enable the firewall in the server to access the ports right now to check the firewall status is inactive.

to enable

sudo ufw enable

By default, if you enable the firewall all ports are blocked.

We need to enable three ports to access the server ports 80, 443, 22

sudo ufw allow ssh

sudo ufw allow http

sudo ufw allow https

Now if you copy the public IP and run it in Chrome you see the default Nginx webpage.

Great now we are able to install Nginx but we need our front-end page, not the default Nginx web page to do this let's see the nginx config file and change it.

cd /etc/nginx/sites-available

If you do ls -ltr you will see the default file which has all the configuration for the nginx server let see what is inside and change it to our needs.

With nano command you can view and change the file content, the most two important changes are the root and location.

sudo nano default

In Server block change the default root which was for default web server page change it to your index file page in my front-end app it looks like this

root /mern/JWT-/frontend/dist;

if you run the build with react app you get /build but since i used vite as a front-end /dist is the folder name.

if you have an api with you need to add the location of your api.

location /api/ {
    proxy_pass http://localhost:8000; # Your Node.js/Express server address and 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;
}

Sample of default file

Now to save changes of default file click controll x Y enter.

Since we change the nginx config file we need to restart nginx

sudo systemctl nginx restart

Now refresh and you will see your web page out.

Please dont hesitate to ask any Questions.