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.
Prerequisites.
You need to have the following installed.
- Node.Js
- Yarn (This is a package manager for node)
- Git bash (If on windows. It comes preinstalled in Linux most of the time)
Assuming, you have the necessary software listed above installed and configured, let’s get started.
- Open up a CMD/ Powershell / Linux Terminal and
CDto a directory of your choice and clone the repository from Git.
git clone https://github.com/ihsanizwer/covid19-dash-sl.git
CDin to the covid19-dash-sl directory and run the following command from a CMD/ Powershell / Linux Terminal. This will install the dependencies of this application by reading thepackage.jsonfile.
yarn install
- Now, run the below command. Upon running this command, you would be prompted to allow the port 3000 from the windows firewall. Click on yes. Suppose there are any errors you would be able to view them from the console.
yarn start
- Open up a browser and view the application by visiting
http://localhost:3000. At this point, you are able to do changes to the application(source code) and view the changes in real time by opening the above URL in a browser.
- (Optional) On rare occasions, you may see an error like this: Node <package> does not yet support your current environment. In such cases, you will have to start over by cloning the repository to a new folder. Then instead of the
yarn install, you can manually install the packages via node using the below command. Finally you can runyarn startand view the application from the browser withhttp://localhost:3000.
npm install react-scripts axios node-sass react-bootstrap bootstrap react react-dom
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.
Bonus: Troubleshooting deployments
Sometimes, things do not go to plan. In these cases, we will have to troubleshoot and fix issues with deployments.
As you can see my builds aren’t perfect. However, in most cases, you will see the solution to your problem in the logs itself. To view this information, go to the activity tab.
Check out my other featured content at: Featured – Take On Devops