A Touch of Technology

This post is a response to a comment from the Ember.js Wysiwyg Summernote post. Working with vendor libraries and ES6 modules and a build system like Broccoli should be relatively straight forward, and often is, but there are some gaps still.

I chose to stick to vanilla Bootstrap for this solution. There are a few packaged modules out there specifically for Ember-CLI but I have yet to find one that just works. This walkthrough will actually get Sass and Bootstrap-Sass working together. I’ll also explain how to get the default Bootstrap Glyphicons pack working as well as how to add the FontAwesome icon pack.

New Ember-CLI Application

The first thing to do is create a new Ember-CLI application for this demonstration. If you already have a working Ember-CLI application, you can forgo this step.

$ ember new ember-cli-bootstrap-example
$ cd ember-cli-bootstrap-example

You may notice that running ember new takes care of the npm install and bower install steps.

Add Sass and Bootstrap

Using Sass in place of CSS is extremely easy with the help of joliss/broccoli-sass. This is one of the many plugins for Broccoli that Jo Liss has created, in addition to the work put towards Broccoli itself. This will also be necessary so that the bootstrap-official-sass package can work.

Once the install completes, be sure to rename the default app/styles/app.css file to app/styles/app.scss. If the server is running it will throw an error, simply restart the server.

$ npm install --save broccoli-sass
$ mv app/styles/app.css app/styles/app.scss

This example will use the bootstrap-sass-official Bower package. To get Glyphicons working we will need to also add another Broccoli plugin for static asset compilation called broccoli-static-compiler.

$ bower install --save bootstrap-sass-official
$ npm install --save broccoli-static-compiler

That is all of the dependencies.

Include the Bootstrap styles in your application by adding an @import line to your app/styles/app.scss file.

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

html, body {
  margin: 20px;
}

Add an import statement for the javascript inside the Brocfile.js.

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();

// Bootstrap
app.import('bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js');

module.exports = app.toTree();

Now, to get the Glyphicons working the font assets need to be moved into the dist/fonts directory. This can be configured inside the Brocfile.js by using the module broccoli-static-compiler. This module will take all of the font files and move them into /fonts.

Since the first argument, the tree, is the direct location of the Bootstrap Glyphicon fonts the srcDir is just the root of this tree. Broccoli builds everything into the dist directory so we don’t need to preface the destDir with this value.

It is important to note the addition of bootstrapFonts on line 14. Ember-CLI provides the toTree() method which can take any number of trees to be merged into your app tree. The argument passed into toTree must be a single tree or an array of trees.

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();

// Bootstrap
app.import('bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js');

// Glyphicons
var pickFiles = require('broccoli-static-compiler');
var bootstrapFonts = pickFiles('bower_components/bootstrap-sass-official/assets/fonts/bootstrap', {
    srcDir: '/',
    destDir: '/fonts'
});

module.exports = app.toTree(bootstrapFonts);

FontAwesome

A lot of people prefer FontAwesome over Glyphicons. They do provide more options than the Glyphicon pack for Bootstrap. I especially like their social icons. Using FontAwesome instead of Glyphicon is actually simpiler than getting Glyphicon to work. All that is needed is to install the Bower package and add the @import statement to app/styles/app.scss.

$ bower install --save fontawesome

@import 'bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap';
@import 'bower_components/fontawesome/scss/font-awesome';

html, body {
  margin: 20px;
}

Example Repository

In response to the aforementioned comment I created an example repository with Ember-CLI, Bootstrap, Sass, Fontawesome, and Summernote which can be found at hbrysiewicz/ember-cli-summernote.

I realized when writing this blog post that the Ember-CLI Version for that project was 0.0.46 which is a bit old. For this example I used version 0.1.1 which is the newest at time of writing. It can be found at hbrysiewicz/ember-cli-bootstrap-example