Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Blazor Server: how to "watch file changes" AND "attach to Visual Studio"

It looks like I am being forced to chose between the two (either "watch file changes mode" or "attach to Visual Studio mode").

These are the two different "profiles" in launchSettings.json, and I have to chose one or the other:

"profiles": {
    ...
    "Watch file changes": { 
        "executablePath": "dotnet.exe",
        "workingDirectory": "$(ProjectDir)",
        "commandLineArgs": "watch run debug",
        "launchBrowser": true,
        "applicationUrl": "http://localhost:5000/",
        "environmentVariables": {
            "ASPNETCORE_ENVIRONMENT": "Development"
        }
    },
    "Attach to VS": {
        "commandName": "Project",
        "launchBrowser": true,
        "applicationUrl": "http://localhost:5000",
        "environmentVariables": {
            "ASPNETCORE_ENVIRONMENT": "Development"
        }           
    }
}

It is less than ideal that I have to pick one, I would like to be able to apply a breakpoint ("Attach to VS" mode) and also watch file changes.


BTW, for those interested: the profile "Watch file changes" must be coordinated with the following addition to your .csproj file:

<ItemGroup>
    <!-- Files that the "dotnet watch" will monitor for hot reloading: -->
    <Watch Include="**\*.razor" />
    <Watch Include="**\*.scss" />
    <Watch Include="**\*.cshtml"/>
    <Watch Include="**\*.cs" />
</ItemGroup>
like image 378
Xavier Peña Avatar asked Nov 19 '20 07:11

Xavier Peña


People also ask

How do I read a text file in Blazor?

You can read static or local files by creating HttpClient Get calls. The GetStringAsync method sends a request to the specific URI and returns the response body as a string in an async operation. Please refer to “HttpClient Class” for more details.

How do you open Blazor project in Visual Studio code?

In vscode explorer click Open Folder and select project directory. Blazor project template contains some default files, if we run our application right away it will be launched as a Hello World!

What is AOT in Blazor?

Ahead-of-time (AOT) compilation. Blazor WebAssembly supports ahead-of-time (AOT) compilation, where you can compile your . NET code directly into WebAssembly. AOT compilation results in runtime performance improvements at the expense of a larger app size.

Can Blazor access local files?

Blazor code can now browse local file systems and open up local files and edit them in native Windows apps. With . NET 6 and the latest Visual Studio 2022 preview, developers can create a hybrid Blazor/.


1 Answers

I am able to debug (breakpoint, step by step, inspect variable) my Blazor Webassembly (Blazor WASM) in Visual Studio 2019. And whenever I save certain files (*.razor, *.razor.cs, *.css), dotnet will automatically rebuild the project then Chrome will automatically refresh the page. Here's what I did:

  1. In Visual Studio, start debugging (F5) using the "IIS Express" profile. This will open a new Chrome window.
  2. Open a command prompt in your project's directory. run dotnet watch run. This will open a new Chrome tab.
  3. Open the website found in step 2 using the Chrome window in step 1. In other words, copy the URL found in step 2, then paste it to the Chrome address bar found in step 1.
like image 68
Arvin Avatar answered Sep 28 '22 06:09

Arvin