Creating new application | Aurelia-CLI

Custom

Note the red "number-markers" which indicate the sequence of mouse clicks needed to invoke Monterey UI elements.

Like all Monterey application creation wizards, the process starts with the choice of the template (Image 1, marker 1), followed by the definition of the location where the application will be persisted (Image 1):

• select the folder (marker 2)
• navigate it to the right location (marker 3)
• select the folder (marker 4)

Image 1

The next required data is the definition of the application's name (Image 2). This is the name that will appear on the Monterey's list-view of all open applications. Since this same name will be used as the name of the folder where the application "lives", this name needs to be unique and should not contain blank spaces. Observe that Monterey verifies each proposed application name for uniqueness.

Image 2

At this point (Image 3) the user is asked to choose between the several Aurelia-CLI templates (three at the time of writing this document; this number will increase as the Aurelia-CLI command line tool evolves.In this case we will select the Custom template (marker 1), which is currently the most customizable Aurelia-CLI template.

Image 3

This is the first in the series of Aurelia-CLI custom template additional specifications (Image 4) where we selected the Default template (marker 1). Click on the Next button (marker 2) leads to to the Transpiler selection (Image 5)

Image 4

Transpiler selection dialog (Image 5). We chose Babel (marker 1) and continue to Image 6 clicking on the Next button (marker 2).

Image 5

Style selection dialog - for simplicity we pick the standard CSS with no pre-processor (marker 1). Click on the Next button (marker 2) leads us to Image 7.

Image 6

Testing selection dialog (Image 7) where we select the Yes choice (marker 1). Click on the Next button (marker 2) leads us to Image 8.

Image 7

Image 8 shows the selection of the Editor / IDE from the list of alternatives that are defined using the App Launcher plugin (tile). For this example, we will select the Atom editor (marker 1) and move ahead by the clock on the Next button (marker 2).

Image 8

Image 9 depicts the complete project configuration definition, allowing the user to verify that the process so far resulted with the intended outcome (the previous button is provided for the case where something needs to be changed). In our situation, click on the Next button (marker 1).

Image 9

At this point we reached the most important step of the Monterey wizard - page where will eventually reside the Monterey workflow plugin (Image 10). At this time you see the workflow's "place-holder" implemented as a list of check-boxes presenting the list of application build options that are meaningful in the given context. As Monterey gets able to handle a lot more complex tasks (managing creation, building, testing and deployment tasks of several tens of applications at the same time, the concept of the "workflow of workflows" will be the best way to ensure correct and meaningful definition of all of these tasks running in a conflict-free fashion.

We accepted the complete offered workflow (marker 1) which will schedule the sequence of npm install and au run --watch for execution. Finish this wizard with the click on the Start button (marker 2), resulting with the activation of the Task manager plugin.

Image 10

Image 11 presents Monterey's main view indicating our custom-1 project as active (shown in red). Notice the Show irrrelevant tiles check-box (marker 1) and set it to checked state.

Image 11

Here (Image 12) we can see the effect of requesting to see irrelevant tiles which are shown with diagonal stripes - indicating that all these tiles cannot play any role in this specific project. This proves that Monterey has the ability to recognize any project's type (Aurelia-CLI in our case). See Monterey technical documentation - Project detection for more details.

Image 12

Continue from here

As the npm install task typically takes several minutes, we provided a cool little game activated by a click on the T-rex button (bottom right corner of the Task manager view

Image 16

This "CPU load graph" (Image 17) demonstrates how "heavy" is a typical load imposed by running npm application.

Image 17

After 239 seconds (on a very fast machine) the NPM install task finally ended (Image 18). Close the Task manager (marker 1), so we can see what changed as the consequence of running NPM install.

Image 18

At this point, the NPM manager is a lot "smarter" and provides the insight into the set of NPM dependencies of this application. Besideds displaying the list of dependencies, Monterey will look up the latest version and will match it with the currently installed version. By using two different colors (green and red), a visual representation of your dependencies' versions is displayed.

Image 19

Now, let's switch back to the main view, so we can (again) invoke the Task manager (Image 20, marker 1) with the intent to run the just built application.

Image 20

We can see that the NPM install task finished (Image 21, marker 1 - something we already knew), so select the au run --watch task (marker 2) from the list of meaningful tasks in this context and click on the Start this task button (marker 3) (indicating that we want to start the selected task).

Image 21

This Task manager view (Image 22) shows that the application is running (au run --watch), successfully started 4 seconds ago.

Image 22

more to come