How To Deploy A MERN Stack Application To Cloud

MERN Stack is a popular tech stack used by small and big projects alike. Although there could be a lot more technologies used with MERN, we consider an app built with MERN stack if it at least consist of:

MongoDB as the database
Express as the backend server
React as a UI library for frontend
Node.js as a runtime

Using Express (E) and Node.js (N) both as alphabets is a bit redundant (as if you’re using Express.js, you are automatically using Node.js), but here we are. This blog post would be a summary of the video you see here:

This is our part 2 of the MERN stack deployment. In this part, we would focus more on deploying it on a cloud server than coding the application itself. If you missed out part 1, check it out here.

Building an app is only half the job

You built an amazing application, but to put it behind a simple URL and make it accessible to everyone over internet is a completely different job. At its core, you need to do some basic server programming to make sure your custom solution works in the way you want.

Your MERN stack could be built in any way, but because it needs a Node.js runtime and MongoDB, it wouldn’t be a bad choice to go with a cloud server like AWS EC2 instance or DigitalOcean droplet, especially for small to medium sized projects. You can even get $100 credits free on DigitalOcean. In this article, we would try to deploy it on a simple droplet on DigitalOcean.

Things we need to deploy app on cloud

We need the list of following things:

A server (DigitalOcean droplet in this case)
PM2 for Node.js process management
NGINX for TLS termination and reverse proxying to our Node.js process
Certbot for generating HTTPS certificate
Your domain registrar DNS provider to add a custom domain

Let’s start.

Step 1 – Setting up a server and database

Your very first step should be to setup a droplet instance where your project would live. With DigitalOcean, it is straightforward to boot a droplet. We cover this in the video above, but DigitalOcean docs do a great job in telling how to setup a simple droplet. Some important points:

You may want to choose your configuration as lowest (1vCPU/1GB/25GB SSD at $5/month) if you want to save money.

Once the server is generated, SSH into your server and setup your project. You can do this by git clone command if your project is pushed on GitHub or any public git repository.
Although you may install a MongoDB server on your instance itself, it wouldn’t be a bad choice to use a managed MongoDB server from DigitalOcean.

Once you setup managed this database from DigitalOcean, you would receive a MongoDB connection string that should be used to connect to your production database.

Step 2 – PM2 for Node.js

The next step is to install PM2 globally and use it to start Node.js server instead of regular node index.js. This is because PM2 would respawn your crashed Node process, maintain logs and would give you a nice UI to see all this data.

To install pm2 globally, write:

yarn global add pm2

# or

npm i -g pm2

This would install pm2 globally. All you have to do after this is to run pm2 start index.js where index.js is the name of your file that starts your server at a port number.

Step 3 – NGINX for TLS termination

Node.js is good at a lot of things, and we should try to do only those things with Node.js. TLS termination is better handled by NGINX so that our Node.js process can run business logic. Also, having NGINX handling the TLS termination makes it simpler to integrate it with certbot for HTTPS certificates.

Installing nginx is straightforward as it is available on most linux package managers. In case of apt, you can run:

sudo apt install nginx

This sets up your NGINX server and also starts it on port 80. This means, now if you visit your machine IP address, you will see a “welcome to nginx” page:

The next step is to go to /etc/nginx/sites-available and edit the default config file. Note that this path may change depending on what OS you’re using NGINX on. The above path is for Ubuntu based systems.

In that file, you have to add a proxy_pass block to pass all traffic from NGINX to your Node.js process running under PM2. Here you have to check on what port you have started your Node.js process. Ideally it should be some port > 1000.

In my case, we proxy_pass the traffic to localhost:1337 because that’s where our Node.js app is running.

This setup should be enough for your app to work without HTTPS and a domain name. Visit your IP address and it should be working.

Step 4 – Adding a domain name

The next step is to add a domain name to your project. This involves you to login into your domain registrar and go to the DNS section. We want to add a A record in the DNS.

A record tells your visitors where the IP address for that domain is located. Create a new A record for your root domain and point it to the IP address of your instance.

Step 5 – Getting HTTPS certificate

To get an HTTPS certificate after your domain is linked, you have to install a tool called certbot that contacts LetsEncrypt and issues you a free HTTPS certificate. Here’s a complete guide on how to install certbot and link it with NGINX on your system

Once done, your final website should be ready to rock and roll! Distribute your website link in your friend groups and let the traffic roll in

Watch the full video tutorial here. All the best!