DEV Community

Laís Carvalho
Laís Carvalho

Posted on

Deploying your Node.js application using Heroku & GitPod

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
Enter fullscreen mode Exit fullscreen mode

on the terminal to check Heroku's installed version on the template.

That command should return something like this:
Output of 'heroku -v' command


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
Enter fullscreen mode Exit fullscreen mode

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

Screenshot of my VSCode showing the locally cloned files

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

Once that is done, go back to terminal and type

$npm init
Enter fullscreen mode Exit fullscreen mode

After saying "yes to all".

colourful-flashy YES gif

That will create a package.json file on the workspace. Which should be looking like this:
Alt Text
Inside that file, on the first JSON block statement, you will erase the line that reads

test
Enter fullscreen mode Exit fullscreen mode

and replace it by

"start": "node app.js"
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

For me this list looked like this:
Alt Text

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'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

And BOOM! 💥💥💥
WE GOT OURSELVES A DEPLOYED APPLICATION ON HEROKU!!!

Celebratory dance gif

For this specific case, this is how it's looking now.
Screenshot of the deployed app on the web browser

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 logo 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 🖥️

Top comments (3)

Collapse
 
silveiraleandro profile image
Leandro Silveira

If for some reason git push heroku master does not work, you can try git push heroku HEAD:master and celebrate when it works :)

Collapse
 
laisbsc profile image
Laís Carvalho

So good to see you around here! <3
This place is a party :P

Collapse
 
silveiraleandro profile image
Leandro Silveira

lol. Ic Ic
You guys are doing a great work here :^)