Nepal on Rails

millisami's rants!

Deploy Emberjs App on Heroku

Updated (2014-03-01) due to recent changes into Tapas with Ember

Lets say that your app is now in deployable phase and want to do a quick deploy. The Tapas with Ember brunch has a section on deploying using rubygem Mina. But that deploy method needs a VPS which you might get it later, but not now. So, in the quest of a simple, quick and buck-free way, I figured out a way to deploy it on Heroku.

Lets whip-up a demo app using brunch:

brunch new gh:mutewinter/tapas-with-ember deployapp
28 Feb 17:48:25 - log: Cloning git repo "git://github.com/mutewinter/tapas-with-ember.git" to "deployapp"...
28 Feb 17:48:40 - log: Created skeleton directory layout
28 Feb 17:48:41 - log: Installing packages...
.....

Initialize the git repo and commit it.

cd deployapp
git init .
git add .
git commit -m 'Initial commit'

Since its a static javascript app, we’ll use Node.js to serve our app. For this, we will use express to serve the app.

npm install express --save

This will install the express and bower packages, their dependencies and updates the package.json file. As of this commit, handlebars is moved to be managed by bower due to this issue.

Then lets create the server directory and create the server/server.coffee file.

mkdir server
server/server.coffee
1
2
3
4
5
6
7
8
9
10
11
express = require('express')

app = express()

app.configure ->
 app.use(express.logger('dev'))
 app.use(express.bodyParser())
 app.use(express.static('public'))
 app.use(express.cookieParser())

app.listen(process.env.PORT || 5151)

Now, we need to add a "postinstall": "bower install; cake build" configuration inside scripts section in package.json file.

package.json
1
2
3
4
5
6
7
...
"scripts": {
  "start": "cake server",
  "test": "./node_modules/.bin/testem",
  "postinstall": "bower install; cake build"
},
...

When heroku starts to deploy the app, it will invoke the command cake build that compiles the emberjs app and place it into the public folder. And the 5th line of server/server.coffee file configures the express server to load the apps file from this public folder.

We need to configure the heroku to run this server/server.coffee file. So, we will create a Procfile in the root of the project.

Procfile
1
web: coffee server/server.coffee

Lets commit the changes.

git add .
git commit -m 'Setup for heroku deploy'

Now we’ll create the heroku app. For the following heroku command, you’ll need to install the Heroku tool belt first.

heroku apps:create deployed-ember
Creating deployed-ember... done, stack is cedar
http://deployed-ember.herokuapp.com/ | git@heroku.com:deployed-ember.git
Git remote heroku added

The above command creates the app named deployed-ember and setup the git remote handle named heroku. Actually, I tried with the name deployapp, but it was already taken, so had to opt in for deployed-ember. You can name-the-app anything you want unless its already taken. The app is now ready to be deployed with the single git push command.

git push heroku master
....
....
-----> Launching... done, v5
       http://deployed-ember.herokuapp.com deployed to Heroku

And if all went well, then the app should be hosted at http://deployed-ember.herokuapp.com

At this time of writing, I’ve noticed that the CSS design of the app in development and on Heroku has some differences. Or we might say: Heroku style bug. This happens because Heroku’s node buildpack puts node and npm in the vendor directory. After the discussion on this thread, came up with the following fix.

Open up the config.coffee file at the project root and change the stylesheets section to the following:

config.coffee
1
2
3
4
5
  ...
  stylesheets:
    joinTo:
      'styles/app.css': /^(app|bower_components|vendor\/(?!node))/
  ...

Now you commit this change and re-deploy the app:

git commit -am 'Heroku style bug fix'
git push heroku master

and you shall see both the development and Heroku build is alike.

For the reference, I’ve pushed this repo to Github as well.

Comments