How to Use Hot Reload with Blazor Apps in Visual Studio | by Chad Adams | December 2024

Hot reloading is an essential feature for developers working with Blazor applications in Visual Studio, enabling rapid iteration and immediate feedback without the need to restart the application. This guide will walk you through setting up and using Hot Reload in your Blazor projects, improving your development workflow and productivity.

Before you jump into Hot Reload, make sure you have the following prerequisites:

• Visual Studio 2022 or later: Make sure you have the latest version to access the newest features.
• .NET 6 or later: Blazor projects generally require the latest .NET runtime.
• Project Blazor: You should already have created a Blazor project, or you can create a new one using Visual Studio.

Hot reload is enabled by default in Visual Studio for Blazor projects. However, let’s confirm the settings to make sure everything is configured correctly.

Steps to enable hot reload:

1. Open Visual Studio and load your Blazor project.
2. Check the hot reload settings:

• Go to Tools > Options > Debugging > .NET/C++ Hot Reload.
• Make sure the options Enable Hot Reload And Enable Hot Reload on File Save are verified.

NOTE: Setting the logging verbosity to a more verbose setting can be useful during development.

Run your Blazor app:

1. Start debugging:

• Click on the Run (or press F5) to start the Blazor application with the debugger.
• Alternatively, use Ctrl+F5 start without the debugger.

1. Make changes:

• Open any .razor component file or C# code file in your project.
• Make the desired changes. For example, you might want to change a UI element or change some logic in your component.

1. Applying changes:

• Simply save the file (Ctrl+S), and the changes will be applied automatically.
• Visual Studio will inject the changes into the running application without needing to restart it.

Example:

Let’s say you want to change the label of a button in your Blazor component.

1. Open it Index.razor deposit.
2. Change the label of the button "Click me" has "Press me".

<button @onclick="OnClick">Press me</button>

3. Save the file.

4. Visual Studio will update the running application and you will immediately see the change in your browser.