Dear readers, I would like to share a little how-to that might be useful for EmberJS newcomers.

The problem that I am going to solve is how to add a 3rd-party library and its resources to an ember-cli project. Let’s take materializecss library as an example. Firstly, we need run a command to install the bower - package:

bower install materialize --save

Then, we need to import required JS and CSS files in our ember-cli-build.js file.

app.import('bower_components/Materialize/dist/js/materialize.js')
app.import('bower_components/Materialize/dist/css/materialize.css')

If you had your ember s command running, restart it and refresh the page. If the library requires additional fonts or images, you’ll find several 404 errors in the console:

Let’s use broccoli-funnel

Given an input node, the Broccoli Funnel plugin returns a new node with only a subset of the files from the input node. The files can be moved to different paths. You can use regular expressions to select which files to include or exclude.

When ember-cli is used you have dist and public folders. All files from both of these folders are accessible though http://localhost:4200/ as soon as your start ember s. With broccoli-funnel we can easily fix our problems by copying the files from bower_components/Materialize/dist/font/roboto - folder to /dist/font/roboto - folder.

Installation

npm install broccoli-funnel --save-dev

Usage

// in ember-cli-build.js
var Funnel = require('broccoli-funnel');

...
var materializeFonts = new Funnel('bower_components/Materialize/dist/font/roboto', {
  srcDir: '/',
  include: ['**/*.*'],
  destDir: '/font/roboto'
});
...

return app.toTree([materializeFonts]);

Running

Restart ember s command, refresh the page and enjoy.

Thanks for reading and I hope from now, you will be able to use any library and its resources without a headache.