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

Now the library is downloded in /vendor/bootstrap/dist/(css|js|fonts) I tried what is mentioned here : http://ember-cli.com/#managing-dependencies replacing path and css files names but I get errors regarding the Brocfile.js file. I think the brocfile format has changed too much compared to the example.

I also tried to @import with the /app/styles/app.css file after moving the stylesheets in the /app/styles/ directory :

@import url('/assets/bootstrap.css');
@import url('/assets/bootstrap-theme.css');

But it did not work. The files are visible true dev server : http://localhost:4200/assets/bootstrap.css

Can someone throw me a bone here ?

Thx

Edit :

ember -v
ember-cli 0.0.23

brocfile.js

    /* global require, module */

var uglifyJavaScript = require('broccoli-uglify-js');
var replace = require('broccoli-replace');
var compileES6 = require('broccoli-es6-concatenator');
var validateES6 = require('broccoli-es6-import-validate');
var pickFiles = require('broccoli-static-compiler');
var mergeTrees = require('broccoli-merge-trees');

var env = require('broccoli-env').getEnv();
var getEnvJSON = require('./config/environment');

var p = require('ember-cli/lib/preprocessors');
var preprocessCss = p.preprocessCss;
var preprocessTemplates = p.preprocessTemplates;
var preprocessJs = p.preprocessJs;

module.exports = function (broccoli) {

  var prefix = 'caisse';
  var rootURL = '/';

  // index.html

  var indexHTML = pickFiles('app', {
    srcDir: '/',
    files: ['index.html'],
    destDir: '/'
  });

  indexHTML = replace(indexHTML, {
    files: ['index.html'],
    patterns: [{ match: /\{\{ENV\}\}/g, replacement: getEnvJSON.bind(null, env)}]
  });

  // sourceTrees, appAndDependencies for CSS and JavaScript

  var app = pickFiles('app', {
    srcDir: '/',
    destDir: prefix
  });

  app = preprocessTemplates(app);

  var config = pickFiles('config', { // Don't pick anything, just watch config folder
    srcDir: '/',
    files: [],
    destDir: '/'
  });

  var sourceTrees = [app, config, 'vendor'].concat(broccoli.bowerTrees());
  var appAndDependencies = mergeTrees(sourceTrees, { overwrite: true });

  // JavaScript

  var legacyFilesToAppend = [
    'jquery.js',
    'handlebars.js',
    'ember.js',
    'ic-ajax/dist/named-amd/main.js',
    'ember-data.js',
    'ember-resolver.js',
    'ember-shim.js',
    'bootstrap/dist/js/bootstrap.js'
  ];

  var applicationJs = preprocessJs(appAndDependencies, '/', prefix);

  applicationJs = compileES6(applicationJs, {
    loaderFile: 'loader/loader.js',
    ignoredModules: [
      'ember/resolver',
      'ic-ajax'
    ],
    inputFiles: [
      prefix + '/**/*.js'
    ],
    legacyFilesToAppend: legacyFilesToAppend,
    wrapInEval: env !== 'production',
    outputFile: '/assets/app.js'
  });

  if (env === 'production') {
    applicationJs = uglifyJavaScript(applicationJs, {
      mangle: false,
      compress: false
    });
  }

  // Styles

  var styles = preprocessCss(appAndDependencies, prefix + '/styles', '/assets');

  // Bootstrap Style integration
  var bootstrap = pickFiles('vendor', {
    srcDir: '/bootstrap/dist/css',
    files: [
      'bootstrap.css',
      'bootstrap-theme.css'
    ],
    destDir: '/assets/'
  });

//var bootstrap = preprocessCss(appAndDependencies, '/vendor/bootstrap/dist/css', '/assets');

  // Ouput

  var outputTrees = [
    indexHTML,
    applicationJs,
    'public',
    styles,
    bootstrap
  ];

  // Testing

  if (env !== 'production') {

    var tests = pickFiles('tests', {
      srcDir: '/',
      destDir: prefix + '/tests'
    });

    var testsIndexHTML = pickFiles('tests', {
      srcDir: '/',
      files: ['index.html'],
      destDir: '/tests'
    });

    var qunitStyles = pickFiles('vendor', {
      srcDir: '/qunit/qunit',
      files: ['qunit.css'],
      destDir: '/assets/'
    });

    testsIndexHTML = replace(testsIndexHTML, {
      files: ['tests/index.html'],
      patterns: [{ match: /\{\{ENV\}\}/g, replacement: getEnvJSON.bind(null, env)}]
    });

    tests = preprocessTemplates(tests);

    sourceTrees = [tests, 'vendor'].concat(broccoli.bowerTrees());
    appAndDependencies = mergeTrees(sourceTrees, { overwrite: true });

    var testsJs = preprocessJs(appAndDependencies, '/', prefix);

    var validatedJs = validateES6(mergeTrees([app, tests]), {
      whitelist: {
        'ember/resolver': ['default'],
        'ember-qunit': [
          'globalize',
          'moduleFor',
          'moduleForComponent',
          'moduleForModel',
          'test',
          'setResolver'
        ]
      }
    });

    var legacyTestFiles = [
      'qunit/qunit/qunit.js',
      'qunit-shim.js',
      'ember-qunit/dist/named-amd/main.js'
    ];

    legacyFilesToAppend = legacyFilesToAppend.concat(legacyTestFiles);

    testsJs = compileES6(testsJs, {
      // Temporary workaround for
      // https://github.com/joliss/broccoli-es6-concatenator/issues/9
      loaderFile: '_loader.js',
      ignoredModules: [
        'ember/resolver',
        'ember-qunit'
      ],
      inputFiles: [
        prefix + '/**/*.js'
      ],
      legacyFilesToAppend: legacyFilesToAppend,

      wrapInEval: true,
      outputFile: '/assets/tests.js'
    });

    var testsTrees = [qunitStyles, testsIndexHTML, validatedJs, testsJs];
    outputTrees = outputTrees.concat(testsTrees);
  }

  return mergeTrees(outputTrees, { overwrite: true });
};

