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:

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.