Search code examples
ember.jsember-cligithub-pagesember-addon

Deploying Ember application with Addon to Github Pages

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:

  1. https://github.com/poetic/ember-cli-github-pages
  2. https://www.npmjs.com/package/ember-cli-deploy-gh-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:

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!

Solution

  • 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