Recommended way to include bootstrap library in Ember.JS ember-cli App

Question

I am trying to install properly Twitter Bootstrap in my current ember-cli project. I did install bootstrap with bower :

bower install --save bootstrap


        

Answer 1

If you're using SASS (probably via ember-cli-sass), bower_components is automatically added to the lookup path. This means you can just use Bower and avoid the Brocfile/ember-cli-build file altogether.

Install the official SASS version of Bootstrap with Bower

bower install --save bootstrap-sass

then import the lib in app.scss. The nice thing about this is you can customize the variables before importing bootstrap:

$brand-primary: 'purple';

@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';

Answer 2

BASH:

bower install --save bootstrap

Brocfile.js:

app.import('vendor/bootstrap/dist/js/bootstrap.js');
app.import('vendor/bootstrap/dist/css/bootstrap.css');

The JS will be added to the app.js, which is linked by default, and the CSS will be added to assets/vendor.css, which as of May 14th, is also added by default.

For reference: http://www.ember-cli.com/#managing-dependencies

In response to @Joe's question surrounding fonts and other assets, I was unable to get the recommended app.import() method to work on the fonts. I instead opted for the merge-trees and static-compiler approach:

var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');
var extraAssets = pickFiles('vendor/bootstrap/dist/fonts',{
    srcDir: '/', 
    files: ['**/*'],
    destDir: '/fonts'
});

module.exports = mergeTrees([app.toTree(), extraAssets]);

Answer 3

Update 3/30/15

plus ça change... I use ember-cli-bootstrap-sassy now, it seems to bring along minimum cruft while still letting me customize Bootstrap's variables.

---

Update 1/22/15

You should probably use Johnny's solution above instead of the lib I originally mentioned. I also like ember-cli-bootstrap-sass, because I can customize Bootstrap's variables directly in my project.

Original 7/11/14

If you're using a version of ember-cli that supports addons (0.35+, I believe), you can now use the ember-cli-bootstrap package. From the root of your app,

npm install --save-dev ember-cli-bootstrap

That's it!

Note: as @poweratom points out, ember-cli-bootstrap is somebody else's library which chooses to also include bootstrap-for-ember. Thus, this lib could get out of sync with official bootstrap version. However, I still find it a great way to get prototyping fast on a new project!