Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 219
kushdilip Avatar asked Jun 25 '14 08:06

kushdilip


People also ask

How do I deploy Ember app?

To deploy an Ember application simply transfer the output from ember build to a web server. This can be done with standard Unix file transfer tools such as rsync or scp . There are also services that will let you deploy easily.

What is Ember CLI build js?

The Ember CLI (command line interface) is the official way to create, build, test, and serve the files that make up an Ember app or addon. Many things have to happen before a web app is ready for the browser. Ember CLI helps you get there with zero configuration.

What is Ember CLI?

Ember CLI, Ember's command line interface, provides a standard project structure, a set of development tools, and an addon system. This allows Ember developers to focus on building apps rather than building the support structures that make them run.


2 Answers

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.)

like image 91
Michael Avatar answered Sep 22 '22 09:09

Michael


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.

like image 35
Oliver Avatar answered Sep 20 '22 09:09

Oliver