Use this guide to deploy Ember apps based on our Ember Template to GitHub Pages.
By the end of this, developers should be able to:
- Deploy an Ember app to GitHub Pages
- If you haven't already, run
npm install
andbower install
. - Make sure that everything is named consistently (i.e.
ember-template
-><% NAME OF YOUR CLIENT %>
). (Search viacommand+shift+f
) - You need to tell your Ember client to point to your deployed API. Update
config/environment.js
to follow below:
-Note that if you do not see the apiHost line, you will need to add it now as seen below.
module.exports = function(environment) {
var ENV = {
modulePrefix: '<% NAME OF YOUR CLIENT will be here %>',
environment: environment,
rootURL: '/',
locationType: 'auto',
apiHost: 'http://localhost:3000/',
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
}
},
Yes, user var
for ENV
. Do not use const
. Do not use let
.
AND FURTHER DOWN IN config/environment.js
:
if (environment === 'production') {
ENV.rootURL = '/<name-of-git-repo>';
ENV.locationType = 'hash';
ENV.apiHost = '<% replace with the URL to your deployed API %>';
}
- Now change the value of ENV.rootURL to be the name of your git repository; e.g. in the case of this repository it would be
ENV.rootURL = '/ember-deployment-guide'
-Note that rootURL
is NOT camelcase. For example, rootUrl
will not work.
- Now you have to ensure you have your
adapters/application.js
andajax
files import theapiHost
link.
In adapters/application.js
file:
import ActiveModelAdapter from 'active-model-adapter';
import ENV from '<% ember-deployment-example name %>/config/environment';
export default ActiveModelAdapter.extend({
host: ENV.apiHost,
...
...
...
});
IF/WHEN you have a services/ember-ajax
file:
import AjaxService from 'services/ember-ajax';
import ENV from '<% ember-deployment-example name %>/config/environment';
export default AjaxService.extend({
host: ENV.apiHost,
...
...
...
});
- Make sure all work is committed and working on your
master
branch. - Create a
gh-pages
branch locally viagit checkout -b gh-pages
. - DO NOT PUSH TO GH-PAGES YET
- Remove
/dist
from.gitignore
by adding a '#' before it. - Add and commit this change. (
git add dist/
)why? - Run
ember build --environment=production
. git status
and add all files changed (mainlydist/
) and some other changes; Thencommit
all changes.- Use "subtree push" to create a new gh-pages branch on GitHub composed only of the dist directory by using:
git subtree push --prefix dist origin gh-pages
- Go check to your github page site and ensure all requests are working and appear the same as on localhost:4200.
- Congrats, you've successfully deployed your Ember App! Zoey and Tomster are proud of you!
You just said remove, why am I adding again? This is because you just removed dist/
from the gitignore, which means that git is now aware of it and will track it if added. We want to track dist on the gh-pages branch, so we add and commit it here.
- All content is licensed under a CCBYNCSA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.