Often you need to run multiple processes at once, but debug them as if they were the same project. A common scenario for this is running a React, Angular or Vue app, along with some sort of API service using Express or Hapi. VS Code has a feature called "Compound Launch Configurations" that allow you to launch multiple debug processes at one.
Open "4-compound-launch-config"
Start the frontend application
Create two launch configs..
One for the Node process that runs in the "/server" folder
One of the Chrome process that runs from the root
Create a compound launch config that includes both of the above configs
Run the compound launch config
Add a breakpoint to "src/App.js"
Add a breakpoint to "server/routes/index.js"
Hit both the breakpoints
Open a new integrated terminal instance (Cmd/Ctrl + `)
Make sure that you are in the "4-compound-launch-config" folder
Run the frontend application with npm start
Open the Debug Explorer (Cmd/Ctrl + Shift + D)
Open the dropdown list and select "Add Config (4-compound-launch-config)
Select "Chrome" from the prompt
Modify the launch config so that it looks like this...
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
]
}
Click the "Add Configuration" button
Select "Node.js Launch Program" from the list
Change the "program" value in the "Launch Program" config to be "${workspaceFolder}/server/server.js"