Can you show your ember-cli version and Brocfile.js content? — Marcio Junior, Apr 29 '14 at 01:29
Also including via the index.html after copying in /styles worked. — Guidouil, Apr 29 '14 at 06:32

score 68 · Answer 1 · edited May 05 '16 at 14:04

68

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]);

edited May 05 '16 at 14:04

fguillen

36,125
23
149
210

answered May 13 '14 at 15:04

drew covi

891
1
6
8

Thanks Dave! Forgot the cli doesn't render vendor.css initially. – drew covi May 14 '14 at 16:30
Does this handle the files that LESS includes, like the fonts? – Joe May 19 '14 at 21:24
9

And restart the server since changes to the brocfile won't be automatically picked up by Livereload... I think :) – max May 24 '14 at 21:06
7

If you are using ember-cli v0.0.35 or newer you may need to include a couple of Broccoli plugins in your package.json. You can add them via: `npm install --save-dev broccoli-merge-trees` and `npm install --save-dev broccoli-static-compiler`. – Sean O'Hara Jun 23 '14 at 15:34
5

Note that now 'vendor' has been replaced by 'bower_components' for anything installed with bower. The 'vendor' folder can still be used for user-specified libraries. – SeanK Nov 11 '14 at 17:19
6

You can also import fonts with ```app.import('vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' });``` Check the following link http://miguelcamba.com/blog/2014/08/10/import-bootstrap-glyphicons-in-ember-cli/ – Jose S Nov 18 '14 at 17:04
3

It seems my generated project requested boostrap.css.map as well, so I added the line of code below as well. `app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', { destDir: 'assets' });` – consideRatio Dec 03 '14 at 11:33
brocfile.js is no more; now, it's more like `ember-cli-build.js` that you have to add the `app.import` statements to. – Per Lundberg Sep 11 '16 at 18:12

Patrick Seastar · Answer 2 · 2015-01-25T16:17:41.100

46

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();

edited Jan 25 '15 at 16:17

answered Nov 24 '14 at 15:02

Patrick Seastar

636
5
6

This is a good method for ember 1.9 until ember-cli-bootstrap is bumped to build for handlebars >=2.0 – genkilabs Dec 12 '14 at 22:29
2

The commands that Sean O'Hara stated in a comment on Drew's answer should be added to this: `npm install --save-dev broccoli-merge-trees && npm install --save-dev broccoli-static-compiler` – Timo Dec 14 '14 at 09:37
@TimoLehto what advantage does cli give over this broc import? – SuperUberDuper Mar 11 '15 at 11:53
@SuperUberDuper, sry mate. I do not understand the question. What cli? What are you talking about? – Timo Mar 12 '15 at 12:34
@genkilabs dont see the point of the cli-bootstrap, its easy as shown above – SuperUberDuper Mar 12 '15 at 13:28
@TimoLehto please see my commnet – SuperUberDuper Mar 12 '15 at 14:04
Who's saying anything about cli-bootsrap? Not me. I am confused. I only said you need to also install broccoli-merge-trees broccoli-static-compiler to make this work. Nothing about cli-bootsrap. – Timo Mar 13 '15 at 14:37
@SuperUberDuper The reason for using cli-bootstrap (IMO) is because not only does it keep the bootstrap install in-line with other cli add-ons, but it is more clear and repeatable for large teams building several apps to a standard or hiring on and training new developers. Of course it doesn't matter for small teams or toy apps, but using consistent practices, installs and addons can help reduce error for industrial development. – genkilabs Mar 13 '15 at 15:34
@TimoLehto The original question here is about install in the Ember-CLI environment; its in the title. – genkilabs Mar 13 '15 at 15:34
@genkilabs thanks but, I'm still not convinced, its pretty easy for teams with bootstrap in bower and a merge trees in the brocfile whats going on, + you can easily change the bootstrap version. – SuperUberDuper Mar 13 '15 at 15:59

