Using Bootstrap v4 in an Aurelia CLI Application


#1

The latest and greatest version of Bootstrap (version 4) sees a few changes from version 3.x. Adding it into Aurelia is a breeze if you follow these simple steps.

Install Bootstrap

The CLI does ship with a au install command, however we’ll need to modify our aurelia.json file to make some additional changes for supporting Bootstrap that we’ll just install it the old fashioned way via Npm.

npm install bootstrap@4.0.0-beta.2 --save

Bootstrap also has a requirement of jQuery and Popper.js, we’ll install those as well:

npm install jquery popper.js --save

Configure aurelia.json

All Aurelia CLI applications have the concept of a project configuration file inside of aurelia_project/aurelia.json which tells the bundler where our dependencies are and what they are. Without configuring our application, it won’t know what to load when we import it.

Inside of the vendor-bundle section we need to add Popper as a script include in the prepend section. Place this before anything else in the prepend section or you will probably get errors

"node_modules/popper.js/dist/umd/popper.min.js",

The reason we need to prepend Popper.js is because it needs to be a global dependency for Bootstrap and needs to be included beforehand or it can’t see it (silly, I know).

Secondly, we then need to add the Bootstrap dependency itself into the dependencies section beneath the prepend section we were just working within.

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

Bootstrap is now ready to be used within our application. Open up app.html and add the following CSS import to include Bootstrap’s CSS. Your app.html in a default CLI install should look like my example, we’ve just added in a Bootstrap CSS import using <require>.

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <h1>${message}</h1>
</template>

Lastly, open up app.js and add the following import at the top:

import 'bootstrap';

#5

Using Aurelia in an ASP.NET core SPA, I added

“bootstrap”: “^4.0.0-beta”
“jquery”: "^3.2.1"
“popper.js”: “^1.12.6”

to package.json which installs the packages in node_modules. I also added the require and import as described, but then I am getting “Failed to load resource: the server responded with a status of 500 (Internal Server Error)” for vendor.css and app.js. Have you got an idea what I could be missing?


#6

Are you using Webpack in your .NET core SPA?


#7

Yes, I am using the default “dotnet new aurelia” template.


#8

In my ASP.NET Core SPA template, my setup was a little different than the OP.

Install
Same as OP.

npm install bootstrap@4.0.0-beta.2 jquery popper.js --save

Bootstrap Imports
What came with the template is correct. in boot.ts, you will find:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';

Webpack
Add popper.js to the vendor array and more jquery to the top.

vendor: [
    
    // aurelia packages removed for brevity

    'jquery',             
    'popper.js',
    'bootstrap',
    'bootstrap/dist/css/bootstrap.css',
]

Update the ProvidePlugin to include popper.

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
}),

#9

After upgrading to Bootstrap 4.beta.3 i had problems including popper.js. But it turns out Bootstrap has included popper.js since beta.2, see this push request: https://github.com/twbs/bootstrap/pull/23735

If this line in aurelia.json
"main": "js/bootstrap.min.js",
is changed to
"main": "js/bootstrap.bundle.min",
popper.js can be removed from the prepend section and Bootstrap will work.


#10

Another thing I’ve found with Beta 3 is that you need to import bootstrap on top of your app-root TS/JS file, otherwise any Bootstrap component that needs its own javascript won’t work.

I scratched my head over this for a few hours after upgrading from Beta.1 to Beta.3 so hopefully this will help other folks in the same situation.