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

Uncaught ReferenceError: require is not defined 

loading of vendor.js and vendor.js files from dist/assets is also failing.

I'm not able to run standalone ember app from dist folder in local machine as well, same errors.

has anyone tried it. if yes how to do it correctly?

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.