Hot Reload in .NET 6- An Overview
Tags: dotnet, csharp, productivity
Published: 2021-10-13 11:43:08

---
title: Hot Reload in .NET 6- An Overview
published: true
date: 2021-10-13 10:30:19 UTC
tags: dotnet, csharp, productivity, 
canonical_url: https://www.syncfusion.com/blogs/post/hot-reload-in-net-6-an-overview.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Hot-Reload-in-.NET-6-An-Overview-672x372.png
---

Hooray! Microsoft .NET 6 RC1 was released with so many new features and improvements. We are expecting the .NET 6 LTS (long-term support) in November 2021. For detailed information, refer to the [major work planned in ASP.NET Core in .NET 6](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-preview-1/#major-work-planned-in-asp-net-core-in-net-6 "Link to Major work planned in ASP.NET Core in .NET 6").

Hot reload is one of the most impressive features in .NET 6 and was introduced in the [.NET 6 Preview 3](https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-preview-3/ "Link to ASP.NET Core updates in .NET 6 Preview 3 blog") version. It allows us to modify the UI when the application is running by altering the code. We can **see the instant reflection of those changes** (after saving them) in the output without having to restart the application. With hot reload, you can quickly develop apps, save time and enhance productivity.

Hot reload works with project types such as [WPF](https://en.wikipedia.org/wiki/Windows_Presentation_Foundation "Link to WPF Wikipedia page"), [Windows Forms](https://en.wikipedia.org/wiki/Windows_Forms "Link to Windows Forms Wikipedia page"), [WinUI](https://en.wikipedia.org/wiki/Windows_UI_Library "Link to WinUI Wikipedia page"), [ASP.NET Core](https://en.wikipedia.org/wiki/ASP.NET_Core "Link to ASP.NET Core Wikipedia page"), [console applications](https://en.wikipedia.org/wiki/Console_application "Link to Console application Wikipedia page") and more.

In this blog, we are going to see how to use this .NET 6 Hot reload in a Blazor server-side application.

## Prerequisites for hot reload

Following are the prerequisites for using .NET 6 hot reload:

- .NET 6 Preview 3 or a later version.

<table style="height: 168px;">
<tbody>
<tr style="height: 24px;">
<td style="height: 24px;" width="312"><strong>SDK</strong></td>
<td style="height: 24px;" width="312"><strong>Visual Studio support</strong></td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="312">.NET 6 Preview 3</td>
<td style="height: 24px;" width="312">Visual Studio 2019 (v16.10 latest preview)</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="312">.NET 6 Preview 4</td>
<td style="height: 24px;" width="312">Visual Studio 2019 (v16.11 latest preview)</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="312">.NET 6 Preview 5</td>
<td style="height: 24px;" width="312">Visual Studio 2022 (v17.0 latest preview)</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="312">.NET 6 Preview 6</td>
<td style="height: 24px;" width="312">Visual Studio 2022 (v17.0 latest preview)</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="312">.NET 6 Preview 7</td>
<td style="height: 24px;" width="312">Visual Studio 2022 (v17.0 latest preview)</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;" width="312">.NET 6 RC 1</td>
<td style="height: 24px;" width="312">Visual Studio 2022 (v17.0 latest preview)</td>
</tr>
</tbody>
</table>

**Note:** Refer to [.NET 6](https://dotnet.microsoft.com/download/dotnet/6.0 "Link to download .NET 6") to see the current and upcoming .NET 6 releases and download them.

## Creating a sample Blazor Server application with .NET 6

We are going to create an example Blazor Server app in .NET 6 RC 1 and Visual Studio 2022 Preview:

1. First, open Visual Studio 2022 and select  **Create a new project**.  
 ![Open Visual Studio 2022 and choose Create a new project](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Open-Visual-Studio-2022-and-choose-Create-a-new-project.png)
2. Then, type Blazor Server in the search window and select  **Blazor Server App** from the list. Click **Next**.  
 ![Type Blazor Server in search window and select the Blazor Server App](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Type-Blazor-Server-in-search-window-and-select-the-Blazor-Server-App.png)
3. Now, enter your project name and click **Next**.  
 ![Enter your project name and click Next](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Enter-your-project-name-and-click-Next.png)
4. The Additional information dialog will open. Select **.Net 6.0**  as the target framework. The  **Configure for HTTPS**  checkbox will be selected by default when creating a new project. Then, click **Create**.  
 ![Additional information dialog](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Additional-information-dialog.png)

Thus, we have created the Blazor Server app. Refer to the following screenshot.  
 ![Blazor Server app](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Blazor-Server-app.png)

## How to use hot reload in a Blazor Server application

The .NET 6 hot reload works with both dotnet-watch and the Apply Code Changes button. But there are some limitations in the .NET 6 hot reload. Refer to the [Supported and Unsupported code changes](https://docs.microsoft.com/en-us/visualstudio/debugger/supported-code-changes-csharp?view=vs-2019 "Link to supported and unsupported code changes (C# and Visual Basic)") documentation for more details.

### dotnet-watch

dotnet-watch is a development time tool that runs a .NET command when a source file changes.

Follow these steps to use hot reload using the dotnet-watch:

1. First, open Visual Studio. Then, navigate to **Tools -> Command Line -> Developer Command Prompt** (or) **Tools -> Command Line -> Developer PowerShell**.  
 ![Select Tools, Command Line, Developer Command Prompt or Developer PowerShell](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Select-Tools-Command-Line-Developer-Command-Prompt-or-Developer-PowerShell.png)
2. This example shows selecting the Developer PowerShell option. In the Developer PowerShell window:
  1. Navigate to the Project Directory.
  2. Then, run the **dotnet watch ** command.  
 ![Developer PowerShell window](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Developer-PowerShell-window.png)

Running the dotnet-watch command will enable the hot reload and the supported edit details will be displayed in the output window.

Then, the localhost site will be launched in the browser with the URL **https://localhost:5001**.  
 ![Hot Reload sample project](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Hot-Reload-sample-project.png)

3. As I said before, with the .NET 6 hot reload, you can instantly see the changes reflected in the code. For example, you can:
  - Change the welcome content of the home page (UI changes).
  - Change the count values in the counter component (Code-behind changes).  

<video id="video-94357-1" width="640" height="360" preload="metadata" controls="controls"><source type="video/mp4" src="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/dotnet-watch.mp4?_=1"></source><a href="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/dotnet-watch.mp4">https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/dotnet-watch.mp4</a></video>
  - Change the error in the code (shows error in red-color alert).  

<video id="video-94357-2" width="640" height="360" preload="metadata" controls="controls"><source type="video/mp4" src="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Hot-Reload-With-Error.mp4?_=2"></source><a href="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Hot-Reload-With-Error.mp4">https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Hot-Reload-With-Error.mp4</a></video>
4. Also, we can execute the dotnet watch without the hot reload using the following command.
```
dotnet watch --no-hot-reload
```

## Apply Code Changes

The Apply Code Changes button will be enabled when we run the application. This button-click will update the running app with the code changes that you have made in the source even without saving the file.

Follow these steps to use .NET 6 hot reload using the Apply Code Changes button:

1. First, run the application.
2. Then, modify the code and click  **Apply Code Changes**  (no need to save the changes).  
 ![Modify the code and click the Apply Code Changes button](https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Modify-the-code-and-click-the-Apply-Code-Changes-button.png)

After reloading the page, the changes will be reflected in your application.

<video id="video-94357-3" width="640" height="360" preload="metadata" controls="controls"><source type="video/mp4" src="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Apply-Code-Changes.mp4?_=3"></source><a href="https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Apply-Code-Changes.mp4">https://www.syncfusion.com/blogs/wp-content/uploads/2021/10/Apply-Code-Changes.mp4</a></video>

The main limitation in the Apply Code Changes button over dotnet-watch is that the auto instant reflection does not work here. For that, we need to reload the page manually.

**Note:**

- If you use hot reload with .NET 6 Preview 3 or 4, then add the **“hotReloadProfile”** : “ **aspnetcore”** property to your launch profile in the _ **launchSettings.json** _ _file__._
- For Blazor WebAssembly projects, add the **“hotReloadProfile”** : **“blazorwasm”** property in the **launchSettings.json** file.

## Conclusion

Thanks for reading! In this article, we saw how to use the .NET 6 hot reload in a Blazor Server application. This feature can instantly update changes without the need to stop debugging or restart the app. This reduces your development time and enhances productivity.  So, try out this feature and leave your experience in the comments section below!

Syncfusion has over 1,600 components and frameworks for [.NET MAUI (Preview)](https://www.syncfusion.com/maui-controls "Link to .NET MAUI(Preview) UI controls"), [WinForms](https://www.syncfusion.com/winforms-ui-controls "Link to WinForms UI controls"), [WPF](https://www.syncfusion.com/wpf-ui-controls "Link to WPF UI controls"), [WinUI](https://www.syncfusion.com/winui-controls "Link to WinUI UI controls"), ASP.NET ([Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls "Link to ASP.NET Web Forms UI controls"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls "Link to ASP.NET MVC UI controls"), [Core](https://www.syncfusion.com/aspnet-core-ui-controls "Link to ASP.NET Core UI controls")), [UWP](https://www.syncfusion.com/uwp-ui-controls "Link to UWP UI controls"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/ "Link to Xamarin UI controls"), [Flutter](https://www.syncfusion.com/flutter-widgets "Link to Flutter UI controls"), [JavaScript](https://www.syncfusion.com/javascript-ui-controls "Link to JavaScript UI controls"), [Angular](https://www.syncfusion.com/angular-ui-components "Link to Angular UI controls"), [Blazor](https://www.syncfusion.com/blazor-components "Link to Blazor UI controls"), [Vue](https://www.syncfusion.com/vue-ui-components "Link to Vue UI controls"), and [React](https://www.syncfusion.com/react-ui-components "Link to React UI controls"). Use them to boost your application development speed.

Also, you can contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/?_ga=2.203813140.507257297.1548648173-2146943073.1535695045 "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/ "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Hosting Multiple ASP.NET Core Apps in Ubuntu Linux Server Using Apache](https://dev.to/karthickramasamy08/hosting-multiple-asp-net-core-apps-in-ubuntu-linux-server-using-apache-28gb-temp-slug-822894 "Link to Hosting Multiple ASP.NET Core Apps in Ubuntu Linux Server Using Apache blog")
- [How to Apply API Versioning in ASP.NET Core](https://dev.to/karthickramasamy08/how-to-apply-api-versioning-in-asp-net-core-3fig-temp-slug-5071663 "Link to How to Apply API Versioning in ASP.NET Core blog")
- [Migrate ASP.NET HTTP Handlers and Modules to ASP.NET Core Middleware](https://dev.to/syncfusion/how-to-migrate-asp-net-http-handlers-and-modules-to-asp-net-core-middleware-27lc "Link to How to Migrate ASP.NET HTTP Handlers and Modules to ASP.NET Core Middleware blog")
- [Easily Publish an ASP.NET Core App in Linux Docker that Compresses PDF Documents](https://dev.to/syncfusion/easily-publish-an-asp-net-core-app-in-linux-docker-that-compresses-pdf-documents-41h4 "Link to Easily Publish an ASP.NET Core App in Linux Docker that Compresses PDF Documents blog")