Blazor Hot Reload
Hermes includes a zero-config dev server that gives you Tauri/Vite-like hot reload for Blazor Hybrid apps. Razor components and C# code hot reload through dotnet watch, while CSS changes are picked up instantly by Hermes without a full page reload.
Quick Reference
# Just use dotnet watch instead of dotnet run — that's it
dotnet watch
# Hermes auto-detects dotnet watch and starts its internal dev server
# [Hermes] Dev mode detected (dotnet watch). Starting internal dev server on http://127.0.0.1:54321
# [Hermes] Hot reload is active. Edit .razor, .cs, or .css files and changes will apply automatically.No builder configuration changes are needed. The dev server activates automatically when dotnet watch is detected.
What Gets Hot Reloaded
| File Type | Mechanism | Behavior |
|---|---|---|
Razor components (.razor) | dotnet watch hot reload | Components re-render in place |
C# code (.cs) | dotnet watch hot reload | Code changes apply without restart |
CSS stylesheets (.css) | Hermes dev server | Instant update, no page reload |
Razor and C# hot reload are provided by dotnet watch itself. Hermes adds CSS hot reload on top — when you save a stylesheet, every <link> tag in the page is cache-busted and the browser re-fetches the updated file immediately.
Getting Started
- Make sure your project uses
HermesBlazorAppBuilder(the standard Blazor setup):
var builder = HermesBlazorAppBuilder.CreateDefault();
builder.RootComponents.Add<App>("#app");
var app = builder.Build();
app.Run();- Run with
dotnet watch:
dotnet watchThat's it. Hermes detects the DOTNET_WATCH environment variable that dotnet watch sets and automatically starts its internal dev server. You'll see confirmation in the console:
[Hermes] Dev mode detected (dotnet watch). Starting internal dev server on http://127.0.0.1:54321
[Hermes] Hot reload is active. Edit .razor, .cs, or .css files and changes will apply automatically.When you run with dotnet run (or ship your app), the dev server is never started — your app behaves exactly as it would without this feature.
CSS Hot Reload
CSS hot reload is the Hermes-specific part of this feature. While dotnet watch handles Razor and C# changes, it doesn't reload stylesheets without a full page refresh. Hermes fills that gap.
When the dev server is active, it:
- Watches your source
wwwrootdirectory for.cssfile changes - Notifies the browser via Server-Sent Events (SSE)
- Cache-busts all
<link rel="stylesheet">tags so the browser fetches the updated file
This means you can tweak styles and see the result immediately — no page reload, no lost component state.
TIP
The dev server watches the source wwwroot directory (your project's wwwroot/ folder), not the build output. Edits to your source files are detected and served immediately.
ForceDevServer
By default, the dev server auto-detects based on the DOTNET_WATCH environment variable. If you need explicit control, use ForceDevServer:
var builder = HermesBlazorAppBuilder.CreateDefault();
// Force the dev server on (regardless of how the app was launched)
builder.ForceDevServer(true);
// Or force it off (even under dotnet watch)
builder.ForceDevServer(false);This is useful for testing the dev server behavior without dotnet watch, or disabling it in environments where auto-detection might conflict.
Tips
Supported code changes
Not all C# changes can be hot reloaded. For the full list of what dotnet watch supports, see Microsoft's Supported code changes documentation.
Graceful fallback
If the dev server fails to start for any reason, Hermes falls back to release mode automatically. You'll see a message in the console and the app will run normally.
Next Steps
- Blazor Quick Start — initial setup for Blazor Hybrid apps with Hermes
- WebView Interop — communicating between .NET and the frontend
- HermesBlazorAppBuilder API — full builder configuration reference
