Proper way to require external js and css libraries in ember js?

Question

I have been playing around with ember 1.13 and I can see that in some online tutorials they require js and css via index.html while some uses ember-cli-build.js or brocfile.js for older versions. I find it requiring properly when I use ember-cli-build.js but then I am not sure what exactly the use of index.html

Answer 1

It depends.

If you have a ember-cli-plugin it will add the files to the vendor files by itself normally. Like with ember-cli-materialize.

If you are installing a random bower package like Ladda, you would need to add the files you need manually to ember-cli-build.js:

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
  });

  app.import('bower_components/ladda/dist/ladda-themeless.min.css');
  app.import('bower_components/ladda/dist/spin.min.js');
  app.import('bower_components/ladda/dist/ladda.min.js');

  return app.toTree();
};

This will then be merged into your vendor.css and vendor.js which are linked to from index.html.

Also when you build the app the bower_components won't be available unless you've explicitly included something, so you cannot just link to them from index.html. It would also be a waste of network resources to include files separately. You shouldn't have to include anything in index.html unless it's an external resource.

brocfile.js is the old name for ember-cli-build.js since they've stopped using broccoli. Just use the newer one.