VS Code launch.json to run and debug a MERN app - debugging

Question

I'm trying to setup my debug environment on VS Code to run and debug a MERN app.
I currently have this launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node: Nodemon",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"dev"
],
"outputCapture": "std",
},
]
}
It's working just fine, but with it I can only have breakpoints in the backend and not in the React app on the frontend.
The script yarn dev (package.json in the backend) runs both backend and frontend with concurrently:
Here's my scripts in package.json in the backend:
"scripts": {
"start": "node backend/server.js",
"server": "nodemon backend/server.js",
"client": "yarn --cwd frontend/ start",
"dev": "concurrently \"yarn server\" \"yarn client\""
}
What would be a working launch.json that would allow me to have breakpoints in the frontend as well?

Answer 1

One way to do this is to use VS Code's Multi-target debugging:
https://code.visualstudio.com/docs/editor/debugging#_multitarget-debugging
"Using multi-target debugging is simple: after you've started a first debug session, you can just launch another session. As soon as a second session is up and running, the VS Code UI switches to multi-target mode".
If you prefer to use launch.json, you can create a compound launch configuration, like this:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Node: Nodemon",
"runtimeExecutable": "yarn",
"runtimeArgs": [
"dev"
],
"outputCapture": "std",
},
{
"type": "node",
"request": "launch",
"name": "Client",
"program": "${workspaceFolder}/client.js"
}
],
"compounds": [
{
"name": "Server/Client",
"configurations": [
"Node: Nodemon",
"Client"
],
"preLaunchTask": "${defaultBuildTask}",
"stopAll": true
}
]
}
The configurations will be launched in parallel.