Missing Guidance on VSCode setup for SignalR with Blazor

[samcarey]

In the step "When the dialog appears to add assets to build and debug the app, select Yes. Visual Studio Code automatically adds the .vscode folder with generated launch.json and tasks.json files."

When you press "OK", vscode asks whether you want to set it up for Server or Client. You have to choose Server or you get errors like:

command 'blazorwasm-companion.launchDebugProxy' not found

and things partially break.
It took me a while to figure out where I went wrong.

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 097456af-6293-8c24-3991-fc815b94dcbf
• Version Independent ID: 978264ac-18f8-e937-30db-7050e53ac7d1
• Content: Use ASP.NET Core SignalR with Blazor
• Content Source: aspnetcore/tutorials/signalr-blazor.md
• Product: aspnet-core
• Technology: aspnetcore-tutorials
• GitHub Login: @guardrex
• Microsoft Alias: riande

[guardrex]

Thanks @samcarey ... I'll take a look and react to this ASAP.

[guardrex]

@captainsafia ... This scenario is fighting me a bit now. I created the solution from the project template and opened the solution's folder in VSC. I expected it to offer to add the assets, but it isn't offering to do so. Even if I open the Server project, I'm not getting an offer to add the assets. I don't recall if there was some special ✨ trick ✨ to make it automatically offer. Do you know? If not, I'll research it further.

Also tried the following sequence when opening from the solution's folder and after opening the Server project folder ...

1. Select View > Command Palette
2. Select .NET: Generate Assets for Build and Debug

Result:

Could not locate .NET Core project. Assets were not generated.

Opened 👉 dotnet/vscode-csharp#4542

[captainsafia]

So:

command 'blazorwasm-companion.launchDebugProxy' not found

Is that occurs when the debugging extension is not installed.

Opened 👉 dotnet/vscode-csharp#4542

I think opening the issue on O# is the best route. I don't have any ideas on what might be causing this.

[guardrex]

UPDATE: They haven't even looked at that issue.

I think what I'll end up doing is provide the exact baseline launch and tasks files for the time being and then open a follow-up issue on hold to revert them out when VSC takes care of adding the files.

Note to self, draft text ...

When the dialog appears to add assets to build and debug the app, select Yes/OK. When prompted, add the assets for the Server project. Visual Studio Code automatically adds the .vscode folder with generated launch.json and tasks.json files. For information on configuring VS Code assets in the .vscode folder, see the Linux operating system guidance in xref:blazor/tooling. If you aren't prompted to add build and debug assets, select Run > Add Configuration from the toolbar. Select Blazor WebAssembly Debug from the list of presented configurations. Select Terminal > Configure Tasks from the toolbar. Select Create tasks.json file from template.

... then I'll place another line or a few and example files.

[guardrex]

Definitely some kind of O#/C# Extension/VSC 🐞 ... I can't add VSC assets to any Blazor project at this time. Using the command palette command, I just get ...

Could not locate .NET Core project. Assets were not generated.

Notwithstanding that, I can add the assets manually and debugging a hosted WASM app works.

I'll see if I can resolve the guidance to show the asset files, but it will be a bit challenging because there are multiple overlapping scenarios here for several of the topics that cover the use of VSC ...

• Running projects without debugging, which is a stock VSC build/launch assets.
• Running projects with debugging, which is a modified version of the build/launch assets.
• The assets location changes across between unhosted and hosted WASM.

😵

I'll see what I can work out.

In the meantime @samcarey, here's what I have working for the Blazor-SignalR tutorial project ...

The .vscode folder is at the solution level ... i.e. ... the folder is SxS with the Client, Server, and Shared folders and solution file that's generated by the project template (but not used).

The launch.json file in the .vscode folder has ...

{
    // 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": "blazorwasm",
            "name": "Launch and Debug Blazor WebAssembly Application",
            "request": "launch",
            "cwd": "${workspaceFolder}/Server",
            "browser": "edge"
        }
    ]
}

NOTE: I'm using Edge, so that's why the `` is there ☝️. You can drop that property if you're using Chrome (I hope 🤞🍀).

The tasks.json file in the .vscode folder has ...

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "command": "dotnet",
            "type": "shell",
            "args": [
                "build",
                // Ask dotnet build to generate full paths for file names.
                "/property:GenerateFullPaths=true",
                // Do not generate summary otherwise it leads to duplicate errors in Problems panel
                "/consoleloggerparameters:NoSummary",
                "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
            ],
            "group": "build",
            "presentation": {
                "reveal": "silent"
            },
            "problemMatcher": "$msCompile"
        }
    ]
}

The Server project's Properties/launchSettings.json file has ...

{
  "iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:18349",
      "sslPort": 44398
    }
  },
  "profiles": {
    "IIS Express": {
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "BlazorWebAssemblySignalRApp.Server": {
      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
      "commandName": "Project",
      "dotnetRunMessages": "true",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:5001;http://localhost:5000",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

I then use VSC's Run and Debug to launch, then go for SHIFT-ALT-D and move that debug proxy tab to a new browser window.

At that point, breakpoints set either client- or server-side seem to be hit.