VS Code Configuration for .NET/Angular Projects
Tags: angular, dotnet, vscode
Published: 2022-05-24 18:13:12

> 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)

```json
{
  "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 <a href="https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp">Microsoft's C# Extension</a>, 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)

```json
{
  "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)

```json
{
  "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)

```json
{
  "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.