English | 简体中文

Application Manager

Preview and manage your application from a framework perspective, Add NPM scripts and Application dependencies view to Explorer Panel, add Application Manager Panel to provide project dashboard and engineering capabilities (debugging and Publishing), friendly for React and Rax.

Application Manager Panel

Initialize State

After you install the Application Manager, an icon will be added to your activity bar. Click it to enter Application Manager Panel.

The initialization State appears if your current workspace is empty or isn't React/Rax application. The initialization panel automatically invokes the create application process, which you can also invoke by clicking the Create Application button on the panel.

Setting

You can set some configurations when using AppWorks by clicking "Settings" on the sidebar. These configurations only apply to AppWorks related operations.

1. Click Settings to enter the Settings page
2. Configure package management tools (default: npm)
3. Configure default image source (default: Taobao image)
4. Set up custom repositories (default: null)

Quick State

When your workspace is a React or Rax application, the Quick State appears.

Dashboard

The dashboard shows some status of the current application. If your application is in a project cycle, it will also show some information related to the R & D link.

Activate:

• Open through Dashboard in the sidebar quick entries
• Open through AppWorks: Dashboard option on the Command Palette

Explorer Panel

Actions View

1. View executable script information in the left pane.
2. Click the Play button to execute the script at terminal immediately.
3. Click the Stop button to end the corresponding script executed at terminal.

Debug

Debug in mobile device

1. Click the phone icon to open the phone debug mode
2. Select different devices for debugging
3. In responsive device, you can edit the device sizes, or drop the device to adjust sizes.

Add customize mobile devices

1. Select Edit from the device options to edit
2. Add a customize device or delete devices
3. Select the custom device for debugging

For more information, please see Reference Document

Node Dependencies

View the application dependency information and install new dependencies

1. View all installed dependencies in the project in NODE DEPENDENCIES in the bottom of ICE panel.
2. Click ⬆ button next to dependency item, you can update the dependency to the latest version.
3. Click Reinstall Dependencies button on NODE DEPENDENCIES header to reinstall all the dependencies of the project.

Install and reinstall dependencies

1. Click the + button on the NODE DEPENDENCIES header.
2. Select Install product Dependency or Debug DevDependency on the command panel that appears.
3. Type the npm package name and version information to be installed, such as' typescript@latest.
4. The npm package will be installed automatically. NOTE: If the package was installed, it will be reinstalled.

Command Panel

If you install AppWorks, you can activate other extensions in VS Code command palette.

1. Find AppWorks in the bottom right of VS Code.

   NOTE: if you do not find the AppWorks icon, Activate Extension the AppWorks plugin by following the action in 'Activate Extension'.

2. Click the AppWorks plugin icon to enter the AppWorks command palette.

More

This Extension power by AppWorks Team, it's part of the AppWorks, see AppWorks to know more features.