VS Code Configuration for .NET/Angular Projects

I'm in the process of transitioning to VS Code from Visual Studio, and the launch configurations are pretty flexible. Here's how to set up a full stack application with a .NET API and an Angular frontend.

In summary, we want to create the configurations to build/run our .NET API and Angular frontend individually, and then create a Workspace with a compound configuration to run them both. This will let us build/run our full stack application with a single F5 click.

launch.json (.NET API)

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": ".NET Launch",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceFolder}/bin/Debug/net5.0/example-api.dll",
      "args": [],
      "cwd": "${workspaceFolder}",
      "stopAtEntry": false,
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  ]
}

Debugging .NET in VS Code will require Microsoft's C# Extension, so go install that if you haven't already. Our launch.json just specifies the program to run, the environment variables, and the prelaunch task.

tasks.json (.NET API)

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
      "args": [
        "build",
        "${workspaceFolder}/example-api.csproj",
        "/property:GenerateFullPaths=true",
        "/consoleloggerparameters:NoSummary"
      ],
      "problemMatcher": "$msCompile"
    }
  ]
}

The tasks.json file will just specify the .NET build arguments, and problemMatcher will define what VS Code will look for in the build output to identify any build issues.

launch.json (Angular Frontend)

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Node Launch",
      "command": "npm run start",
      "request": "launch",
      "type": "node-terminal",
      "serverReadyAction":{
        "action": "startDebugging",
        "name": "Chrome Client",
        "pattern":"listening on (.*)localhost:([0-9]+)"
      }
    },
    {
      "name": "Chrome Client",
      "type": "pwa-chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "sourceMaps": true,
      "webRoot": "${workspaceRoot}",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/*"
      }
    }
  ]
}

This one is a bit more complicated. We have our Node Launch configuration which starts our Node application, and in this we also define the serverReadyAction. This just contains a regex pattern that VS Code will attempt to match in the output, and once it does it will perform the specified action, which in this case will run the Chrome Client task.

The Chrome Client task is just the default config for launching a Chrome instance at some address.

example.code-workspace (VS Code Workspace)

{
  "folders": [
    {
      "path": "."
    },
    {
      "path": "../example-api"
    }
  ],
  "settings": {},
  "launch": {
    "version": "0.2.0",
    "compounds": [
      {
        "name": "Launch Workspace",
        "configurations": [".NET Launch", "Node Launch"]
      }
    ]
  }
}

Here we can just create a VS Code Workspace, and add the projects to it. This should allow us to access the individual project configurations from within the Workspace configuration, allowing us to define a way to run the entire "solution" with a single configuration.