Web App Series Part 3: Using Heroku (Node.js and Windows)

Welcome back to my series for noobs. Previously in this series (not that it is following any particular logical order):

Heroku – what is it?

Heroku is a cloud-based service which allows you to deploy your website/app without having to worry about hosting things (servers, databases) yourself. It’s great for prototyping your apps, seeing what they look like and how they behave outside of a local server, and for seducing catwalk models. It can also be used for full on production sites…but this tutorial is just about the basic setup.

Why Should You Care?

Because if you’re building a web app, at some point you’ll want to show non-tech people early prototypes, or conduct user testing for small groups. You can’t get all these people to come and look at your development laptop or clone your github repo, so you need a way to host your app and make it available online. Cloud-based solutions like Heroku are an easy way to do this.

Pre-requisites:

Working knowledge of:

HTML5
Javascript
Node.js

The reason why I wrote this article is because, innocent and straight-forward as the Heroku documentation on getting started seems, if you are attempting to set it up on a Windows machine, the process is RIDDLED with gotchas. It’s almost as if they were like, hey guys, let’s just give all our Windows users the finger. It is so bad, that the first time I tried to deploy on Heroku I ended up switching to a different, easier cloud service: Node Jitsu who are easier to setup than Heroku, but they only do node.js.

Here is a breakdown of the gotchas in the documentation:

When you install the Heroku toolbelt, do NOT install it in the ‘program files’ directory. Directories with spaces cause errors further down the line. I don’t know why this is, but it is so.Instead, install to c:\heroku
Remember to add the correct information to the package.json file, as per the documentation example.
The documentation tells you to create a Procfile (to be clear, this should contain the name of whichever .js file starts the server) BUT, they do not make it clear that your Procfile should not have a ‘.txt’ extension. Make sure it doesn’t (sometimes this gets added sneakily but notepad++)
A little further on, the docs say to use foreman start but do not mention that you need to add C:\Program Files\Heroku\ruby-1.9.2\bin to your windows PATH. If you don’t know how to add things to your Windows path, make sure you Google it, because this comes up repeatedly when you are doing programming-related things. If you don’t add the ruby bin folder to your path, when you run foreman you’ll get a ”’foreman’ is not recognized as an internal or external command’ error.
Then a really nasty one is, after updating your path as per step 4, you still get an error (‘Bad file descriptor’) when you try and start foreman. I was stuck on this for a while, but was able to fix it by uninstalling foreman by doing gem uninstall foreman then reinstalling an earlier version gem install foreman -v 0.61.0. It takes a little bit of time to reinstall, don’t worry. Then test it, and remember to exit the command prompt once you’ve tested it (CTRL C)
The next gotcha, is you do the rest of the commands in Git Bash (the interface for git) NOT in the command prompt. This is not mentioned in the docs.
Do your heroku create, then you are instructed to do git push heroku master…This will not work if you have not added your ssh keys. See this stackoverflow answer To add your keys do heroku keys:add
THEN you should be able to push to heroku…does this mean you are homefree? No.
The docs next instruct you to do heroku ps, but this caused my app to crash as described in this stackoverflow answer. The solution is to remove your .gitignore file and push your files again to heroku…Heroku needs all the node.js dependencies.
As the stackoverflow answer in step 9 mentions, specify ‘npm’ under your .json file engines
NOW, heroku ps will work. However, I got an error because I hadn’t setup my PORT correctly in my node.js server file.Make sure you setup the listen command like so: .listen(process.env.PORT || 5000) where 5000 can be adjusted to your local port.

Finally, your web app is live! Phew.

For the working code, checkout this repo.