Deploy an Ember.js app on GitHub Pages with TravisCI

README.md

Ember.js: Deploy your app on GitHub Pages with TravisCI

You can use Travis CI to deploy your Ember app to GitHub Pages after a successful build.

Using TravisCI over ember-cli-github-pages has the advantage of automatically deploying the app for every change pushed to the master branch.

Modify your .travis.yml file

For a minimal configuration, update your .travis.yml file:

# .travis.yml

# ...

script:
  - npm run lint:js
  - npm test
  - npm run build -- -prod

deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_TOKEN
  keep-history: true
  on:
    branch: master
  target_branch: gh-pages
  local-dir: dist
  verbose: true

We added two thinks here:

• The build command npm run build -- -prod to the script section to build the application.
• Configured TravisCI to deploy your application build files to GitHub Pages after a successful build.

Note:

Baiscly TravisCI will push your build from the dist folder to the gh-pages branch. For more information about the configuration check the documentation.

If you are building:

• You are building your user site, for a repository name: <user>.github.io
• You are building an organization site, for repository that's named <organization>.github.io

You will need to publish your application source files from master, so you will have to adjust your workflow and keep development in another branch (named develop) and publish publish your application to master.

Update your deploy section from .travis.yml to reflect the changes:

# .travis.yml

# ... 

branches:
  only:
    - develop
    
# ...

deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_TOKEN
  keep-history: true
  on:
    branch: develop
  target_branch: master
  local-dir: dist
  verbose: true

Add a GitHub personal access token to TravisCI

You will need to generate a personal access token with the public_repo or repo scope (repo is required for private repositories).

After you generate a personal access token add it to TravisCI as an environment variable named GITHUB_TOKEN. You can do this from: Settings > Environment Variables.

Change app’s rootURL

You can skip this step if:

• You are building your user site, for a repository name: <user>.github.io
• You are building an organization site, for repository that's named <organization>.github.io
• You are using a custom domain

You need configure your app to be deployed to https://<user>.github.io/<repository-name>. That means, our app’s rootURL is /<repository-name> (and not /, which is default in a new Ember App).

Update your config/environment.js file:

// config/environment.js

// ...

if (environment === 'production') {
  ENV.rootURL = '/<repository-name>/';
}

That’s it. Now push a new change to your master branch (or develop branch) and your ambitious app will be build and publish to GitHub pages.