Hot Reload for Blazor

[danroth27]

• Mono Method Body Replacement
• Build performance optimization
• Via dotnet watch
• Development middleware (websocket connection to receive updates)

[SteveSandersonMS]

See dotnet/blazor#193 for status updates on this work item.

[martasp]

For now, we can use dotnet watch run and recompile every time when the change occurs.
Just using this in csproj file :
<DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="2.0.0" />
<Watch Include="**\*.cshtml"/>

[danroth27]

We've hit a snag with live reload for 0.2.0, so moving this out until we can work through a more robust design.

[ghost]

Hi, I'm using dotnet sdk 2.2.100-preview1-009349 and blazor 0.5.1 under Mac.
Live reload doesn't work using "dotnet blazor serve". If I change some html markup in a cshtml file, the app doesn't reload itself and ever after a manual browser reload, the app display the old html content. How can I solve this?

[mkArtakMSFT]

@danroth27, what's #4056 then? Should it be closed?

[dazinator]

Few questions!
1 Does this track live reload for both server side blazor and client side blazor?
2. Will live reload ship in go live release (i.e in net core 3.0) ?
3. Will live reload mechanism lose page state (I.e equivalent to an f5 refresh) or will it behave similar to Hot Module Replacement in javascript land - I.e only the changed Components UI will re-render? If the latter, will there be a mechanism to preserve component state on the client between updates?

[danroth27]

Does this track live reload for both server side blazor and client side blazor?

Yes

Will live reload ship in go live release (i.e in net core 3.0) ?

For .NET Core 3.0 we expect to support auto rebuild based on file changes, but you will still need to manually refresh the browser.

Will live reload mechanism lose page state (I.e equivalent to an f5 refresh) or will it behave similar to Hot Module Replacement in javascript land - I.e only the changed Components UI will re-render? If the latter, will there be a mechanism to preserve component state on the client between updates?

We don't currently have a plan for supporting hot module replacement in a way that preserves client state.

[SteveSandersonMS]

We don't currently have a plan for supporting hot module replacement in a way that preserves client state.

At least, not automagically. Theoretically if you follow a Redux-like architecture, or anything else that strictly decouples state from display, then you could serialize that state out before unload and restore on reload. However this isn't something we're planning to bake in as a feature, as not everyone wants to follow that kind of architecture.

[dazinator]

then you could serialize that state out before unload and restore on reload.

Thanks. Please, once ready, would you be able to document the appropriate hooks (before unload / reload etc) provided in the design to facilitate this. I'd like to start on an implementation / helper nuget package to enable this pattern for those that want it!

[ahmad2smile]

Couldn't get the dotnet watch run to work, tried following and other options too,

dotnet watch --project "Portfolio.Client" run --project "Portfolio.Server"

Just ended up with the following crude solution using nodemon:

npx nodemon --watch "Portfolio.Client" -e razor,css,html,cs --exec 'dotnet run --project "Portfolio.Server"'

[yberstad]

I thought i was supposed to run:
dotnet watch --project BlazorTest.Client run
But that gave me an error.

If I used:
dotnet watch --project BlazorTest.Server run

With the following in the project BlazorTest.Server.csproj file:

<ItemGroup>
    <Watch Include="..\**\*.razor" />
    <Watch Include="..\**\*.scss" />
    <Watch Include="..\**\*.cs" />
</ItemGroup>

It picked up changes in the BlazorTest.Client project and restarted the server, so I only had to do a manual refresh in the browser.

[dazinator]

It picked up changes in the BlazorTest.Client project and restarted the server, so I only had to do a manual refresh in the browser.

Does that mean the server restarts everytime there is a a css, html change?

[yberstad]

@dazinator, yes :-)

[dazinator]

.. ok just checking but that is a bad thing right? I.e server restart should be unnecessary for a html or css file change as a browser refresh (with cache invalidated) should suffice?

[yberstad]

You are right, that is not necessary. Just add or remove the file extensions you are interested in within the <ItemGroup>. Updated my answer to avoid confusion.

[datvm]

Sorry if off-topic, is there anyway to live reload from Visual Studio right now (Blazor client-side)? Right now for every change excluding wwwroot files, I have to Build the project (Ctrl Shift B) and reload the browser. Would be wonderful if VS can auto build on saving changes.

[myrup]

For what its worth, we are very excited about Blazor and props to the development team. But we are waiting until stateful hot reload is available.

[danroth27]

@MussaratAziz Do you also see similar issues if you run your project from the command-line using dotnet watch run?

If the auto refresh functionality is still not working for you in VS, please file a VS feedback issue so it gets tracked appropriately on the VS side.

[MussaratAziz]

@danroth27 Thanks for the reply dotnet watch run works. Its just VS side. My next action is to uninstall VS then try again. If not I will file VS feedback issue. @tomekjaworski thanks for your suggestion I have tried that before its just doesn't seems to work.

[hannespreishuber]

PM> dotnet watch run
dotnet : It was not possible to find any compatible framework version

-16.8.2 .NET

also not working in VS

[BrunoBlanes]

@hannespreishuber that is a terrible way to provide feedback if that was your intent. Try opening an issue and following the template.

[Filipowicz251]

USE LIVESHARP... can’t believe a kid in his basement managed to do something that Microsoft can’t.

Edit: sorry don’t get me wrong, Microsoft has done a terrific job.. but this feature is a must ... just to change a DIV or an attribute is like 45 secs minimum

Just small feedback regarding this statement. For me and using "Auto build and refresh option" (what @porkopek suggested) is taking more like 5 secs. Yes, it is not 1 sec as with Livesharp but it is quite fast and it is working :)

I did try Livesharp, but for me it was breaking the external JS on the site (I did have some slider revolution part and after livesharp was sending an update, the js on the site was broken)

[mrlife]

something we're looking in to adding support for very soon.

@pranavkm @jongalloway Possible to update the VS Mac roadmap?

[szalapski]

Hmmm, auto-refreshing the browser in .NET 5 using dotnet watch run doesn't seem to be working for me. I used to use Westwind.AspNetCore.LiveReload, but I have removed it to try this out. When I make a change, the app rebuilds and restarts web server for me, but the browser doesn't refresh. This is a project I upgraded from .NET Core 3.1. Is there anything that needs to be done in startup.cs to enable this? What else could be interfering? How can I troubleshoot?

[BrunoBlanes]

@szalapski Have you noticed if the browser isn't refreshing before the server finishes starting up? I've seen that happen a few times. I don't know if it is by design.

[danroth27]

@szalapski Does auto refresh work if you start from a new project? Have you set "launchBrowser": true in launchSettings.json?

[gojanpaolo]

dotnet watch run also just stops working for me sometimes. Closing all VS instances and then rerunning dotnet watch run seems to solve the issue. I'll see if I can drill down the root cause.

[danroth27]

For folks hitting issues with dotnet watch run please open new GitHub issues with any details you have about how to reproduce the problem, so that we don't conflate those investigations with the hot reload work we're working on for .NET 6.

[mkArtakMSFT]

Closing this issue as we're done with the work we planned to deliver for 6.0.
There are still many improvements to do in this area which are going to be tracked as part of dotnet/runtime#57365