How to enable Blazor hot reload - blazor-server-side

Having watched Dan Roth's Blazor demo (15 Jan 2020), code changes to a razor file were refreshed to the browser without the stop|build|run cycle. On my VS2019 (latest) I don't get that hot reload. This is a new Blazor SS project from the standard template. Is there a property required to be set to enable it?
I tried
dotnet run watch
but no difference

Edit: 12-04-2021
Initial .NET Hot Reload support
Early support for .NET Hot Reload is now available for ASP.NET Core & Blazor projects using dotnet watch. .NET Hot Reload applies code changes to your running app without restarting it and without losing app state.
To try out hot reload with an existing ASP.NET Core project based on .NET 6, add the "hotReloadProfile": "aspnetcore" property to your launch profile in launchSettings.json. For Blazor WebAssembly projects, use the "blazorwasm" hot reload profile.
Run the project using dotnet watch. The output should indicate that hot reload is enabled:
watch : Hot reload enabled. For a list of supported edits, see https://aka.ms/dotnet/hot-reload. Press "Ctrl + R" to restart.
If at any point you want to force the app to rebuild and restart, you can do so by entering Ctrl+R at the console.
You can now start making edits to your code. As you save code changes, applicable changes are automatically hot reloaded into the running app almost instantaneously. Any app state in the running app is preserved.
OLD ANSWER
This will come in .NET 6 hopefully. But at the time of writing this is still not working yet:

Related

.NET 6 Hot Reload triggering rude edit reload on all changes

I'm currently working on a Blazor Server application using the latest stable release of .NET Core (6.0.302). I have Hot Reload enabled, but the application seems to view any and all changes I made as "rude edits", and will always rebuild the application. This rather defeats the point of using hot reload in the first place, and it appears that what I'm doing is supported. When I create a new test project, hot reload appears to work just fine, so it's not a problem with the SDK from what I can tell, just a problem with my project.
I've updated all NuGet packages, removed old SDKs from my system, tried removing the RazorRuntimeCompilation package from the project to see if it was interfering, all to no avail.
Upon closer inspection of the errors thrown in the console, it would appear that one error was being triggered before the others:
File changed: ./Pages/TND/ScheduleIndex.razor.
dotnet watch: Failed to create MSBuildWorkspace: [Failure] Msbuild failed when processing
the file '<path>\<project>.csproj' with message: <path>\<project>.csproj: (0, 0):
Package 'Hangfire.Dashboard.Authorization 3.0.0' was restored using '.NETFramework,Version=v4.6.1,
.NETFramework,Version=v4.6.2, .NETFramework,Version=v4.7,
.NETFramework,Version=v4.7.1, .NETFramework,Version=v4.7.2, .NETFramework,Version=v4.8'
instead of the project target framework 'net6.0'. This package may not be fully compatible with your project.
dotnet watch: Exited
dotnet watch: Building...
After removal of the offending package, hot reload began working perfectly. It appears that if any warning is thrown from your .csproj file, even if the application builds just fine upon launch, any subsequent hot reloads will fail and trigger a rude-edit-style rebuild of the project.

.net 6 blazor wasm hot reload not working

I'm using Visual Studio 2022 and created a new Blazor webassembly app and ran it.
The option for hot reload on file save is checked.
If I make changes in the Counter component (either HTML or C# code changes) and save the file I see a tick symbol appear at the top left of the browser but neither of the changes have kicked in, the browser just continues with the old version.
After the change the counter still increments even though I changed it to decrement and the h1 title doesnt include the 2 after it.
So i've worked out that it only works if you run the project without debugging, not with debugging.
Ctrl + F5 (hot reload works), F5 (doesn't work)
I can confirm what The Thirsty Ape suggested works when running Visual Studio 2022 and .NET 6
dotnet watch --project .\your-project-name-here.csproj
The browser will launch and the console should display something like:
watch : Hot reload enabled. For a list of supported edits, see https://aka.ms/dotnet/hot-reload. Press "Ctrl + R" to restart.
And finally after making a code change:
watch : Hot reload of changes succeeded.
No refresh is required
Just try restarting Visual Studio, if it suddenly stops working.
I was using the visual studio IDE 2022 v17.0.1
Updated the visual studio IDE 2022 to v17.1.2 supported the blazor hot reload
Note: Help -> Check for updates
It seems that Hot Reload works only in certain configurations:
When I host the app in IIS Express - hot reload works, even in
Debug mode.
When I host the app in Docker, hot reload does NOT work neither
with or without debugger.
I had tested in Visual Studio v17.2.2 (although v17.1.2 should be sufficient)
Another thing to check is that "hot reload on file save" is actually on if like me that's what you rely on.
It can be found in the menu on the flame icon.
I somehow managed to turn that off without knowing and didn't even realize there was a hot reload button.
On Blazor Icon (Next to debug icon) click on hot reload on file save, it should work now.

How to prevent saving background job calls in logs.txt file

I am working on project that is uses abp (asp net boilerplate) v 6.3.0 and dotnet core v5 with reactjs client.
After run its server with dotnet run, I see some logs on the terminal that is show the background jobs are working and this messages are saving in the logs.txt file.
after some moment the logs.txt file was very huge and find some especial error in it is very hard.
could you help me to disable log the background job worker?
vs code terminal after dotnet run in host
logs.txt file
I was suffering the same issue here, and found a way to do this through log4net (not abp). The trick I used is prevent logging from specific loggers (the ones that keep logging every 5 seconds). Here is the log4net config file, with the added filters
log4net config with

Is It Really Required To Make The Mode in Our Nuxt App Universal When We Use nuxt-password-protect package?

I am currently working on a project that is in SPA mode of Nuxt and I want to add a package called nuxt-password-protect. This is for security reasons when opening any environment such as dev and staging. I want to provide a password for every access to my staging or dev links. But I am quite confused if it is really necessary to change the mode to SSR/universal? I already changed my mode and it seems working when I also installed the package. Can someone expound some knowledge with this? I am new to nuxt and Vue.

Building a Sencha Touch 2.1 project

I've built myself a small Sencha Touch 2 app, so now i'm trying to make it smaller/minify it
My app looks like
/touch
/app.js
/resources
/ux
/app
/app.json
/index.html
/build.xml
So I was trying to make it more efficient & faster to load so I loaded up Sencha Cmd and ran
sencha compile --classpath=app,touch/src,ux include -all
So it does what looks like compiling it, without giving any errors, it gives a few warnings but those are ok. So it finishes up and nothings changed. The directories are exactly as there were before.
How would I use this correctly to make my app smaller & load faster?
The command
sencha app build package
or
sencha app build production
Will minify/package your application. All of the javascript will be contained in a single app.js file, and the javascript+css will be minified. More information about these commands can be found here: http://docs.sencha.com/touch/2-1/#!/guide/command_app
See Also cmd tool doc for detailed info:
http://docs.sencha.com/cmd/3.1.2/#!/guide/command_app_touch-section-deploying-your-application
Deploying your application simply means editing source code and refreshing the browser. All source files are dynamically loaded on demand. There's no building process involved. When it comes to deployment, Sencha Cmd provides the following four build environment options:
testing - intended for QA prior to production. All JavaScript and CSS source files are bundled, but not minified, which makes it easier to debug.
package - creates a self-contained, redistributable production build that normally runs from the local file system without a web server.
production - creates a production build that is normally hosted on a web server and serves multiple clients (devices). The build is offline-capable using HTML 5 application cache, and is enabled to perform over-the-air updates.
native - first generates a package build, then packages it as a native application, ready to be deployed to native platforms.