Aurelia NPM setup

Help Requests
1

I configured Aurelia in webpack without using the provided CLI tool. I did this because I needed to integrate aurelia into an existing build system, with multiple apps and their respective particularities. I used the aurelia-framework NPM package, which is in version 1.3.1. Everything works, however, I’m not sure the package is updated. I configured a cli project just to see what aurelia generates and I dont think I’m on the same versions or even libraries for that matter. I guess my questions are as follows; is CLI the only way to go? Is the aurelia-framework NPM package in fact maintained? What version should I be coding against? Another thing is the fact that I cannot seem to find any specifics on the vnext version (aurelia 2 I presume) other than the standalone repo, has this already been realeased?

1 Like
2

As far as I can tell, you can run Aurelia with just a proper WebPack configuration file, just make sure to include every loader that you’ll need and the aurelia-webpack-plugin package. The CLI is just there to help you choose and prepare necessary npm packages it needs but if you know what you want and need then go ahead. If you can’t get it to work without the CLI, then maybe just do a quick one with CLI and compare with the one you did without, you most probably forgot some packages here and there.

As for Aurelia 2, it’s not out yet and most probably will take few more months to be released though it’s in alpha so you can try it if you wish but the docs are not all done yet. The best place to know what’s left is probably the GitHub Aurelia milestones (and the aurelia/aurelia repo is the new one that was created for au2).

1 Like
3

Without cli:

Aurelia 2 skeletons:

1 Like
4

Hey thank you so much for taking your time to respond. I might not have been entirely clear in my question. My webpack build works and I have a running Aurelia app. However, I’m using the npm packages ‘aurelia-webpack-plugin’, ‘aurelia-bootstrapper’ and ‘aurelia-framework’, the latter having been updated last in 2019. Looking at the cli example app I see something called ‘aurelia-tools’, but no reference to ‘aurelia-framework’ although the package is in the node_modules (prob. a dependency of ‘aurelia-tools’ or something other). My question is; am I right to use ‘aurelia-framework’, or should it be some other package/lib?

1 Like
5

Aurelia 1 got a very modularised design, there are quite a few core modules working together.

The first module loaded by webpack is aurelia-bootstrapper, NOT your local src. In your webpack.config.js

entry: {
    app: [
      // Uncomment next line if you need to support IE11
      // 'promise-polyfill/src/polyfill',
      'aurelia-bootstrapper'
    ]
  },

aurelia-bootstrapper then load your local src/main.js by default conventions, and through your config in main file, it find out what other aurelia modules to load (like aurelia-router and aurelia-event-aggregator). Webpack bring all them in, plus the dependency tree traced (starting from src/main.js).

The aurelia-bootstrapper’s package.json listed all other aurelia core modules your app might need. There is one problem of this modularised design: it’s hard for user to remember where to import certain features, for example, import {bindable} from 'aurelia-binding'; or aurelia-templating? That’s where aurelia-framework came in, it re-exports all features from main core modules. So that user can do import {bindable} from'aurelia-framework'; without knowing the details.

As a fact, aurelia-bootstrapper and aurelia-framework are rarely updated, because

  1. they are pretty tiny.
  2. they don’t need to. npm install ensures your app will get latest version of other core modules because of the semver range listed in the 2 modules’ package.json.

aurelia-webpack-plugin is a different beast. Because Aurelia app is heavily convention based (to cut down glue code). Webpack doesn’t support Aurelia out of the box, for example, it doesn’t understand aurelia-bootstrapper depends on your local src/main.js. For very long time, it was not possible to build Aurelia app with webpack. Then @jods4 created aurelia-webpack-plugin to teach webpack about Aurelia’s conventions. You can see the sheer volume of the code in aurelia-webpack-plugin to understand how much work needed for the integration.

aurelia-webpack-plugin also provided options to customise Aurelia’s conventions, but they are not well documented.

aurelia-tools is legacy, you don’t need it. In latest aurelia-cli, we don’t put aurelia-tools in your app anymore.

4 Likes
6

Wow, thank you so much, I get it now :smile:! I think my setup is correct then, albeit a little hacky - I manually bootstrap and inject the pal-loader-entry, since I have many app entries in my build and could’nt figure out a way to make it work with the boot-strapper configuration from the docs. But, again, thanks alot man I don’t think I have too much to worry about, as long as I’m not using the wrong library or similar.

1 Like