My Introduction to Heroku

December 2017

How I deployed an existing node app to Heroku thinking it was a lot harder than it actually was!

So recently I had to push some pre existing HTML prototypes up to Heroku. The prototypes use express.js to create a server and generate http routes as well as a swigjs template engine and grunt.js to generate its assets from SASS to CSS. All the tasks and setup were already in place in the prototype application before I began looking at how to deploy it to Heroku.

So firstly I created my own account with Heroku and then I read the excellent getting started guide on the Heroku website. I chose my application server (node.js) and then I went through each of the steps listed is the guide.

I made some useful notes from the getting started guide to help me familiarise myself with Heroku and the common tasks I thought I would need to do.

// Open app
$ heroku open

// List running apps
$ heroku ps

// Turn server off
$ heroku ps:scale web=0

// Turn server on
$ heroku ps:scale web=1

// View logs
$ heroku logs --tail

// Help
$ heroku help

I then set about getting my own app deployed to Heroku using $ heroku create. By default Heroku will generate a random name for your app, this name is what is used to identify the app in Heroku and also forms the url of your generated app for example https://random-biscuit-monster.herokuapp.com.

I needed a custom app name so created my app as so:

$ heroku create gazjoy
Creating ⬢ gazjoy... done
https://gazjoy.herokuapp.com/ | https://git.heroku.com/gazjoy.git

In the background this creates a new git remote called heroku so it was then a case of deploying the app to Heroku.

$ git push heroku master

In your terminal you then see how Heroku runs its tasks to build your app. Your output should look something like mine:

This tells us a few things, firstly Heroku is smart enough to work out what needs to be done. Once a node.js app is detected Heroku knows how to deploy it, just like running your app locally. Secondly it lets us know that the build is being cached. This means further deploys in the future will be quicker and will only install any new modules.

Usefully caching can be disabled if needed by running:

$ heroku config:set NODE_MODULES_CACHE=false

Another thing this console output shows us is whether the build was successful or not, luckily on this occasion mine was! Once successful you can then make sure your app is running by scaling it.

$ heroku ps:scale web=1

Gotchas

For me it didn’t all go swimmingly first time around. The first problem I had was an error during my first deployment to Heroku. After some Googling of my error I found that by default Heroku runs NPM in production mode. I knew there was an issue locally with my production mode too. Luckily Heroku provides us with a command to disable this.

$ heroku config:set NPM_CONFIG_PRODUCTION=false

This command makes Heroku install anything listed in the “devDependencies” inside your app package.json file. After this I then reset my repository by running.

$ heroku repo:reset

This clears out your remote repo ready for a fresh new deploy. You need a plugin for this though so get it by running.

$ heroku plugins:install heroku-repo

So in my case I was on a local branch called develop, when I deployed my app to Heroku using $ git push heroku master it pushed everything which was on my master branch, unfortunately for me this is not what I wanted as the master branch was out of date quite considerably. So how do we deploy a local branch to a remote Heroku instance? Well I found the perfect git command to do this again on the excellent Heroku documentation centre.

$ git push heroku develop:master

This command is telling git to push your local develop branch to a remote called heroku on the master branch. Once that succeeded I had myself a fully up to date functioning app.

Appy days. 🌈