Using Bootstrap v4 in a RequireJS Based Aurelia CLI Application

Best Practices
1

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

Please note: these instructions are for installing Bootstrap 4 into an Aurelia CLI application that is using RequireJS. Other topics will cover Bootstrap using Webpack.

Install Bootstrap

The CLI does ship with an 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 --save

Bootstrap also has a requirement of jQuery and Popper.js, but we only need to install jQuery as Popper.js ships with Bootstrap itself:

npm install jquery --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.

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.bundle.min",
  "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';
7 Likes
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.

5 Likes
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.

11

As @gotling wrote, it appears that you do not need to worry about popper in beta.3.
See also this excellent video on how to use Bootstrap 4 beta 3

2 Likes
12

There is a possibility that folks from AUCS group would create the Aurelia Bootstrap bridge as a supported product by Aurelia-UI-Toolkits group. The decision on the feasibility of this project will be done based on the results from the survey, presented by AUCS portal, next week

13

You can use aurelia toolbelt we cover all bootstrap components and even more but we need more time for completing it.
We will share our plan soon

1 Like
14

@HamedFathi - OK I will try to find out more about toolbelt, as I might be proposing to do what you just did :smile:

15

Here’s what I am having trouble understanding with all this npm, CLI’s, etc. I really, really do NOT like including bootstrap, jquery, or any other “standard” frameworks in some Package Manager. It’s OK for starter projects and tutorials to get up and running quickly, however, for enterprise apps, I have been bitten so many times by some Package Manager (PM) thinking that it needed to upgrade something for me when it fact it just broke the whole system. Essentially, I compare these PMs to the automatic Windows updates.

Another reason I will not be using PMs is that sometimes you want some pages of your site using a newer version of bootstrap while others continue to work on the older version. For example, we cannot just create a whole new project for our site is being used by existing clients, so we need to continue to re-skin and update the site on some pages, while at the same time keeping existing pages working on the old bootstrap 3. By manually including both versions, and using 2 different “Layout” pages, this is super easy to accomplish.

After this is all said… please, explain to me why I really, really need all these PMs and “config” files, when I can just manually include the JS+CSS files where I want them, and configure things myself by just adding the old tried and trye “link” tags to the necessary JS/CSS files in my apps?

Thank you.

16

Working through “Aurelia in Action” and I find this doesn’t work for me. Granted, the book lags by a few years and still uses the requireJS bundler rather than webpack. Still, the aurelia.json mods should work, yet they don’t seem to.

I addded these lines, yet when I import ‘bootstrap’; it complains it cannot find popper. If I add more of a path (import ‘bootstrap/dist/js/bootstrap.bundle’:wink: the complaining stops, but I still don’t get the desired result - to be able to use ’' to invoke jQuery. I'm still getting a runtime error (browser console msg) sayinig is not a function.

17

Cli bundler (use requirejs) has been rewritten since that book.

You can follow official doc on how to use bootstrap v4. That book is probably written at the time of bootstrap v3.

Bootstrap v4 depends on popper, but strangely it puts popper in peerDependencies. So user has to install popper manually. The official doc covered it. http://aurelia.io/docs/cli/cli-bundler/cook-book#bootstrap-css-v4

2 Likes