Skip to content

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

bash
# 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 TypeMechanismBehavior
Razor components (.razor)dotnet watch hot reloadComponents re-render in place
C# code (.cs)dotnet watch hot reloadCode changes apply without restart
CSS stylesheets (.css)Hermes dev serverInstant 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

  1. Make sure your project uses HermesBlazorAppBuilder (the standard Blazor setup):
csharp
var builder = HermesBlazorAppBuilder.CreateDefault();
builder.RootComponents.Add<App>("#app");

var app = builder.Build();
app.Run();
  1. Run with dotnet watch:
bash
dotnet watch

That'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 wwwroot directory for .css file 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:

csharp
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