Skip to content

Bundling Apps

After you have created, edited, or validated your Mobile Development Kit app, you must bundle the app metadata and JavaScript files for the metadata to be interpreted correctly by the Mobile Development Kit client app at runtime.

Prerequisites

Use the Mobile Development Kit extension for Visual Studio Code to modify and validate your app after importing it from the Mobile Development Kit editor on SAP Web IDE Full-Stack.

Procedure

  1. Launch Visual Studio Code and open an Mobile Development Kit application folder or a Git repository folder containing multiple Mobile Development Kit applications.

  2. Based on the validation status of your app metadata, perform one of the following:

    Note

    By default, auto-bundling is enabled. You can turn it off by selecting Code Preferences Settings and marking "mdk.autoBundle": false in the User Settings window.

    • You can manually trigger the bundling process at any time on any Mobile Development Kit file.
      • Select Terminal > Run Build Task... or Run Task... The bundle tasks for base applications (In Mobile Development Kit applications development, one application can depend on another one by defining a CIM file in its own folder. The one being depended can also depend on other application using its own CIM file. This dependency forms a tree like structure. The root of this structure is the base application.) available in the workspace is listed. The tasks related to Mobile Development Kit are shown in the format MDK: bundle build.
      • To begin the bundling process, select the task name that matches your application name and path.

    Triggering the bundle process enables validation of the app by default. If there are errors during the validation, you can see them in the TERMINAL or PROBLEMS view.

    You can turn off this default metadata validation behavior by selecting Code > Preferences > Settings and marking "mdk.validateBeforeBundle": false in the User Settings window.

    By default, the bundling process doesn’t stop even if there are errors found during the metadata validation.

    You can change this behavior by selecting Code > Preferences > Settings and marking "mdk.stopBundleOnValidationError": true in the User Settings window.

Results

Your app is now ready to be debugged. If launch.json is created and one or more appRoot settings for the configurations are specified, then the files (bundle.js and bundle.js.map) are copied to the locations specified by those appRoot settings. Else, the files (bundle.js and bundle.js.map) are copied to the Mdk: Debug App Root value from the settings, if present.

In the watch mode, the debug can be run via the following options:

  • Run Without Debugging
  • Launch on iOS/Android

However, if you select the Debug > Attach on iOS/Android option, which isn’t run in the watch mode, the app isn’t relaunched automatically.

Incremental Bundling

The Mobile Development Kit extension for Visual Studio Code uses an application-bundler tool, which depends on the webpack to bundle the metadata into a bundle.js file. The Mobile Development Kit client then consumes this file.

Incremental bundling helps to improve the performance of the application-bundler when Visual Studio Code is in launched (whether debugging or not) mode and the incrementalBundle parameter is set to true in the launch configuration file. This option is enabled by default and therefore bundling will be incremental unless you set it to FALSE in the launch.json file.

When the incrementalBundle parameter is set to true, debugging or running the project via the Launch on iOS/Android and Run Without Debugging options occurs with incremental bundling.

Once changes are made to any metadata file (including .css, .properties, .page, .js files, and so on), the incremental bundling process is triggered while saving the file. Irrespective of the size of the project, the new bundle.js file is generated in one to two seconds, and is deployed to the simulator automatically before relaunching the Mobile Development Kit client. The incremental bundling process does not end until you terminate your debug or run.

Debugging App with Visual Studio Code Debugger

Last update: April 14, 2021