What Is Aurelia-CLI? How Does It Work?

This tutorial is a little outdated however I made an updated video on how to use Aurelia CLI. Check it out here!

Aurelia is the latest JavaScript single application framework. Recently the Aurelia team release a tool called Aurelia-CLI. This is a command line tool that will help with bundling and scaffolding. We'll be going over some basic commands today.

Alpha

Before we begin, as of this writing, the CLI is at version 0.2.1 in an alpha state. You may run into bugs and issues. If you do run into issues you can report them on their official Github page. I'm sure as time goes on things will get more stable.

Installation

Since this is a command line tool you'll need to use the command line (duh). I've tested the CLI on Ubuntu and on my Mac so it should work although YMMV.

$ npm install aurelia-cli -g

After it's done installing you can double check that it's working by running this command

Bundling

I won't get into this too much since the official Aurelia blog had a fairly good writeup on this, however let's say we want to bundle our app up instead of having a 200+ individual requests for every page load. One good reason to do this is if you were going to deploy this to production.

First we'll edit the config.js file in the root of our project and turn off buildCSS. It should look something like this.

Now we can tell Aurelia what to bundle. To do that we'll need to create an aureliafile.js file in the root of our project folder. First we'll need to make sure we have a local version of the aurelia-cli installed. Note: This is not the aurelia-cli with -g command, we are not installing it globally

The modules section will take all our modules and minify and bundle them. It will then inject them into the config.js file so the bundle will be automatically loaded when the application requests any of the modules included in the bundle.

The template section will create a new file in the dist folder called app-bundle.html. This bundles all our templates in a way that the aurelia-loader understands. The inject command will create a link at the end of our body in our index.html file.

To create the bundle run this command.

$ aurelia bundle

FYI you may need to run aurelia bundle --force if you already have a bundle in the dist folder

Hooray! If all is well you can check out the dist folder and you should see the bundle and minified files. If you run gulp watch again you'll notice a lot fewer requests.

Next Up

There is a lot more you can do with Aurelia-CLI, like plugins. We'll cover that in our next tutorial. Hope you found this helpful.