score 41 · Accepted Answer · answered Nov 12 '15 at 19:35

41

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! ;)

answered Nov 12 '15 at 19:35

Simon Ihmig

593
6
6

2

This command is enough to transform any existing ember project to bootstrap. Thank you Simon. – Raja Nagendra Kumar Apr 01 '16 at 10:01
ember-bootstrap is EXCELLENT! However a missing component from this is the carousel. If you need the carousel to work then you will need to install the bootstrap components via @rastapasta instructions -- it appears that ember-bootstrap does not include the transitions.js as a part of the bootstrap assets that it brings in, and this is REQUIRED for the carousel. – RyanNerd Dec 19 '16 at 23:54
@RyanNerd Thanks! Yes, carousel still missing. But should be added hopefully some time soon after upcoming 1.0 release! – Simon Ihmig Dec 23 '16 at 16:53

Sam Selikoff · Answer 4 · 2015-03-31T14:14:20.040

23

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!

edited Mar 31 '15 at 14:14

answered Jul 11 '14 at 17:16

Sam Selikoff

12,366
13
58
104

2

Change current to your current version. Current today (0.0.39) is maybe not even the version you are using... – Jacob van Lingen Jul 14 '14 at 12:22
For right now ember-cli-bootstrap does not include bootstrap.js, so you want be able to utilize built-in javascript methods, or the various plugins. – drew covi Aug 20 '14 at 17:29
2

I'm not sure if this should be a "recommended" way to install it per se. 'The ember-cli-bootstrap' project relies on the 'bootstrap-for-ember' project. Unfortunately, according to the maintainer of the latter project, he announced that he's now working on the 'ember-components' project as its successor instead. So unless there are efforts to pick up where he left off (that project is currently using bootstrap 3.0.0 I believe), the Bootstrap version will get stale soon enough (already is). – poweratom Nov 04 '14 at 23:51

rastapasta · Answer 5 · 2015-08-18T02:22:26.927

15

$> 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

edited Aug 18 '15 at 02:22

answered Jul 01 '15 at 17:04

rastapasta

151
1
4

1

Latest version of ember-cli does not include brocfile.js anymore – Mad Scientist Aug 04 '15 at 08:36
5

@MadScientist , you can use the 'ember-cli-build.js' for importing, steps above still work. (ember: 1.12.6) – Alan Francis Aug 07 '15 at 06:37
how do you combine this approach with bootstrap overrides like https://bootswatch.com/flatly/ – Ben Oct 22 '15 at 13:24

Sam Selikoff · Answer 6 · 2016-04-13T11:37:44.043

6

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';

edited Apr 13 '16 at 11:37

answered Oct 24 '15 at 22:25

Sam Selikoff

12,366
13
58
104

or $ ember install ember-cli-sass $ ember install ember-cli-bootstrap-sassy then rename app.css to app.scss and add this line to it: @import "bootstrap" – rmcsharry Sep 02 '16 at 12:07

score 5 · Answer 7 · answered Apr 29 '14 at 16:16

5

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.

answered Apr 29 '14 at 16:16

Johnny Hall

545
4
12

I tried it but it tels me that concat is undefined in Broccoli (ReferenceError: concat is not defined) I added that with just changing the path to included stylesheets in the file : Brocfile.js at the root of the app folder. – Guidouil Apr 30 '14 at 07:30
1

Install the plugin `npm install broccoli-concat --save` Then in your Brocfile, at the top: `var concat = require('broccoli-concat');` – Johnny Hall Apr 30 '14 at 14:27

score 3 · Answer 8 · edited Nov 08 '15 at 19:21

3

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');

edited Nov 08 '15 at 19:21

danilopopeye

9,610
1
23
31

answered Apr 11 '15 at 23:37

Lydias303

51
1

I don't know why this was actually marked down. It may not be very clear unless you know where to put these statements. But it works fine... maybe not as nice as the add-on I admit. they go in the `ember-cli-build.js` file and works fine if anyone needs this. I'm feeding my ember from within as Asp.Net MVC project and needed it available to that project not just the ember app. – hal9000 Jan 06 '16 at 23:22

score 0 · Answer 9 · answered Aug 16 '19 at 09:19

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');

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

9 Answers9

Update 3/30/15

Update 1/22/15

Original 7/11/14

Linked

Related