Ember addon to add files to root directory

Question

I have an addon which needs to copy a set of JS files from their bower directory to the Ember app's root of /dist (this is for scoping rules associated with service workers). I thought maybe I could use the treeForApp hook but while I'm getting no errors I'm also not getting the desired result.

The index.js is:

const Funnel = require('broccoli-funnel');

module.exports = {
  name: 'ember-upup',
  treeForApp: function(tree) {
    tree = new Funnel(tree, { include: 
      [ 
        'bower_components/upup/dist/upup.min.js',
        'bower_components/upup/dist/upup.sw.min.js' 
      ]});

    return this._super.treeForApp.call(this, tree);
  },

Note: I thought I might be able to solve this problem by simply copying the javascript files as part of index.js postBuild hook but while this DOES put the JS files into the dist folder's root it is not served by ember-cli's ember serve apparently if not pushed through one of it's build pipelines.

Stefan Penner has now pointed out the the dist directory is for developers to look at but serving is actually done within the tmp directory structure ... this explains why my "hack" didn't work.

have you tried importing with default blueprint `this.addBowerPackageToProject('upup.js')` ? — Bek, Dec 27 '15 at 05:19
@Bek `addBowerPackageToProject` is the first step to get the files into the bower_components directory. What I need to do from there is move two JS files from their initial location to the root of the application build(aka, the `/dist` folder). This is important because if they don't reside at the root of the distribution then the service worker will not have the ability to interact with all of the pages assets. — ken, Dec 27 '15 at 08:11
if you have `addBowerPackageToProject` already then you need to import them in main `index.js` via `app.import()` in `include` hook, have you tried that ? if not I will write that as an answer ? — Bek, Dec 27 '15 at 08:17
That *is* what you'd do to have be picked up by the appropriate build pipeline. So in the case of JS it would be built into the `vendor.js` file which resides in the "assets" folder. What I need to do is instruct Broccoli's Funnel to put my JS files into the root of `dist` — ken, Dec 27 '15 at 08:21
thanks for making it clear, will be interesting to hear answer for it too then :) — Bek, Dec 27 '15 at 08:24
yes it's an unusual need but service workers only have access to assets from their root upwards and to make things offline first you definitely want access to the `index.html` in root (as well as other assets that may reside in other subdirectories) — ken, Dec 27 '15 at 08:26

score 4 · Accepted Answer · answered Jan 01 '16 at 00:53

It looks like my initial attempt wasn't entirely far off. To make it work you need to hook into the treeForPublic hook like so:

const path = require('path');
const Funnel = require('broccoli-funnel');
const mergeTrees = require('broccoli-merge-trees');
const JS_FILES = ['upup.min.js', 'upup.sw.min.js'];

module.exports = {
  treeForPublic: function() {
    const upupPath = path.join(this.app.bowerDirectory, 'upup/dist');
    const publicTree = this._super.treeForPublic.apply(this, arguments);
    const trees = [];
    if (publicTree) {
      trees.push(publicTree);
    }
    trees.push(new Funnel(upupPath, {
      include: JS_FILES,
      destDir: '/'
    }));

    return mergeTrees(trees);
  }   
}

Hope that helps.

Ember addon to add files to root directory

1 Answers1