Hosting the Todos example on Heroku

Series Overview

<< An Example Backbone/Parse.com App

The Todos example was extremely easy to get up and running with Heroku.  Even though this is a CoffeeScript based server running with Node.js, Heroku can support the application.  I won’t go over the install process for the pre-requisites (Git and Heroku) because it is easy to find on the web.  Assuming they are installed, deploy the app like this:

Pull down the Todos example

> git clone git@github.com:BrianGenisio/todos-parseback.git

Create the Heroku app

> heroku create -s cedar yourappname
Creating yourappname… done, stack is cedar
http://yourappname.herokuapp.com/ | git@heroku.com:yourappname.git
Git remote heroku added

Create file: package.json

{
  "name": "yourappname",
  "version": "0.0.1",
  "dependencies": {
    "express": "2.5.0",
    "coffee-script": "1.1.3",
    "restler": "0.2.1"
  }
}

Install the packages locally (for testing)

> npm install

Configure and test the app

> cp config.coffee.example config.coffee

Edit config.coffee per the steps in the previous article and run it:

> coffee proxy.coffee

Point your browser to http://localhost:3001 and play.  Everything should be working right now locally.  Next, lets get it up on Heroku.

Create file: run.js

# Necessary because Heroku can’t run CoffeeScript directly
require("coffee-script");
require("./proxy.coffee");

Create file: Procfile

web: node run.js

Deploy to Heroku (via git)

> git add .

> git commit -m "Adding Heroku files"

[master 0154577] Adding Heroku files

3 files changed, 12 insertions(+), 0 deletions(-)

create mode 100644 Procfile

create mode 100644 package.json

create mode 100644 run.js

> git push heroku master

Counting objects: 23, done.

Delta compression using up to 4 threads.

Compressing objects: 100% (21/21), done.

Writing objects: 100% (23/23), 102.20 KiB, done.

Total 23 (delta 1), reused 17 (delta 0)

—–> Heroku receiving push

—–> Node.js app detected

—–> Fetching Node.js binaries

—–> Vendoring node 0.4.7

—–> Installing dependencies with npm 1.0.94

       restler@0.2.1 ./node_modules/restler

       coffee-script@1.1.3 ./node_modules/coffee-script

       express@2.5.0 ./node_modules/express

       ├── mkdirp@0.0.7

       ├── mime@1.2.4

       ├── qs@0.3.2

       └── connect@1.7.3

       Dependencies installed

—–> Discovering process types

       Procfile declares types -> web

—–> Compiled slug size is 3.4MB

—–> Launching… done, v4

       http://yourappname.herokuapp.com deployed to Heroku

To git@heroku.com:yourappname.git

* [new branch]      master –> master

Try it out

> heroku open

Opening
http://yourappname.herokuapp.com/

That’s it!

Seriously.  That was easy.  Now the app is hosted.  Heroku and Parse.com do all the dirty work for you.



6 Responses to “Hosting the Todos example on Heroku”

  1. [...] Working with Backbone.js and the Parse.com Proxy Hosting the Todos example on Heroku [...]

  1. James Ward says:

    Dude! You totally rock! I was just going to start learning Backbone.js today. So timely! Now I have a great guide to follow. :)

    Thanks!

    -James

  2. admin says:

    Hey James! This series assumes you already know Backbone.js but you don’t want to build your own back-end rest server. You probably won’t learn a ton about Backbone in this series… except for some hacks I needed to make in order to adapt the Backbone REST flavor with the Parse.com REST flavor.

  3. Diogo says:

    Building a website in js connected to Parse, will expose the DB, letting it open to anyone who checks the JS source ?
    Anyone could get my credentials then ?

  4. admin says:

    @Diogo: No, the credentials sit in the Node.js proxy that is pushed to Heroku, so the credentials are on the server, not in the JS. That, of course, wouldn’t stop someone from hitting the REST proxy, but you could fix that with CORS.

    However, this entire example has been deprecated. Parse.com has created a supported JS API that you can use… it is based off of Backbone. Not sure how they deal with the credentials, though.

Leave a Reply