Deploying and hosting node.js applications on Heroku

This blog has been long overdue. I wrote this basic Covid19 dashboard application over a year ago (Application is still live on heroku at: https://covid19-dash-sl.herokuapp.com). Too bad I couldn’t write a blog on it. Anyways, I didn’t think it would be useful cause I was under the impression that Covid19 will be over before we know it. But, it has been over a year now and here we are 😞

So about the application, I wrote it in Javascript (used node.js for the backend and react.js for developing the frontend). You can find the code to the application in here. During the initial period of the pandemic in Sri Lanka, the health promotion bureau of Sri Lanka exposed an API. By calling this API, we can get statistics on the Covid19 situation in Sri Lanka and the world. You can find the detailed API information here. Apparently, what I did here was recursively query this API and display them in the dashboard. In this blog, we will look at how we can run this locally, deploy it on Heroku and some of the benefits of the Heroku.

Running it locally.

Firstly, lets have a look on how we can run this simple application locally. Ensure that you have fulfilled the below prerequisites before we begin. Click on the “Expand section, ‘Running it locally'” link below to view you can run this locally.

Deploying it to Heroku.

Before, I show you how we can easily deploy our application to Heroku, Let me write a bit about it. So Heroku allows you to deploy a wide range of applications(node.js based, python based, ruby based etc.) for FREE. This is great because we can use this to showcase our work to the world. In terms of normal workflow we would work on staging and promote it to production when it is ready. We could also set up an additional non-production environment and copy existing production to that before we do this promotion. This means the previous production environment is in a non-production after the promotion. So you can revert the change by swapping once again, if something was to go wrong unexpectedly. Here, you get Blue-Green deployment like setting(but not exactly Blue-Green deployment).

With that we will get started on the deployment. You may collapse this section if you want to view the previous section more clearly.

1. Clone the application from GitHub, create a new branch and add your changes

To start off things, I cloned my git repository and setup my application locally. If you want to know how to do that, check the previous section of the blog (Running it locally – Click on the expand section to view it). Next I created a new branch and switched to it. Command is down below.

git checkout -b stage

I noticed that the previously when I made the application, the UI was less serious than it should be. (Previous UI screenshot available on previous section). So I changed some colours to elevate the look and feel of this (Edited App.scss). Now it looks like this.

Looks pretty professional huh? 😝

2. Push changes on new branch to GitHub

Next, publish changes on new branch to GitHub. (You might want to delete the newly created node_modules directory before doing this).

git status #Verify the files to be added and to which branch 
git add -A #Add all changes if no issues
git status #Verify all required files were added
git commit -m "Created branch - stage. Added required changes" #Commit the changes
git push -u origin stage #Create and push to the new branch "stage" of the Original remote repo 
git status #Verify if your branch is up to date with origin/stage

3. Setup the deployment in Heroku

After that, log in to Heroku or Create an account if you already don’t have one. Steps for creating an entirely new application and creating a new application in a new environment is almost exactly the same. So here, we will look at creating a new application in a new environment.

First, go to your application and select add App and then click on create new. Then follow these steps in the image.

Next, click on the name of the newly created application.

Switch over to the settings tab and click on the show config vars button.

Next, scroll down to the build pack section and add the following build pack. This is used to build our application. Save changes.

https://github.com/mars/create-react-app-buildpack.git

Now, click on the deploy tab and select the connect to Github option. Click on the connect to GitHub button at the bottom of the page. You will be asked to sign in to GitHub and authorize. Click on authorize at this point. After that, you can search for your repo and click on connect.

Lastly, scroll down to manual deploy, select the branch and press deploy. You can enable automatic deploy if you want. But at this point I am only deploying manually.

Now you can sit back and watch the progress. Or go grab a coffee or go for a walk 😄

Finally it will show that you have completed successfully.

https://covid19-dash-sl-stg.herokuapp.com/

Bonus: Troubleshooting deployments

Sometimes, things do not go to plan. In these cases, we will have to troubleshoot and fix issues with deployments.

Check out my other featured content at: Featured – Take On Devops