Adding Bootstrap in Our Application

Adding assets to our build

While building our application, Ember CLI bundles all the required JavaScript files and application code into one big ball. This big ball is named after the project name. The same procedure is followed for the CSS files. Ember uses a package called Broccoli to bundle our assets. The ember-cli-build.js file contains the configuration for Broccoli.

We can add assets to our application in the following ways:

• We can use Ember addons.
• We can use the npm package manager.
• We can use the Bower package manager.

Ember addons

Ember addons are simple JavaScript packages that are compatible with Ember. We can install any addon by using the following command:

$ ember install <package-name>

Installing any package modifies our package.json and ember-cli-build.js files. Some packages can also add additional files to our project.

It can be challenging to find an addon that meets our requirements, so Ember has provided us with a website named Ember Observer to index Ember addons.

The npm package manager

We can also install npm packages directly in our Ember application using the following command:

$ npm install <package-name>

Our application consists of a manifest asset file named ember-cli-build.js that’s responsible for including such assets.

Bower package manager

We can include different packages in our application using the Bower package manager. Bower can be used to install packages that aren’t included in Ember addons.

We can still use bower_components, but it’s recommended not to use them unless we have no other choice. We can install Bower components using the following command:

$ bower install <package-name>

After installing a Bower package, we should import it into our ember-cli-build.js file.

Installing Bootstrap

Ember addons are the simplest way to go, so we’ll install Bootstrap in our application using Ember addons. Bootstrap is a CSS framework that’s used to design and customize responsive, mobile-friendly web applications.

To install Bootstrap, we need to run the following command:

$ ember install ember-bootstrap

Running this command changes the package.json and ember-cli-build.js files. It adds the ember-bootstrap package in our package.json file and some configurations in our ember-cli-build.js file.
The changes in the ember-cli-build.js file after we add Bootstrap are given below: