aurelia Aurelia CLI Adding Bootstrap To A CLI Application

Example

A commonly used CSS/Javascript library is Bootstrap. To install it into your Aurelia CLI driven application first you need to install it using Npm.

npm install bootstrap --save

Because Bootstrap has a hard dependency on jQuery, we need to make sure we also have jQuery installed:

npm install jquery --save

Now in your preferred IDE/code editor open up the following file in your project directory: aurelia_project/aurelia.json and scroll down to the build.bundles section towards the end of the file. We will want to add Bootstrap to one of the bundles. For this example, we will be adding both jQuery and Bootstrap into the vendor bundle.

"jquery",
{
  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.min",
  "deps": ["jquery"],
  "exports": "$",
  "resources": [
    "css/bootstrap.css"
  ]
}

This will make Bootstrap accessible in your application and importable via import 'bootstrap' in your code (this is the name property defined above). Notice the reference to jquery in the "deps": [] section of our bootstrap definition. We also specify that we want to bundle Bootstrap's CSS in our main vendor-bundle.js file using the "resources":[] property

Last and not least, to use our newly added Bootstrap dependency, we want to first import the Bootstrap library inside of our main.js file by putting the following at the beginning of the file.

import 'bootstrap';

We want to include the Bootstrap CSS from a place where it will be globally accessible to the whole application, so inside of app.html put the following between the <template></template> tags.

<require from="bootstrap/css/bootstrap.css"></require>