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

$> bower install --save bootstrap

Afterwards add following two lines to your ember-cli-builds.js (or Brocfile.js if you are using an older version of Ember.js):

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

And voilà, ready to go!

updated 08/18/2015: adapted to new scheme introduced in Ember.js 1.13

Answer 2

On the terminal (For those using Node Package Manager)

npm install bootstrap --save

Using ember-cli, to import your installed bootstrap

Open the ember-cli-build.js file

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
  });
app.import('node_modules/bootstrap/dist/css/bootstrap.min.css');
app.import('node_modules/bootstrap/dist/js/bootstrap.min.js');

That will do it if bootstrap is installed via the NPM installer.

Do not do this:

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

Answer 3

You might want to check out ember-bootstrap, which will import the bootstrap assets automatically.

ember install ember-bootstrap

Moreover it adds a suite of native ember components to your app, that make working with bootstrap features much easier in ember. Check it out, although I am a bit biased, as I am the author of it! ;)

Answer 4

BASH:

bower install --save bootstrap

Brocfile.js:

/* global require, module */

...


app.import('bower_components/bootstrap/dist/css/bootstrap.css');
app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', {
    destDir: 'assets'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', {
    destDir: 'fonts'
});
app.import('bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2', {
    destDir: 'fonts'
});

app.import('bower_components/bootstrap/dist/js/bootstrap.js');

module.exports = app.toTree();

Answer 5

bower install --save bootstrap

in your brocfile.js:

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

Answer 6

This is how I package vendor CSS files with Broccoli (which underpins Ember-cli).

 var vendorCss = concat('vendor', {
   inputFiles: [
     'pikaday/css/pikaday.css'
   , 'nvd3/nv.d3.css'
   , 'semantic-ui/build/packaged/css/semantic.css'
   ]
  , outputFile: '/assets/css/vendor.css'
  });

Where the vendor folder is where my Bower packages live. And assets is where I'm expecting my CSS to live. I'm assuming you've installed Bootstrap using Bower, which is the Ember-cli way.

Then in my index.html, I'm simply referencing that vendor.css file:

  <link href="/assets/css/vendor.css" rel="stylesheet" type="text/css" media="all">

Cheers.