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

Question

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.

Answer 1

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}/*"
                }
            }
        ]
    }
}