vscode-debuggermicro-frontendlaunch-configuration

How to debug a micro frontend app using module federation dynamic system host pattern in vscode


As per Dynamic system host example How can I configure debug on vscode? I am able to debug the host application but not the remote one.


Solution

  • Got it working. There was an @ character before the folderName which I was missing and stumbled upon when I debugged the same app in WebStorm.

    The application structure is:

    ├── remote
    │   └── .vscode
    │       └── workspace-launch-config
    └── host
        └── 
    

    So the working launch config in vs-code is-

    {
        "launch": {
            "version": "0.2.0",
            "configurations": [
                {
                    "type": "pwa-msedge",
                    "request": "launch",
                    "name": "Debug M3 @ 8080",
                    "trace": true,
                    "url": "http://localhost:8080",
                    "webRoot": "${workspaceFolder:host}",
                    "sourceMaps": true,
                    "sourceMapPathOverrides": {
                        "webpack://@${workspaceFolderBasename:remote}/*": "${workspaceFolder:remote}/packages/*",
                        "webpack://${workspaceFolderBasename:host}/*": "${workspaceFolder:host}/*"
                    }
                }
            ]
        }
    }