CODEWITHSUNDEEP
asp.netasp.net-coreblazorblazor-server-side
Xavier Peña
Xavier Peña

Reputation: 7919

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>

Upvotes: 8

Views: 1950

Answers (2)

Awais Zahid
Awais Zahid

Reputation: 29

Steps:

  • Right Click on on Main Folder name in the Solution Explorer.
  • Go to the "Open Folder in File Explorer".
  • In the File Explorer,
    • Type cmd in search.
    • dotnet watch run

Advantages:

  • It will save you a lot of time.
  • Automatic reload

Disadvantages:

  • There will be no debugger attached.
  • There will be no hard reload (not 100% sure).
  • In difficult problems, it is better not to use it.

Upvotes: 0

Arvin
Arvin

Reputation: 1506

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.

Upvotes: 2

Related Questions