App Managers

In Apex Designer you see changes that you make real-time.

An App Manager retrieves the generated source files from Apex Designer, builds the client and server portions of your app, runs the app and provides access to logs.

When you create a new project, an App Manager is created for you. To start App Manager for a project, use the Start App Manager icon button in the toolbar.

As your App Manager starts, messages will be displayed in the toolbar:

App Managers automatically stop after two hours of inactivity. If you are idle for more than two hours, the Start App Manager icon button is shown in the toolbar again. Click it to restart your App Manager.

Using App Manager

Open the App Manager by selecting the status text in the toolbar:

The App Manager dialog is shown. You can use the dialog, but App Manager is more frequently used in a separate browser tab. To open in a new tab, click the Launch App Manager in a New Tabfullscreenbutton on the dialog:

You can also use the App Managers page in Project Settings to start and stop your App Manager. For more details, see App Manager Actions below.

Flow of Activity

There are several steps that take place between making an update in Apex Designer and seeing results in the running application:

Generate - Code is generated when you click one of the Generate buttons in Apex Designer, generating either the entire app or a single artifact such as a User Interface or a Business Object.
Sync App - When generate completes (app generate or a single artifact generate), App Manager is notified and it pulls the updated files from Apex Designer.
Server Dependency Install - Any server dependencies are installed, if needed.
Server Build - Code is transcompiled from TypeScript to the Javascript.
Start Application - The server portion of the app is started.
Client Dependency Install - Any client dependencies are installed, if needed.
Application Building - Client code is transcompiled from TypeScript to JavaScript.
Application Running - The application is fully up and running.

Events

Events show a list of activities as they occur in App Manager and how long ago the Event completed or was updated. Expand an event using the expandexpand_morebutton. Here some important Events:

Synchronizing files complete is the list of files that are added from Apex Designer into App Manager and any files that are removed.
Server or Client dependencies installed is a summary showing the progression of NPM package installation.
Application running shows the output of the running application, including any output for Debugging Behaviors .
Server build complete is a summary of the build of the server code.
Build Complete is a summary of the client build.
Build Failed shows any errors that occur during the build.
Application error includes server-side application errors.

Actions & Settings

sync Sync App pulls the latest files from Apex Designer

check_box Clear logs on sync sets whether to clear the Events with each sync

build Build App initiates the compile of the client code

arrow_drop_down Development Build / Production Build selects which type of build to run

stop Stop App stops the running application

play_arrow Start App starts the application

clear Clear Logs empties the list of Events

exit_to_app Launch API Explorer opens a new tab showing the Loopback API Explorer for the app

launch Launch Application opens a new tab showing the running application

Tabs

check_box_outline_blank Status for Events, actions and settings

folder_open Files for generated files and build files (see below for further details)

list Dependencies for server and client dependencies

Using the Files tab is rarely necessary. The Files page in Apex Designer, is better for viewing source; use the Files icon from the navigation ribbon to show it. However, there are times when the Files tab is useful. You can navigate through the file tree to view files from NPM node modules that are dependencies within the project. The Files tab is also used when clicking into a link from an Event on the Status tab, including errors that reference specific files.

Restarting App Manager

Next to the tab selections in the toolbar is the Restart App Managerpower_settings_newbutton.

Be careful not to confuse this with restarting the application; this button restarts the App Manager itself. Once clicked, a confirmation dialog allows you to select whether to remove the application files upon restarting.

App Manager Actions

As mentioned above, you can navigate to the App Managers page from Project Settings. From there, you can stop, start and delete an existing app manager.

From the top of the App Managers page, use the Refreshrefresh button to re-read the list of app managers and their statuses.

For each app manager, a row including their name, URL and actions is shown. Here are the actions:

favorite This is your default app manager for this project

play_arrow Start this App Manager initiates the start of the app manager

stop Stop this App Manager shuts down the app manager

delete Remove App Manager deletes the app manager completely

You can also select an App Manager on the list to show the page for that App Manager. See below for Configuring an App Manager.

Adding an App Manager

To add a new App Manager for the project, use the Add App Manager floating action button.

By default, the new App Manager is added to the Apex Cloud. You can also select to configure an App Manager using an environment that you manage by selecting the Local / On-Prem / Private Cloud option.

Configuring an App Manager

From the Project Settings page, under App Managers, you can select an App Manager to view and update the configuration.

The Name and URL of the App Manager are shown. The URL displayed is used for the App Manager as well as the running application, including the API.

Change the version of the App Manager by selecting a new version. New updates are frequently available and it is recommended that you use the latest version.

A Sync API Key is used to allow an App Manager to retrieve generated files from Apex Designer.

The list of Environment Variables should only contain values for items that are security-sensitive. Examples include database passwords and API keys. See Managing Sensitive Environment Variables for details.

Here are some additional actions:

launch Opens the App Manager in a new browser tab

visibility Show Sync Key toggles showing/hiding the Sync API Key

refresh Generate New Sync Key creates a new key

delete Deletes an environment variable

To Add another environment variable, type the name in the field and press enter.

Delete This App Manager will remove it entirely.

A dynamic build and run environment for your app