Frustrations with Aurelia-CLI

1

I was an earlier adopter of Aurelia (having been a big fan of Rob’s work with caliburn-micro and durandal) and I used it for several projects early on. I’ve since spent time on other projects using other technologies and frameworks and recently started looking at Aurelia again and wanted to catch up on everything that is new since version 1.0. This is a summary of my experiences with Aurelia CLI.

Using the CLI seems super straight forward at the start. I like typescript and webpack, I choose the default typescript configuration:

 Name: aurelia2
    Platform: Web
    Bundler: Webpack
    Loader: None
    Transpiler: TypeScript
    Markup Processor: Minimal Minification
    CSS Processor: None
    Unit Test Runner: Jest
    Unit Test Runner: Karma
    Integration Test Runner: None
    Editor: Visual Studio Code

I choose ‘yes’ to install dependencies, and after a few minutes I’m informed that everyhing was successful and I just need to au run. So I CD into my new project folder and au run.

After a few minutes of confusion I scroll up in my command window and spot the localhost:8080 address that it’s running at, and attempt to navigate to that address. And I’ve hit an error:

i ｢wdm｣: wait until bundle finished: /app.cc8a8d75bf6df504bd61.bundle.js i ｢wdm｣: wait until bundle finished: /vendor.cc8a8d75bf6df504bd61.bundle.js × ｢wdm｣: ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.

Crap. Ok, I google the error and find the issue:

https://github.com/aurelia/cli/issues/852

Ok, so apparently there’s a bug that’s been around for a few weeks that breaks au run. The workaround is to use the --watch flag. So i do that, and I’m up and running with the basic skeleton.

The next thing I want to do is test out this library: https://www.npmjs.com/package/aurelia-dragula. I’m not really sure what the best way to install this library is, but aurelia install informs me that it can only help me if I’m using the Aurelia CLI Bundler. Fair enough, I guess that makes sense since I’m using webpack - so I assume I’ll be installing this library in the same way I install things in other webpack projects that I’ve done. (Note: this only makes sense to me, because I have familiarity with both webpack, and earlier aurelia versions/patterns/practices)

npm install aurelia-dragula --save

Which shows a bunch of log messages, and finishes with the following summary:

+ aurelia-dragula@1.5.3 added 1 package and removed 2630 packages in 69.016s

wait… what?! why were 2630 packages removed? I try au run --watch, and get the following error:
Invalid Command: run

At this point I have no idea what I’ve done wrong, or why au run is no longer a valid command. I’ve apparently done something to ruin or corrupt the project in this folder, but I don’t understand why installing a library did that.

A lot of time googling yields no results, so eventually I theorize that maybe I wasn’t supposed to use NPM to install, maybe I should have used yarn. So I completely start over with a new project and this time I use yarn add aurelia-dragula instead.

That apparently was the issue, and with the appropriate aurelia.use statement, I was able to get the aurelia-dragula library working.

That brings me to where I am now: frustrated and deflated with all of the snags and issues I hit just getting started with aurelia CLI. It makes me wonder: is this what I should be expecting with the rest of the Aurelia ecosystem?

TLDR list of issues:

  • Given that the current CLI has a default preference for webpack 4, this means that the documentation is largely irrelevant: http://aurelia.io/docs/build-systems/aurelia-cli#machine-setup
  • At the least, the basic au new -> au run really ought to work without errors. I’d also recommend finding a way to better highlight the address it’s being hosted at
  • I’m not sure why npm install messed up the works, but it would be nice if au would provide some kind of helpful error when… whatever happened, happens.

I’ve always been an advocate of Aurelia and I hope this message comes off as constructive rather than just criticizing.

1 Like
2

Regarding the missing/removed packages, I’m not sure that it is actually an aurelia issue or rather an npm issue. Running npm a second time seems to fix it every time (yes, the problem also seems to occur when you add a package later on).

3

I can probably justify cli with require option… But with webpack? Why would one add another layer for no real need? I struggled with materialize bridge cli 0.32.0 configuration for a couple of days only to find out that 0.33.1 broke it again

4

I have been in that situation. With regards to the npm issue (removing packages) use yarn add in place of npm install. This basically resolved all my package headaches. Check the CLI commands comparison here.
As to your other points, I could not agree more.

5

I had similar issues when running an old app (built with cli) after I updated the cli. I just abandoned the cli and went with aurelia-webpack-plugin. The switch over was so easy I was super impressed. Just had to make sure to use PLATFORM.moduleName where applicable. The cli is very nice but I like the webpack plugin because I feel more in control with how the app gets bundled.

6

There seems to be a lot of external issues affecting aurelia experience in general.
The mentioned webpack issue and the npm hell are the 2 most happening.

I’m sorry you felt that way… But keeps unfolding… with recent updates to webpack some css for asp.net core is broken as well…

your report is appreciated…
even more appreciated would be a PR to docs. (-:

7

@srowan if you have yarn installed, could you test again with au new? Pay attention when cli installs dependencies, it will use yarn when yarn is available.

If you then use npm install on yarn controlled node_modules folder, or use yarn on npm controlled folder, strange thing can happen.

8

The issue with npm install may be caused by https://github.com/yarnpkg/yarn/issues/5240