Broccoli, the compilation engine we mentioned earlier, requires some configuration when adding new JavaScript and stylesheet assets.

Ember-CLI generates a configuration file named ember-cli-build.js. This file is where you can inject dependencies and configure the output structure of your application. For Tracker, you will only be adding external libraries and settings for SCSS compilation.

Open ember-cli-build.js, assign a variable to the directory path to bootstrap, and add Bootstrap’s stylesheets directory to the key includePaths in the sassOptions:

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

module.exports = function(defaults) {

  var bootstrapPath = 'bower_components/bootstrap-sass/assets/';

  var app = new EmberApp(defaults, {
    // Add options here
    sassOptions: {
      includePaths: [
        bootstrapPath + 'stylesheets'
      ]
    }
  });

  // ... Template comments ...

  // Create paths to bootstrap assets
  // Add assets to app with import
  app.import(bootstrapPath + 'javascripts/bootstrap.js');

  return app.toTree();
};

You have added a configuration for Ember CLI to look for *.scss files in the bower_components/bootstrap-sass/assets/stylesheets directory. Save your file and restart the Ember server so the new configuration can load with the application.

You can now use the @import directive in your app.scss file to import Bootstrap’s styles:

$bg-color: coral;
html {
  background: $bg-color;
}

// ----------------------------
// bootstrap variable overrides
// ----------------------------

// end bootstrap variable overrides
@import 'bootstrap';

The @import directive adds the contents of bootstrap.scss to app.scss, which will be created by the Ember CLI build process. Bootstrap’s file is found in the directory bower_components/bootstrap-sass/assets/stylesheets/.

In ember-cli-build.js, you added Bootstrap’s JavaScript components to the application build process with app.import(bootstrapPath + 'javascripts/bootstrap.js');. An import in the CLI build configuration adds the file to the list of assets to be concatenated into a single dist/assets/vendor.js file. Bootstrap’s bootstrap.js has individual JavaScript modules for collapsing DOM elements, modals, tabs, dropdowns, and many others all in a single file. Adding all the JavaScript components is probably overkill, but in the future you can tweak your ember-cli-build.js configuration to only add the specific components you need.

After you add assets, you should always make sure they are working before you move forward. In the app directory, there is an index.html file – but this is not the place to test your new Bootstrap code. This file is mainly for the build process.

Instead, all of your HTML elements will be added to application templates, in the app/templates directory. You will learn about templates in greater detail in Chapter 23.

For now, add a Bootstrap NavBar component to app/templates/application.hbs:

<h2 id="title">Welcome to Ember</h2>

{{outlet}}
<header>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed"
          data-toggle="collapse" data-target="#top-navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand">Tracker</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="top-navbar-collapse">
        <ul class="nav navbar-nav">
          <li>
            <a href="#">Test Link</a>
          </li>
          <li>
            <a href="#">Test Link</a>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
</header>
<div class="container">
  {{outlet}}
</div>

You have added Bootstrap’s NavBar component with specific HTML attributes: IDs, class names, and data attributes. Also, the existing {{outlet}} has been moved from the main containing element to inside a <div> element. This piece of code is how templates nest child templates. You will learn more about the {{outlet}} in the next chapter.

The result of your code is shown in Figure 19.6.

Figure 19.6  Bootstrap NavBar

The NavBar component is responsive and shows a collapse button when the browser window is less than 768px wide. This button responds to click events by opening and closing the list of links (Figure 19.7). The event listener setup for the collapse feature is the code written in the bootstrap.js file.

Figure 19.7  Testing Bootstrap NavBar's collapse component

Congratulations – you have an Ember app up and running! You installed tools to generate code, compile assets, load dependencies, and serve the app. You now have a solid starting point for building the rest of your app in upcoming chapters.