How to import packages within my Aurelia application

Question

I have a successful app running using Aurelia, however I developed it using VSCode and the skeleton that Aurelia gives you. Now that the CLI is available I'm trying to port the application over to a VS2015/Asp.net Core project but I'm having some difficulties.

In the VSCode project, there's a bundles.js file within the build folder that Gulp uses to compile it (from what I understand). In that file, there's a "dist/aurelia" section and that's where I put all of the extra packages that I need to import and it will import the css and js files. Looks like this:

"dist/aurelia": {
      "includes": [
        "aurelia-framework",
        "aurelia-bootstrapper",
        "aurelia-fetch-client",
        "aurelia-router",
        "aurelia-animator-css",
        "aurelia-templating-binding",
        "aurelia-polyfills",
        "aurelia-templating-resources",
        "aurelia-templating-router",
        "aurelia-loader-default",
        "aurelia-history-browser",
        "aurelia-logging-console",
        "bootstrap",
        "bootstrap/css/bootstrap.css!text",
        "fetch",
        "jquery",
        "rstacruz/nprogress",
        "moment",
        "systemjs/plugin-text/*.js",
        "components/jqueryui",
        "quilljs",
        "rich-text",
        "util",
        "signalr"
      ],
      "options": {
        "inject": true,
        "minify": true,
        "depCache": false,
        "rev": false
      }
    }

However, when I use the command au new --here to create a new project within VS2015, the generated project looks a little different. I have an aurelia_project folder and within that it looks like that's where all of the building/compiling happens. In that folder, there's an aurelia.json file and that's where I need to put all of the packages (I'm using NPM btw) I've been told. When I try to import these packages, it appends .js to the file path automatically and totally leaves out CSS so it's failing to load my CSS when the page loads. Here's what the aurelia.json looks like:

"dependencies": [
          "aurelia-binding",
          "aurelia-bootstrapper",
          "aurelia-dependency-injection",
          "aurelia-event-aggregator",
          "aurelia-framework",
          "aurelia-history",
          "aurelia-history-browser",
          "aurelia-loader",
          "aurelia-loader-default",
          "aurelia-logging",
          "aurelia-logging-console",
          "aurelia-metadata",
          "aurelia-pal",
          "aurelia-pal-browser",
          "aurelia-path",
          "aurelia-polyfills",
          "aurelia-route-recognizer",
          "aurelia-router",
          "aurelia-task-queue",
          "aurelia-templating",
          "aurelia-templating-binding",
          {
            "name": "text",
            "path": "../wwwroot\\scripts/text"
          },
          {
            "name": "aurelia-templating-resources",
            "path": "../node_modules/aurelia-templating-resources/dist/amd",
            "main": "aurelia-templating-resources"
          },
          {
            "name": "aurelia-templating-router",
            "path": "../node_modules/aurelia-templating-router/dist/amd",
            "main": "aurelia-templating-router"
          },
          {
            "name": "aurelia-testing",
            "path": "../node_modules/aurelia-testing/dist/amd",
            "main": "aurelia-testing",
            "env": "dev"
          },
          {
            "name": "jquery",
            "path": "../node_modules/jquery/dist/jquery.min"
          },
          {
            "name": "bootstrap",
            "path": "../node_modules/bootstrap/dist/js/",
            "main": "bootstrap"
          }
        ]
      }

So, I'm my VSCode project, I imported bootstrap css on the html page via a require tag. Is that still the proper way to do things? If so, how do I fix this importing issue?

EDIT

The answer below helped be get a bit further. Now the project builds and runs without any errors however, I can't seem to get the bootstrap css imported correctly.

Here's a snippet of my new aurelia.json file:

{
            "name": "aurelia-testing",
            "path": "../node_modules/aurelia-testing/dist/amd",
            "main": "aurelia-testing",
            "env": "dev"
          },
          "jquery",
          {
            "name": "bootstrap",
            "path": "../node_modules/bootstrap/dist/js",
            "main": "bootstrap",
            "resources": [
              "../css/*.css"
            ]
          }

So this is adding the css file into the bootstrap package. Now, in my typescript file, I'm calling import 'jquery' and import 'bootstrap' and I don't get any css still. Not sure how to fix this.

Answer 1

What happens is that aurelia skeleton-esnext uses SystemJS, and Aurelia-CLI uses RequireJS (SystemJS and WebPack will be supported on CLI in a near future). SystemJS and RequireJS are module loaders, and they behave a little different. That's why you have 2 different ways to configure the modules.

This link shows how to configure a lib that has a css file: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/9

"dependencies": [
  ...
  {
    "name": "nprogress",
    "path": "../node_modules/nprogress",
    "main": "nprogress",
    "resources": [
      "nprogress.css"
    ]
  }
  ...
]

The above code tells RequireJS to put nprogress.css in the bundled file. However, it doesn't tell where or when to import/require the css file, so you must import/require it in your app. Either using <require from="nprogress/nprogress.css"></require> in your view, or using import 'nprogress/nprogress.css'; in your view-model.

When you were using SystemJS you didn't have to import some css files because JSPM can detect some dependencies and generate a special syntax that tells SystemJS to load CSSs files. For example, when you install nprogress using JSPM, it generates the following file:

/* */ 
"format global";
"deps ./nprogress.css!";
/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
 * @license MIT */

;(function(root, factory) {
///....

The line "deps ./nprogress.css!"; tells SystemJS to automatically import/require nprogress.css when you load the module. Therefore, you don't have to import/require the css file in your view or view-model.

Hope this helps!

Answer 2

Check out the contact-manager tutorial by Rob Eisenberg

It shows how to add Jquery, Bootstrap to aurelia.json:

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

And how to require it in app.html:

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

I was able to successfully do the same for D3:

{
"name": "d3",
"path": "../node_modules/d3/build",
"main": "d3.js"
},

Then I was able to use it in my components .js file

import * as d3 from d3

[Edit] Just noticed tutorial link was included in above accepted answer, but keeping this as it shows the actual code for adding jquery/bootstrap, which has some elements missing in the OP examples, including after the edit.