Creating new application

skeleton-esnext

Note the red "number-markers" which indicate the sequence of mouse clicks.

Start by selecting the template skeleton-esnext-webpack(Image 1, marker 1).Then continue with the definition of the location where the application will be persisted (marker 2). This action will invoke the Files Explorer, where you have to define the folder (marker 3) and click on the Select folder button to define the location where the application will be stored.

Image 1

Having defined the path to the folder where the application is stored, click one the Next button (marker 1, Image 2).

Image 2

The next required data is the definition of the application's name (Image 3). 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. Observe that Monterey proposes and verifies the application name for uniqueness.

Image 3

Image 4 shows the completed project's configuration, offering the choice between Previous button and the Next button - we will take that second choice (marker 1).

Image 4

Now (Image 5), we reached the most important step of the Monterey wizard - page where will eventually reside the Monterey workflow plugin. 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.

The concrete example here is rather simple: run the equivalence of npm install, jspm install, load the app and gulp watch tasks, by invoking respective API (action different from invoking the same service using the console). This execution is triggered by the click on the Start button (marker 1).

Image 5

Click on the Start button on Image 5, marker 1 above causes the switch of the Monterey's view - from the "workflow" to the Monterey Task manager view (Image 6). This is the most often used Monterey integrated tool, which is the controlling and management entity for handling all running Monterey applications. At this time we have a single application (Default-ESNext) running, and you can see that the currently running task is NPM install, which will be followed by two more tasks. You can also see the embedded console showing the line-by-line progress of the currently running .NPM install task.

Note that Monterey is designed to be able to run many tasks in parallel - this view is restricted to show only the information for the selected project (skeleton-esnext).

Task manager, being aware of this application context and state, proposes two most likely used tasks - gulp prepare release and gulp watch (marker 1). Click on gulp watch button.

Image 6

Image 7 shows the Task manager showing the details of the gulp watch task - which ended with the message: "Description: Project running at http://localhost:9000"

Image 7

Click on the Close button on Image 7 above, will result with closing the Task manager view, making the Main view visible. Click on the Chrome tile (Image 8, marker 1) to see the running app in that browser instance (Image 9, below)

Image 8

Image 9