About skeleton-navigation-typescript-kendo-bundled

Introduction

This document serves as a companion to KendoUI Bridge Documentation - chapters:

• esnext-kendo
• Bundling details
• Bundling step by step instructions

Each of these documents references to this article as well.

---

How to build the current release (September 2017)

The most recent release of the skeleton typescript app is 1.2.2 available as zip file here. Unlike most other libraries, Aurelia ships each component of the framework as a module, so the way to fetch all needed type files is a bit more convoluted that doing the same for other libraries shipped as a single module. At the moment Aurelia skeleton typescript app defines its requirements for type definition files in the file typings.json, which exists at the application's root level (see Image 1 below):

Image 1

The content of this file defined by the green rectangle needs to be removed in order to correctly generate the Typsecript type definition files - process that takes place while executing the command npm install. As this line indicates npm will run the command typings install before any other actions it takes.

Running typings install (note that typings is a locally installed command line tool) reads the file typings.json (which we just edited to remove the globalDependencies section, that is not needed any more) and creates the new "run time" folder typings shown below:

Image 2

Note: The attribute "run time" applied to the folder object indicates that the information in that folder is typically not persisted in the related git repository.

---

Aurelia Typescript and KendoUI bridge

This section mostly follows the typescript-kendo tutorial, which is a part of the Aurelia KendoUI Bridge Catalog application's Documentation section. Instead of providing references to the Installation chapter of that same Catalog application, we will instead describe the skeleton-typescript-kendo which is a part of the set of samples, associated with this book.

Unlike the situation in the typescript-kendo tutorial, this skeleton-typescript-kendo follows the (slightly modified) installation of KendoUI PRO. So, we are starting with copy of the already described skeleton-typescript sample, further augmented with a few additions:

1. KendoUI SDK is in the kendo-sdk folder.

2. The command

   jspm install css aurelia-kendoui-bridge
   

   was run already (note the absence of the kendo-ui item, since this SDK is already a part of this application.

3. The just installed kendo-ui-bridge is activated in the main.ts class

4. A new KendoUI Bridge component Autocomplete is added (autocomplete.html, autocomplete.ts and autocomplete.css).

5. The app.ts has added the autocomplete route

6. The config.js file is updated to enable the application code access to the KendoUI SDK and KendoUI bridge.

7. (very important) Execute the command:

npm install @types/kendo-ui

which will add all kendoui type information data to the application (see the next section below for more information on this step).

---

Run this app (after being built by npm install && jspm install) with the command gulp watch - and you should see this:

Image 3

A few comments on installing all needed typescript type files

This sample application is (as stated above) a copy of skeleton-typescript sample, so, all of the issues related to the aurelia framework type definition files are explained and discussed in Analysis of the aurelia typescript skeleton navigation.

Here, we need to only explain the step 7 above, which uses the newest approach to getting typescript type files installed, approach that clearly works together with the previous method (Typings - The Typescript Type Definition Manager). Instead of creating the root level Typings folder

Image 4

KendoUI SDK types for Typescript are added to the @types section of the node_modules folder

Image 5

... and there is full support for all Kendo data types:

Image 6

---

Bundling and deployment at GitHub gh-pages

Bundling

This section covers the information described in Aurelia document Bundling an Aurelia JSPM Application, so we will just indicate the "pieces" described in that document.

1. The bundling "strategy" is written in the bundles.js file, which defines three bundles:

   a) app-build containing app application files.

   b) plugins containing all Aurelia KendoUI bridge files

   c) kendo-build which contains all KendoUI SDK widgets.

2. To create these bundles run the gulp bundle command in the application's root folder.

3. In order to create the application ready for deployment, run gulp export command in the application's root folder.

4. It is often useful to verify that this "exported" application runs correctly, before actually deploying it. In otder to do that change the current directory to export folder and invoke the http-server, a simple, zero-configuration command-line http server. (If you do not have this utility installed, simply run npm install http-server -g).

Deployment

Preparing for deployment

While Aurelia bundler makes the task of creating the collection of files that would have to be uploaded to the server host really simple - just execute the command gulp export in the application's root folder, there are some additional actions that need to be done correctly in order to make the deployment successful.

Before running the gulp export command, you need to correctly define the content of the file export.js, where:

1. Section list defines the files from your application than needs to be copied to the export folder without bundling. The reasons for not bundling them vary - files like index.html, config.js, spm_packages/system.js need to be present unmodified for the application bootstrap process, while other files are copied for other reasons. File kendo-sdk/js/kendo.all.min.js is the already bundled collection of all KendoUI widgets, so it makes no sense to bundle it again (note this line from the kendo-build section of the bundles.js file, that makes sure that kendo-sdk/js/kendo.all.min.js does not get bundle, so it has to be copied).

2. Section normalize containes the jspm packages that have unbundled resources that need to be exported. These files are in versioned folders and thus must be 'normalized' by jspm to get the proper path

Deploying to gh-pages

This is really simple, due to the very elegant service offered by GitHub, described GitHUb Pages document. Just follow these steps:

1. Start with preparing the GitHub Pages section of the settings page of your application's repository (the page referenced in this sentence belongs to the application skeleton-navigation-typescript-kendo-bundled being described here). As shown in Image 7 below, we decided that the site will be built from the /docs folder in the master branch, to separate the actions related to bundling and exporting the code from the action of deploying the site, while still keeping everything in the same repository

   
   
   Image 7

2. Once you have the bundled application completely tested, you need to copy all the code from the /export folder into the /docs folder. It is important to realize that you need to create the "local override" of the root level .gitignore document in order to allow the git synchronization process to upload the jspm_packages folder

---

---