80

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 });
};
2
  • Can you show your ember-cli version and Brocfile.js content? Commented Apr 29, 2014 at 1:29
  • Also including via the index.html after copying in /styles worked. <link rel="stylesheet" href="assets/bootstrap.css"> <link rel="stylesheet" href="assets/bootstrap-theme.css"> Commented Apr 29, 2014 at 6:32

9 Answers 9

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]);
Sign up to request clarification or add additional context in comments.

8 Comments

And restart the server since changes to the brocfile won't be automatically picked up by Livereload... I think :)
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.
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.
You can also import fonts with app.import('vendor/bootstrap/dist/fonts/glyphicons-halflings-regular.woff', { destDir: 'fonts' }); Check the following link miguelcamba.com/blog/2014/08/10/…
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' });
|
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();

4 Comments

This is a good method for ember 1.9 until ember-cli-bootstrap is bumped to build for handlebars >=2.0
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
@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 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.
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! ;)

1 Comment

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.
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!

3 Comments

Change current to your current version. Current today (0.0.39) is maybe not even the version you are using...
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.
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).
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

3 Comments

Latest version of ember-cli does not include brocfile.js anymore
@MadScientist , you can use the 'ember-cli-build.js' for importing, steps above still work. (ember: 1.12.6)
how do you combine this approach with bootstrap overrides like bootswatch.com/flatly
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';

1 Comment

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"
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.

2 Comments

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.
Install the plugin npm install broccoli-concat --save Then in your Brocfile, at the top: var concat = require('broccoli-concat');
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');

1 Comment

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.
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.