Deploying your Node.js application using Heroku & GitPod
Tags: heroku, node, gitpod, github
Published: 2020-04-10 23:01:06

I came up with a simple interactive web application, built using Node.js and JavaScript. I chose to do build a web app for a BookStore. The data for the books-list was stored in XML and all the code was written in [GitPod](https://www.gitpod.io/), an online IDE for GitHub inspired on VSCode. I know right... super cool! Perfect for those occasions when an online IDE is the answer but [Repl.it](https://repl.it/~) isn't enough. The best thing is that GitPod is also integrated with GitHub, so in case you fancy running a GitHub repo straight from the browser, simply add gitpod.io# on the beginning of URL, right before the *https://* and VOILA! Next thing is you have a virtual machine running with the git repo that lives on that URL on a VisualStudioCode-like environment. Good stuff!

Later on, we were required to deploy that application to a webpage using Heroku. I decided then to write this very simple post, just as a reminder of the easiest way to deploy Github applications to Heroku. So let's start already!

So, for starters, we are going to use this link
[https://gitpod.io#https://github.com/Code-Institute-Org/gitpod-heroku-install](https://gitpod.io#https://github.com/Code-Institute-Org/gitpod-heroku-install)
Which opens a Heroku template page on GitPod. [Note the *gitpod.io#* inserted on the start of the URL as mentioned before.]

When the virtual environment on GitPod page is ready, type
```
heroku -v
```
on the terminal to check Heroku's installed version on the template.

That command should return something like this:
![Output of 'heroku -v' command](https://dev-to-uploads.s3.amazonaws.com/i/1nstf33n9r41gh76nc7e.png)
***
The next step then is to select your Node.js application on GitHub and clone it to your Heroku template. On GitPod's terminal type
```
git clone git@github.com:laisbsc/BlackBooksBookstore.git
```
**NOTE:** If copied from SSH, GitPod won't clone your repo due to access rights. Make sure to use 'Clone with HTTPS' in this case. More on the topic [here](https://help.github.com/en/github/authenticating-to-github/error-permission-denied-publickey).
***
Now, you're repository must be looking something like this

![Screenshot of my VSCode showing the locally cloned files](https://dev-to-uploads.s3.amazonaws.com/i/mwuqrtxh48y1b2ryrutx.png)

Drag all the files out of the application folder and delete the (now) empty folder from the workspace. Your files should be looking somehow like this now:


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a9dhu0dmr5u1l70ktcfo.png)

Once that is done, go back to terminal and type
```
$npm init
```
After saying "yes to all".

![colourful-flashy YES gif](https://media.giphy.com/media/MViBB0m1A0TehqSeQA/giphy.gif)

That will create a **package.json** file on the workspace. Which should be looking like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5dyh3ro8fgezcj2i75hw.png)
Inside that file, on the first JSON block statement, you will erase the line that reads 
```
test
```
and replace it by 
```
"start": "node app.js"
```
That will tell Heroku the default language for the application that is being deployed.

Next step is to install all modules declared at the start of the *app.js* file. Basically all that appends the 'require' key-word. On terminal, type
```
npm i <list of required modules>
```
For me this list looked like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5xq0wrtksqxij62g5ng9.png)

Now that's done, it's... DEPLOYMENT TIME!!! \o/ \o/ \o/ 

1st step into deployment is quite complex [*sic*]. Go to terminal and type
```
'heroku login'
```

I know, complexity level 1000! #sarcasm ¬¬'

If you have a Heroku account, GitPod will open an *in-loco* browser window and tell you when you're logged in. In case you don't have a Heroku account, just go ahead and make one. I will wait here. Now, email to confirm you are actually yourself, go back to the terminal and you should be all logged in now.
**NOTE:** in case your browser starts acting out [Chrome trolled me for a bit on this step], try a new window and be patient, my little Padawan! We're almost there.
When you see your email on green lettering written at the terminal, it's time to open a smile.
***
Next command:
```
heroku create
```
Which creates the app (as well as the git remote) and assigns a random generated URL to it. That will be the URL for your deployed app.
Now, go ahead and do the git magic in there:
```
git add *
git commit -am "first commit Heroku app"
git push heroku master (or whichever branch name you'd like to give)
```
And BOOM! 💥💥💥
WE GOT OURSELVES A DEPLOYED APPLICATION ON HEROKU!!!

![Celebratory dance gif](https://media.giphy.com/media/ddOokp54QECd2/giphy.gif)

For this specific case, this is how it's looking now.
![Screenshot of the deployed app on the web browser](https://dev-to-uploads.s3.amazonaws.com/i/2owhied1iqulaha4jkto.png)

And this is the link for the original Git repo if you're interested. It's not really tidy so check it at your own risk.
{% github laisbsc/bookshopWebApps no-readme %}

Finally, if you would like to have a look what came out of the makings of this post, have a look in [here](https://frozen-atoll-19559.herokuapp.com/), it's my randomly-generated Heroku link.

I hope this post could help anyone who is deploying a GitHub app to a webpage using Heroku and GitPod.
If you have any questions, feedback or anything you'd just like to tell me, leave a comment or ping me on @laisbsc. If you're running this tutorial and got stuck, message me! I'm more than happy to [try and] help.

Good luck. And happy coding 🖥️