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 installandbower 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.jsto 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.jsandajaxfiles import theapiHostlink.
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
masterbranch. - Create a
gh-pagesbranch locally viagit checkout -b gh-pages. - DO NOT PUSH TO GH-PAGES YET
- Remove
/distfrom.gitignoreby adding a '#' before it. - Add and commit this change. (
git add dist/)why? - Run
ember build --environment=production. git statusand add all files changed (mainlydist/) and some other changes; Thencommitall 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 [email protected].
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent