Hosting with Heroku

So Yesterday I was putting together a small portfolio of the work that I've done and wanted to put this on a Node.js driven (because why not!) application with an Angularjs front end.

I was searching around for any free hosting and came across Heroku. Heroku is a platform as a service (PaaS), which means that it gives you an environment that i can push code (via Git) and have some simple configuration but not have to worry about the infrastructure at all. In short it's something that works straight out of the box and is less work for me!

Anyways Heroku have a great guide to getting this working (https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction). They say its very straight forward (which it is), and very easy (which it is).

So what is this blog about? This is (mainly) for me, to help remind me of the small but incredibly studid things that I did to make this entire experience last an entire afternoon.

So I've got a small angular web application running nicely on my laptop. Whoop!

Now lets get a node server put and running so that my structure is like so:

client
~ index.html
~ favicon.ico
~ js
    ~ controller.js
    ~ service.js
    ~ app.js
server
    ~ app.js
    ~ routes.js
    ~ config
        ~ express.js

Very nice.

Its all running nicely on my local machine and I've managed to get it into my bitbucket account without a hitch. Now lets get this on to Heroku.

If you've had a look at the guide you have to install the toolbelt (which i had already installed) which enables you to login into your Heroku account and create/push applications to it via the terminal.

To login in to Heroku by entering heroku login

Heroku Login
Enter your Heroku credentials.
Email: 

and you'll recieve Authentication successful. when you finally get you're password right!

So, we've logged into Heroku and we have a kick ass application waiting to be created and pushed to heroku. This should be simple.

To create a heroku app heroku create. Now this will create an app but will give it a random name so I'll pass a name

heroku create dominictest
Creating dominictest... done, stack is cedar-14
https://dominictest.herokuapp.com/ |        https://git.heroku.com/dominictest.git

This is very easy. Now lets push the git repo to heroku using git push.

git push heroku master

but I get this error:

Counting objects: 13, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (7/7), done.
Writing objects: 100% (7/7), 959 bytes | 0 bytes/s, done.
Total 7 (delta 6), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Removing .DS_Store files
remote: 
remote:  !     Push rejected, no Cedar-supported app detected
remote: HINT: This occurs when Heroku cannot detect the buildpack
remote:       to use for this application automatically.
remote: See https://devcenter.heroku.com/articles/buildpacks
remote: 
remote: Verifying deploy...
remote: 
remote: !   Push rejected to dominictest.
remote: To https://git.heroku.com/dominictest.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to  'https://git.heroku.com/dominictest.git'

WHAT does that even mean!?

So after (quite) a few googles and SO searches I finally find that Heroku is looking for the package.json or a file called server.js so that it knows what buildpack to use (Node). I've only gone and ran npm init in the server folder and not the root.

I move the package.json and node_modules folder to the root and git push... again.

remote: Verifying deploy.... done.

Now I can navigate to the url and see my app!

So something has gone wrong. We can check the heroku logs with heroku logs

State changed from starting to crashed
State changed from crashed to starting
Process exited with status 1
Starting process with command `npm start`
...
npm ERR! missing script: start

Ok lets check the package.json file and check the scripts tag.

"scripts": {
    "test": "test"
  }

This will be reason then. Updated this with "start": "node server/app.js"

To cut this story a little shorter I first had "start": "node app.js" but for since app.js lives in the server folder I eventually changed it to that!

So lets get this thing push and running! git push....

But still I'm getting nothing but a rubbish error that missing script: start. Then i notice the build

remote: -----> Build succeeded!
remote:        └── (empty)

empty? Empty! Surely this should be building from my dependencies!

And then the last of the long list of errors is found. I've been using npm install <> --save-dev all morning. So my package.json has nothing but development dependencies in it and nothing for the production environment to build!

updated the package.json from "devDependencies": { to "dependencies": { and its all now working!