Electrode Native
v0.48
v0.48
  • README
  • INTRODUCTION
    • Overview
      • What is Electrode Native
      • Why use Electrode Native
      • What is a MiniApp
      • Electrode Native workflow
      • Native dependencies management
      • JS/Native communication
      • Requirements
      • Upgrading Electrode Native
      • Contributing
  • REFERENCE
    • Bundle Store
    • Composite
    • Container
      • What's inside
      • Publication
      • Integration
      • Initialization
      • Launching MiniApps
    • Cauldron
      • Structure
      • Setup
      • Compatibility checks
      • Guidelines
    • Manifest
      • Override
      • Native Modules
      • Configurable Modules
    • Runner
    • APIs
      • Project Generation
      • Implementation
      • Versioning
      • Guidelines
    • Bridge
      • Message Types
      • Communication
      • Leveraging APIs
    • CLI
      • Global CLI
      • Local CLI
    • GLOSSARY
  • GUIDES
    • Debugging multiple MiniApps
  • CLI COMMANDS
    • add
    • bundlestore
    • binarystore
      • add
      • get
      • remove
    • code-push
      • patch
      • release
      • promote
    • compat-check
    • create-api-impl
    • create-api
    • create-composite
    • create-container
    • create-plugin-config
    • publish-container
    • transform-container
    • run-container-pipeline
    • create-miniapp
    • link
    • regen-api
    • regen-api-impl
    • run-android
    • run-ios
    • start
    • unlink
    • upgrade-miniapp
    • cauldron add
      • file
      • jsapiimpls
      • miniapps
      • nativeapp
    • cauldron config
      • get
    • cauldron del
      • file
      • jsapiimpls
      • miniapps
      • nativeapp
    • cauldron get
      • config
      • dependency
      • nativeapp
    • cauldron repo
      • add
      • clear
      • current
      • list
      • remove
      • use
    • cauldron update
      • file
      • jsapiimpls
      • miniapps
      • nativeapp
    • cauldron batch
    • cauldron regen-container
    • cauldron upgrade
    • cauldron why
    • github
      • github create-ref
      • github delete-ref
      • github align-dependencies
    • platform
      • plugins
        • list
        • search
      • config
        • set
        • get
        • del
        • list
      • install
      • versions
      • uninstall
      • use
Powered by GitBook
On this page
  • Prerequisites
  • Setup
  • Step 1: Prepare working directory
  • Step 2: Link MiniApps
  • Step 3: Initialize parent project
  • Step 4: Create a debug configuration
  • Debugging
  • Step 1: Create a composite
  • Step 2: Open the project and set breakpoints
  • Step 3: Attach the debugger
  • Step 4: Enable JS Debugging in the app
  1. GUIDES

Debugging multiple MiniApps

PreviousGLOSSARYNextadd

Last updated 3 years ago

Debugging individual MiniApps (running standalone) works similar to debugging regular React Native apps. See for more information.

The rest of this guide focuses on a setup to debug multiple MiniApps with the help of the command and a local .

Prerequisites

  • All prerequisites of and

  • The VS Code extension

Setup

Step 1: Prepare working directory

Inside a new directory (e.g. workspace), clone all MiniApps that you want to debug.

In this example, for two MiniApps details-miniapp and list-miniapp, the directory structure should look like this:

workspace/
├── details-miniapp/
└── list-miniapp/

Step 2: Link MiniApps

Run ern link in each MiniApp directory.

Step 3: Initialize parent project

Run yarn init --yes (or npm init --yes) in the parent directory (workspace) to create a package.json file. Then add the React Native dependencies:

yarn add react@16.8.6 react-native@0.60.6

Use the same versions of react and react-native that are used by the MiniApps (in this example React Native 0.60.6).

The structure should now look like this:

workspace/
├── details-miniapp/
├── list-miniapp/
├── node_modules/
├── package.json
└── yarn.lock

Step 4: Create a debug configuration

Visual Studio Code

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to packager",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "attach",
      "sourceMapPathOverrides": {
        "../../composite/node_modules/details-miniapp/*": "${workspaceFolder}/details-miniapp/*",
        "../../composite/node_modules/list-miniapp/*": "${workspaceFolder}/list-miniapp/*"
      }
    }
  ]
}

Note that the package name of the MiniApp could be different from the directory name in the workspace folder.

"../../composite/node_modules/[MINIAPP_PACKAGE_NAME]/*": "${workspaceFolder}/[MINIAPP_DIRECTORY_NAME]/*"

At this point our directory structure should look like:

workspace/
├── .vscode/
│   └── launch.json
├── details-miniapp/
├── list-miniapp/
├── node_modules/
├── package.json
└── yarn.lock

The basic setup is now complete. If you need to add more MiniApps, clone them into the workspace directory, run ern link, and add a corresponding mapping entry to sourceMapPathOverrides configuration.

Debugging

Step 1: Create a composite

Pass an absolute path as the --compositeDir parameter to ern start:

ern start [options] --compositeDir /path/to/workspace/composite

Once composite generation is done, we should have the following structure:

workspace/
├── .vscode/
│   └── launch.json
├── composite/
├── details-miniapp/
├── list-miniapp/
├── node_modules/
├── package.json
└── yarn.lock

Step 2: Open the project and set breakpoints

Open the workspace directory in VS Code (if you have not done so already) and launch the native application (if it is not already running). It may have been launched automatically by ern start.

Now you may set breakpoints in the JavaScript code of the MiniApps.

Step 3: Attach the debugger

To attach VS Code to the React Native debugger, run the Attach to packager debug configuration. Make sure the ern start command has completed and is still running in the background. You will notice an indicator that will keep spinning until the next step is completed.

Step 4: Enable JS Debugging in the app

The command is needed to map the source location between the composite and the MiniApp directory, but also to ensure that any changes to the MiniApp directory are propagated to the Composite.

This is necessary for the extension to work properly.

This configuration will be used to attach the (actually the debug adapter) to the native application.

Follow the instructions in to create a new launch configuration and open the resulting launch.json file.

Manually add a sourceMapPathOverrides section to configure :

We can now start debugging with the help of the command.

In order to debug and step through the code, we require a locally generated inside of the workspace directory.

The MiniApps to include in the composite can be passed using the --miniapp (or -m) flag. If no other options are defined, the ern start command requires an active . See ern start --help for more information.

In the native application, bring up the , and turn on JS Debugging by tapping Debug (Android) or Debug JS Remotely (iOS). This will result in attaching to the Visual Studio Code debugger. If debugging was already turned on in the native app, disable it first, then re-enable it. In VS Code you should now see that the debugger was attached. Check if the breakpoints are triggered in the sources of details-miniapp and list-miniapp, and debug the MiniApps in VS Code.

Debugging
ern start
Composite
React Native
Electrode Native
Visual Studio Code
React Native Tools
ern link
React Native Tools
VS Code debugger
React Native Tools
Launch configurations
sourcemaps
ern start
Electrode Native Composite
Cauldron
React Native developer menu