How do I deploy Ember.js app developed with ember-cli on github pages?

Question

I have successfully created a small application using ember-cli. I tried pushing it to gh-pages branch of my github repo but it shows error in browser console

Answer 1

Since December 2014 there is also an ember-cli addon for this.

First make sure to have set modulePrefix in config/environment.js to your repo's name on github. E.g., for https://github.com/username/my-cool-repo it should be modulePrefix: 'my-cool-repo'.

Then follow these instructions:

1. Install the addon.
   $ ember install:addon ember-cli-github-pages

2. Commit the changes made by the addon.
   $ git add . && git commit -m "Installed addon ember-cli-github-pages"

3. Create the gh-pages branch with only the necessary files.
   $ git checkout --orphan gh-pages && rm -rf `ls -a | grep -vE '.gitignore|.git|node_modules|bower_components|\.\/|\.\.\/'` && git add . && git commit -m "Initial gh-pages commit"
   

4. Switch back to your source branch (most likely master).
   $ git checkout master

5. Build your ember app to the gh-pages branch.
   $ ember gh-pages:commit --message "Initial gh-pages release"

6. Push everything (or at least the gh-pages branch) to github.

(This was different for ember-cli <= 0.1.4 and might change again in the future. Make sure to visit the addon's readme.)

Answer 2

As the comments already say: change the baseUrl in config/environment.js to the name of the GitHub repository you are pushing the app to. For example:

Your GitHub respository is called myEmberApplication and resides in

https://github.com/yourUsername/myEmberApplication.git

then the URL to this project's gh-pages would be

https://yourUsername.github.io/myEmberApplication

So in your case you have to change the baseUrl from / (default) to /myEmberApplication.

The reason why you have to do this is because ember-cli adds the <base> header to your index.html file.