5

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/bootstrap@3.3.6",
    ...
}

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/bootstrap@3.3.6/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/bootstrap@3.3.6": {
      "jquery": "npm:jquery@3.0.0"
    },
    ....
}

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?

w00
  • 26,172
  • 30
  • 101
  • 147

3 Answers3

8

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.

Ashley Grant
  • 10,879
  • 24
  • 36
  • It can't find `jquery` when I import it like you said. Eventhough there is a jquery file located at: `jspm_packages/npm/jquery@3.0.0/dist/jquery.js`. – w00 Jun 21 '16 at 20:11
  • You probably ran `jspm install bootstrap`, but you'll need to also run `jspm install jquery` to be able to import `jquery` like I'm doing above. – Ashley Grant Jun 21 '16 at 20:12
  • Just ran `jspm install jquery`. Now it's able to load `jquery.js`. But, it still complains that `bootstrap` requires the `jQuery` plugin. I have `import $ from 'jquery'` first, then `import 'bootstrap`. Could this then maybe be a bug or am I still missing something? – w00 Jun 21 '16 at 20:26
  • I would recommend comparing your code to the aurelia esnext skeleton located here: https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext – Ashley Grant Jun 21 '16 at 20:38
  • 1
    `import 'bootstrap';` `import 'jquery';` in app.js worked for me! Project built using aurelia cli. Added entries for jquery and bootstrap in "aurelia.json" as described in [contact manager tutorial](http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial) – mauricio777 Sep 28 '16 at 06:02
1

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!

Marius
  • 15,148
  • 9
  • 56
  • 76
Hugh Gallagher
  • 107
  • 1
  • 1
  • 7
0

after adding import 'bootstrap'; in main.js, you may need to stop the app (Ctrl + c) and run it again with au run --watch to make it work.

Thierry Otis
  • 31
  • 5