CLI user guides

Contact Manager Tutorial

Probably the best introduction to using CLI to create an application that is a bit more complex than the code generated by au -new command, is to follow the Contact Manager Tutorial article written by the most authoritative writer on Aurelia - Rob Eisenberg.

In this chapter we will not copy Rob's tutorial - but rather follow it, making remarks where needed to create the references to the GithHub resident sample contact-manager-tutorial which is written for the reader's convenience, strictly following Rob's tutorial.

First Action of interest

takes place in the Building the Application Shell section, specifically:

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

As explained in the Contact Manager Tutorial adding these two packages to our sample application contact-manager-tutorial results with following changes (besides adding them to the node_modules folder.

• Adding this section to aurelia-json file. As the tutorial points out - this causes jQuery, Bootstrap and all necessary CSS to be included in the vendor bundle and makes it reachable through the module system.

• Once these third party modules are added, this section of the app.html makes use of Bootstrap.

Second Action of interest

takes place in Adding a Loading Indicator section of the Contact Manager Tutorial article, describing the process of adding and activating the nprogress library.

We start by installing the library by

npm install nprogress --save

followed up by adding this section to the list of modules that will be bundled in vendor-bundle section of the aurelia.json file.

This example illustrates the process of adding the additional Typescript type definition files (for the nprogress library), achieved by executing the command:

typings install dt~nprogress --global --save

and as a result, the files index.d.ts and typings.json are added to the typings folder.

Note on type definition files

Aurelia CLI command line tooling uses the state of the art solution @types, for provisioning the application with the required set of Typescript type definition files, described in the article The Future of Declaration Files Since the Aurelia framework is distributed as a collection of modules (decision made to optimize modularity), Aurelia CLI generated skeleton creates type definition files in the node_modules folder as shown on the screenshot below

Section from the node_modules folder, showing aurelia-binding folder contents

The type definition files for the just added nprogress library does not yet appear in the @types repository, so we fetched it from the DefinitelyTyped, using the typings command as shown above.