require bootstrap and jquery in aurelia app

Question

I'm new to Aurelia, so I'm not really sure how this should work. I created a new Aurelia project and also installed bootstrap simply by doing jspm install bootstrap. I saw in console that this also pulled in jquery 3.0.0.

Now my question is, how do I use bootstrap.css, bootstrap.js and jquery.js in my project?

First attempt:

In app.html I tried to do thhe following:

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

I tried that because I have the following line in my config.js:

map: {
    ...
    "bootstrap": "github:twbs/[email protected]",
    ...
}

This sort of works in the sense that it loads bootstrap.js, but then gives an error in browser that it's missing jquery.js. So it's not automatically loading jquery for me. Is this normal?

Second attempt:

I changed my require to this in app.html:

<require from="jquery/dist/jquery.js"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="bootstrap/js/bootstrap.js"></require>

I'm not sure how it knows where to look for the bootstrap.js and bootstrap.css file, since they are located in: jspm_packages/github/twbs/[email protected]/css/bootstrap.css etc. But it knows how to find the bootstrap files. But not the jquery file.

I have this in my config.js for jquery:

map: {
    ...
    "github:twbs/[email protected]": {
      "jquery": "npm:[email protected]"
    },
    ....
}

So basically my question is, how should this work? Should require autoload all the necessary files when I <require from="bootstrap">. Or should I still load them as individual files? If so, how do I then load jquery in this case?

Answer 1

The require element is for pulling in Aurelia components, html templates (which are Aurelia components), or css files. It isn't for loading javascript files.

The Aurelia skeleton shows how to load Bootstrap in its main.js file:

import 'bootstrap';

is the first line in the file. This will initialize Bootstrap's javascript code.

In app.html a require element is used to load Bootstrap's css:

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

Importing jQuery in to a file is pretty simple as well:

import $ from 'jquery';

Then you can use the $ function however you would like.

Answer 2

I had this problem then installed latest node and npm, and then from the tutorial page on the aurelia site:-

To get Bootstrap setup, we begin by installing the library itself with NPM. Execute the following on the command line to do this:

npm install bootstrap --save

Next, because Bootstrap uses jQuery, we want to install jQuery as well, like this:

npm install jquery@^2.2.4 --save

then restarted the app as packages were updated and ran it again ... FIXED!