How to deploy a MERN Full Stack App to DigitalOcean?

You finished building your Full Stack App and now It is time for you to deploy it so that it can be accessed by the whole world.

We will do this by deploying both client-side react app and node js backend API into one single DigitalOcean droplet, and securing your website with a free SSL Certificate. DigitalOcean is the cheapest and fastest cloud service provider and considered best for production apps.

Our API will be available in ' /api ' and our react app will be available on ' / '.

So the first step here is to signup with DigitalOcean. It is a paid service. The minimum monthly cost would be $5.

Use the link below to sign-up. This link will give you between $10 - $100 depending on the running offer by DigitalOcean.

Link: https://m.do.co/c/e756bd5a703c

Steps:

1- Sign-Up with Digital Ocean:

The sign-up process is very straightforward. Once your account is created, you'll be asked to pay a small amount ( $5 ) for payment method confirmation. If you use the link provided above you'll get up to a 90% discount.

2- Create your droplet:

A droplet in DigitalOcean world is a scalable virtual machine. You'll be asked to select an image ( operating system ) for your server. For simplicity, since we already know that our app is using Node.js and npm, we will go with an image that has both already installed.

• Select Marketplace in the menu
• Search for the " NodeJS " image (Running on Ubuntu).

Then the next step is to select a plan. The plan you select really depends on your needs. For this tutorial, we will go with the cheapest option of $5/month (Basic Plan). This plan can be changed whenever you want.

Scroll down to the authentication section. You can either choose to access your server with an SSH key or a root password. We will go for the root password for this tutorial. Make sure to save this password and protect it as your life depends on it...lol. You can leave the other options as default.

Hit the create droplet button and voilà.

3- Connect to your server:

By now your droplet should've been created. Copy the IP address, open your computer's terminal, assuming you're using a mac (For windows commands please google the command), and type the following command:

ssh root@123.456.78.10

You'll be asked to enter the password of your droplet.

Once connected, for security reasons, it's always good to disable root access to your droplet. Therefore we're gonna need to create another user. Type the following commands.

adduser fsociety

usermod -aG sudo fsociety

sudo su fsociety

Logout and try to log back in as fsociety.

ssh fsociety@123.456.78.10

If it works, the next step is to remove the root user login authority for security.

sudo vim /etc/ssh/sshd_config

Hit the key " i " to edit and change 'PermitRootLogin yes' to the following:

PermitRootLogin no

Press ESC and type :wq to save changes and exit.

To make sure the changes are applied, type the following command:

sudo service ssh restart

Now you won't be able to connect to your droplet using root user.

4- Install Nginx:

sudo apt-get install nginx

Then go to your root directory. Write those commands one by one.

cd
cd /etc/nginx/sites-available
ls
sudo vim default

Hit the key " i " to edit and replace " location / " codeblock with the following code:

// your api will run on /api on port 8000
// your react app will run on / port 3000

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

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

Here we assume your backend is running on port 8000 and your frontend on port 3000.

To make sure there are no errors, type the following command and restart nginx after making those changes.

sudo nginx -t

sudo systemctl restart nginx

5- Bring your project to the server and run it using pm2 :

I'm assuming the source code for your backend and frontend is on GitHub. If not you can always use FTP to send your source code to the server.

First, select a location to store your source code. I always put mines on the home directory of the server.

Then create two folders, one for your backend files and one for your frontend files.

sudo mkdir backend
sudo mkdir frontend

• The Backend:

Navigate into the backend folder and run git clone to copy your backend source code.

cd backend
sudo git clone https://github.com/yourusername/yourbackendrepo.git .

If you have any files you didn't push to GitHub (like environment variables), make sure to create those files manually.

Then run the following command to make sure that all the dependencies are installed and up-to-date.

sudo npm install

We will use pm2 as the process manager for our production Node.js application.

Install and run our backend using pm2 with the following commands:

sudo npm install pm2 -g
pm2 start server.js

By now your backend should be online. You can test it by entering your IP address to the browser followed by the path to one of your API endpoints (a GET request).

For example: 123.456.789.246/api/allblogs

• The Frontend:

Navigate into the frontend folder and run git clone to copy your frontend source code.

cd frontend
sudo git clone https://github.com/yourusername/yourfrontendrepo.git .

Again install all dependencies that your app requires, using the same command you used above.

Run the following commands to build your application and start it with pm2.

sudo npm run build
pm2 start npm -- start

Now both your backend and your frontend should be live. Again you can test it using the IP address of your droplet.

If you make any changes to the files later you're going to need to run the following command to restart pm2:

pm2 restart all

6- Install MongoDB locally:

If you want to store your data locally, those commands will install MongoDB on your server.

echo "deb http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.2.list
 
sudo apt update
 
sudo apt install -y mongodb
 
// you should see the active (running) status printed in your console
sudo systemctl status mongodb

The connection string should be as follow: mongodb://127.0.0.1:27017/mydb.

If you wish to use the cloud version of MongoDB, you're gonna need to create an account in MongoDB Atlas. https://www.mongodb.com/cloud/atlas

Then you'll have to create a cluster.

Once created click on " Connect to your application" and you'll get the connection string. Replace the existing one in your project and VOILÀ.

7- Conclusion:

If you run into issues with the steps provided here, share the error messages in the comment section so that we can troubleshoot the issue together.

By now your web app should be live but something is missing...

How to connect your domain name with DigitalOcean?

How to install SSL Certificates on a droplet?

Upcoming blog posts will cover all these topics so stay tuned for more.

Peace :)