require bootstrap and jquery in aurelia app

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?

Solution

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.