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¶
- Launch Visual Studio Code and open an Mobile Development Kit application folder or a Git repository folder containing multiple Mobile Development Kit applications.
-
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...
orRun Task...
The bundle tasks for base applications (In Mobile Development Kit applications development, one application can depend on another one by defining aCIM
file in its own folder. The one being depended can also depend on other application using its ownCIM
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 formatMDK: bundle build
. - To begin the bundling process, select the task name that matches your application name and path.
- Select
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
orPROBLEMS
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. - You can manually trigger the bundling process at any time on any Mobile Development Kit file.
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.
Related Information¶
Debugging App with Visual Studio Code Debugger