VSCode: Starting both a SPA and .NET Core site at the same time

If you’ve set up an Angular project, you probably have a .NET Core back end. When you want to debug these, you’ll need to start both the SPA (Single Page Application, AKA Angular) and the .NET Core project.

Step 1: Open the launch.json file

Here’s the full file if you just want that, under it will be a description

{

  "version": "0.2.0",
  "compounds": [
    {
      "name": ".Net+Browser",
      "configurations": ["Launch Edge", ".NET Core Start"]
    }
  ],
  "configurations": [
    {
      "name": ".NET Core Start",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      // If you have changed target frameworks, make sure to update the program path.
      "program": "${workspaceFolder}/My.Portal.WebApi/bin/Debug/net7.0/My.Portal.WebApi.dll",
      "args": [],
      "cwd": "${workspaceFolder}/My.Portal.WebApi",
      "stopAtEntry": false,
       "env": {
        "ASPNETCORE_ENVIRONMENT": "UAT"
      }
    },
    {
      "name": "Launch Edge",
      "request": "launch",
      "type": "msedge",
      "webRoot": "${workspaceFolder}/My.Portal.WebApi/ClientApp",
      "sourceMaps": true,
      "url": "https://localhost:7001"
    }
  ]
}

Code:

“configurations”: [“Launch Edge”, “.NET Core Start”]

This tells the debugger to start 2 instances. You’ll find these two names at the top of each node in the above example code. Change them as you see fit.

“env”: {“ASPNETCORE_ENVIRONMENT”: “UAT”}

This tells the system what kind of config to run.

The rest tell the debugger what to run, so make sure the DLLs you see in the above code point to the right areas