On sample code using in this guide

Expanding basic CLI to full navigation skeleton

This section explains the process of constructing the Skeleton Typescript sample, starting from the Basic CLI application, process that results with the well known rendering:

Steps

1. Add additional files from the original Skeleton Typescript sample:

• blur-image.ts
• child-router.html
• child-router.ts
• nav-bar.html
• users.html
• users.ts
• welcome.html
• welcome.ts

As you can verify by inspecting the src folder of the already finished typescript aplication, all those source files are completely unchanged. That should not be surprising of course - CLI is very respectful of all existing Aurelia applications.

There is no need to change anything in the app-bundle section of course - the "glob" will fetch all application transpiled source code.

Lastly copy the whole styles folder to the root level of this app. Add the line to

    <link rel="stylesheet" href="styles/styles.css">

to our new index.html file

2. Add the third party libraries

Since this application uses several third party modules (bootstrap and its dependency jQuery as well as aurelia-fetch-client, which requires the fetch polyfill, let's first execute the following commands (all in the terminal windows):

npm install bootstrap --save

Looking at this line at the original Skeleton Navigation, we should install the jQuery version 2.2.4 - as it will ensure identical behavior as the original as well as proper function of the next application in our series Skeleton Typescript KendoUI:

npm install jquery --save
npm install aurelia-fetch-client --save
npm install whatwg-fetch --save

3. Update the aurelia.json file

Similarly to the case described in the previous chapter (Basic CLI application), we only need to add the following "snippets" at proper locations in the "vendor bundle" portion of the aurelia.json file.

1. add

          "aurelia-fetch-client",
   

   after this line.

2. add

          "jquery",
          {
            "name": "bootstrap",
            "path": "../node_modules/bootstrap/dist",
            "main": "js/bootstrap.min",
            "deps": ["jquery"],
            "exports": "$",
            "resources": [
              "css/bootstrap.css"
            ]
          },
          {
            "name": "fetch",
            "path": "../node_modules/whatwg-fetch",
            "main": "fetch"
          }
   

   after this line.