# Compound debug configurations

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.

{% tabs %}
{% tab title="Exercise" %}

* 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
  {% endtab %}

{% tab title="Answer" %}

* 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`

![](https://707761804-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm5WIB-swfdJcB6Is3B%2F-Lm5UCk8u8vxPZLta3N0%2Fimage.png?alt=media\&token=29ccf2ce-5c61-4c25-8117-82043ff3f64f)

* Open the Debug Explorer (**Cmd/Ctrl + Shift + D**)
* Open the dropdown list and select "Add Config (4-compound-launch-config)

![](https://707761804-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm5WIB-swfdJcB6Is3B%2F-Lm5QYuWlRoAGetiLLHw%2Fimage.png?alt=media\&token=72fc1b3c-d247-4bed-9094-e71edc6f4b17)

* Select "Chrome" from the prompt

![](https://707761804-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm5WIB-swfdJcB6Is3B%2F-Lm5R-Lvt7gM2VO-2QwK%2Fimage.png?alt=media\&token=13d87c64-6a37-4049-b6da-f8794a8c1ad2)

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

![](https://707761804-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm5WIB-swfdJcB6Is3B%2F-Lm5RJPxM3P9biw9mBZP%2Fimage.png?alt=media\&token=007c8b6b-9bad-4610-9c8a-054233a5d37e)

* Click the "Add Configuration" button

![](https://707761804-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm5WIB-swfdJcB6Is3B%2F-Lm5RsEV98UJiRPcyeYW%2Fimage.png?alt=media\&token=ff51616a-b5a0-4de1-9730-0b661f743d15)

* Select "Node.js Launch Program" from the list

![](https://707761804-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm5WIB-swfdJcB6Is3B%2F-Lm5SJIaPjklsr0dpvLa%2Fimage.png?alt=media\&token=1cb54299-642e-4566-8a37-f84e8e65ecd3)

* Change the "program" value in the "Launch Program" config to be "${workspaceFolder}/server/server.js"

```
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceFolder}/server/server.js"
},
```

* Right above the "configurations" attribute, add a "compound" attribute. Start typing and then select "compound" from the auto-complete.
* Name it "Launch Project 4"
* Set the "configurations" attribute to...

```
"compounds": [
  {
    "name": "Launch Project 4",
    "configurations": ["Launch Program", "Launch Chrome"]
  }
]
```

* Select "Launch Project 4" from the dropdown list in the Debug Explorer

![](https://707761804-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LlvtEHKkq5bvzPq1pJ4%2F-Lm5WIB-swfdJcB6Is3B%2F-Lm5TbZRQ8TAGjoBBCXQ%2Fimage.png?alt=media\&token=ed2d2d8a-c5dd-49b8-8a63-54624249a3bf)

* Press the green button next to the dropdown list
* VS Code will launch a new instance of Chrome and start the Express server project.
* Add a breakpoint to line 12 in the "server/routes/index.js" file
* Add a breakpoint to line 39 in the "src/App.js" file
* Change the color in the app and press the button
* Hit the breakpoints
  {% endtab %}
  {% endtabs %}