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'
npm install express --save
Then lets create the server directory and create the
1 2 3 4 5 6 7 8 9 10 11
Now, we need to add a
"postinstall": "bower install; cake build" configuration inside
scripts section in
1 2 3 4 5 6 7
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
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.
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/ | email@example.com:deployed-ember.git Git remote heroku added
The above command creates the app named
deployed-ember and setup the git remote handle named
Actually, I tried with the name
deployapp, but it was already taken, so had to opt in for
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
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:
1 2 3 4 5
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.