Deploying Ember application with Addon to Github Pages

Question

My organization is using Ember addons to develop a set of shared components between our applications. Let's call this repository app-components. Currently the components application's primary responsibility is to distribute CSS, fonts and images.

We are also building a living styleguide that will ingest our shared components and present them in a neutral way for developers to reference. Let's call this repository app-styleguide. Our goal is to deploy app-styleguide using ember-deploy to deploy this solution to Github Pages. The url follows this pattern:

https://organization.github.io/app-styleguide/

When the app-styleguide application makes it to the gh-pages branch and is served as a webpage, all of the fonts and images being delivered by app-components are giving us a 404. I have referenced a handful of different solutions to this problem, but I keep coming across the same solutions that we have tried.

I have tried using the following two ember addons that automate the deploy to github pages:

In the end we went with a vanilla ember-cli-deploy solution, as those two addons are quite old...

I have followed the instructions here to add rootUrl andlocationTypeproperties to ourenvironment.js` file, which has not worked:

https://github.com/ember-cli/ember-cli/issues/398

Our environment.js file looks like this:

if (environment === 'production') {
    ENV.rootURL = '/app-styleguide';
    ENV.locationType = 'hash';
  }

And our requests continue to not add app-styleguide to the request URL's for assets coming from the Addon. Here is an example of a failed request from the Chrome DevTools Network tab:

Request URL:https://organization.github.io/assets/images/thumbnail-icons/person.svg
Request Method:GET
Status Code:404 Not Found

As you can see, app-styleguide is not added to the request.

Any help is greatly appreciated!

Where do you reference the `person.svg`? – Lux Jul 10 '17 at 20:36 — Lux, Jul 10 '17 at 20:36

score 1 · Accepted Answer · answered Jul 10 '17 at 21:18

I was able to receive some help over on the Ember Slack Community (special thanks to @alexspeller). It turns out I needed to update a couple of settings in the fingerprinting of assets.

Using the included broccoli-asset-rev library I had to modify my ember-cli-build.js to include the following:

var app = new EmberApp(defaults, {
    fingerprint: {
      extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg', 'ttf', 'woff'],
      prepend: '/app-styleguide/'
    }
  });

I needed to update the options to account for SVG, TTF, & WOFF, as well as the proper prepended url segment.

You can read about the functionality here: https://ember-cli.com/asset-compilation#fingerprinting-and-cdn-urls

Available options: https://github.com/cibernox/broccoli-asset-rev?files=1#options

Deploying Ember application with Addon to Github Pages

1 Answers1