skeleton-typescript-webpack

Creating new application

skeleton-typescript-webpack

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

Image 3 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 3

Now (Image 4), 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 very simple: run the equivalence of npm install, Loading project tasks and npm start by invoking npm API (action different from invoking the same service using the console). As suggested on the Image 4, accept all provided defaults and click on the Start button, to start this workflow.

Image 4

Image 5 shows the Task manager indicating the task NPM install being executed (running for 10 seconds so far) and the embedded console provides the npm streaming log.

Image 5

At this point the application build process reached the npm start step, which invoked the Webpack loader to start the application, running at the port 9000. Dismiss the Task manager by clicking on the Close button (marker 1).

Image 6

In the Main view (Image 7, below) click on the Chrome tile, knowing that Monterey will invoke it with the URL of the just started app running at port 9000.

Image 7

Image 8 depicts Montery and Chrome running the app. The nice "side by side" layout is not created by Monterey, it is man made for the sake of this presentation.

Image 8

In order to stop the still running npm start process, click on the Task manager icon on the Monterey toolbar (Image 9, marker 1), which indicates that one task is running.

Image 9

Using context menu off the Task manager's entry indicating the running task (Image 10, marker 1) select the End task context menu item, and close task manager (marker 3).

Image 10

The x preceding the npm start list entry indicates that this task (npm start) was successfully ended.

Image 11