Overview

We’ve all seen countless tutorials on Udemy or Youtube where they teach you how to create MERN apps and every single one of them deploys them to Heroku. I have nothing against Heroku, it’s a great platform if you want to deploy your personal projects quickly. But when it comes to large scale real-life projects, Heroku is not what is used. The problem with these tutorials is that they give you very unrealistic expectations and don’t prepare you for the real world.

Most companies use AWS EC2 to deploy their web apps and it is wildly different from platforms like Heroku but I understand that can be very expensive and complicated for many developers out there. So instead, we are going to talk about a similar IaaS platform called Digital Ocean. It is much cheaper, more User friendly and actually looks good (We all know AWS isn’t the best-looking thing out there). So in this article, I’m going to walk you through step by step how to deploy your MERN apps to Digital Ocean. You can sign up using this link to get $100 free credit.

I recently encountered a problem while hosting my app on Digital Ocean. I was able to host it but every time I made changes locally and pushed them to my GitHub repository, I had to manually go over to my server (they are called droplets in Digital ocean) and pull changes and rebuild my app and restart my app. Now, I turned to the internet for help with automating deployment but I was surprised to find absolutely no resources about how to set this up. That is why I wanna share my solution with all my fellow developers.

Step 1

Navigate to your Github repository settings and click on “Add webhook”. Github webhooks are nothing but post requests to a specified URL based on certain events that take place.

Step 2

Fill in all the details to create the Webhook. The Payload URL is the URL to which Github sends a POST request with all the details of the event that took place in the repository. We’ll create this route in our app in just a minute. Set the Content-Type to application/json. The Secret is a password that you can set so that when we receive the POST request, we can verify it’s coming from our webhook and not spammers or bots. Set the webhook to work for Just the push event.

Step 3

Create a new post route called /redeploy in your app.js root express server file that will listen to POST requests from the Webhook we just created and validate the Secret, we set for that Webhook using a validateSecret middleware function. We will need to install an npm package crypto to help validate our hashed Secret. We will also need to require a native node package called child_process that helps us run bash commands from our route.

Step 4

We need to create a pm2 config file in the root directory called ecosystem.config.js and paste the following code:

And in your droplet terminal, run the command pm2 start ecosystem.config.js to run your app in production with the above configuration.

Since this is not a beginner tutorial, I’m assuming the code is pretty self-explanatory. Basically, this route will pull new changes from our app repository, run your custom post-deploy script and restart our app with a 5-second delay in the droplet every time we push changes to our remote repository.

Step 5

We have one last thing left to do. If you happen to have cloned your Github repository over HTTP(S) into your Digital Ocean droplet, the shell asks for your Github username and password every time you perform any git commands. This would essentially fail the script we wrote above because we would manually have to type in our username and password. In order to avoid this problem, we have to tell our droplet to store our credentials in a config file using this command

That’s it, folks! I hope you enjoyed this tutorial saw how with just 44 lines of code, we were able to avoid being at the mercy of PaaS platforms and save lots of money by creating your own free CI/CD pipeline.