Deploying your Node.js application using Heroku & GitPod

#heroku #node #gitpod #github

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, 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 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
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:

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.

Now, you're repository must be looking something like this

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:

Once that is done, go back to terminal and type

$npm init

After saying "yes to all".

That will create a package.json file on the workspace. Which should be looking like this:

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:

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!!!

For this specific case, this is how it's looking now.

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.

laisbsc / bookshopWebApps

CA1 Interactive Web Apps - bookshop catalog on XML

Finally, if you would like to have a look what came out of the makings of this post, have a look in here, 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 🖥️