CLI user guides

Basic CLI application

Creation

This application is the minimal version created by accepting (almost) all default prompts from the CLI started as au new command (see here for more details). It results with the following project configuration

Project Configuration

    Name: cli-basic
    Platform: Web
    Bundler: Aurelia-CLI
    Loader: RequireJS
    Transpiler: TypeScript
    Markup Processor: Minimal Minification
    CSS Processor: None
    Unit Test Runner: Karma
    Editor: Visual Studio Code

Its code is maintained here.

Details on application structure

The rest of the chapters in the Initial steps section are based on applying the analysis of the Basic CLI application to the process of expanding this basic application.

1. index.html file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body aurelia-app="main">
    <script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
  </body>
</html>

There are two important observations here:

The <body element declares the application's entry point (this is really nothing new for Aurelia developers.
The script tag <script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script> defines the Aurelia CLI bootstraping process.

The second observation is important in the context of bundling - as Aurelia CLI managed application is always bundling its classes and modules. In order to realize the importance of this second observation, we need to have a more detailed on the following

2. aurelia.json file

There are three subsections of this file that need additional comments

2.1. app-bundle - definition of app bundle content

This is the bundle that contains all of the application's modules, defined by "globs" as

       "name": "app-bundle.js",
        "source": [
          "[**/*.js]",
          "**/*.{css,html}"
        ]

Note that it minifies and bundles all Javascript files, created by Typescript compile from user source (.ts) files

2.1. app-bundle - prepend section of vendor bundle

2.3. vendor-bundle - dependencies section of vendor bundle

The vendor-bundle contains everything else - notably used components of the Aurelia framework, listed as entries in vendor-bundle's dependencies section - as shown below:

[
  "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": "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"
  },
  "text"
]

Basic CLI applications