Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (151).NET Core  (25)Angular  (49)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (97)DocIO  (20)Essential JS 2  (71)Essential Studio  (163)File Formats  (20)Flutter  (111)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (480)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (25)Windows Forms  (55)WinUI  (21)WPF  (122)Xamarin  (130)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (51)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (47)Development  (257)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (7)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (227)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (23)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (6)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (60)UI  (131)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (11)Web  (215)What's new  (140)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Hot Reload in .NET 6: An Overview

Hot Reload in .NET 6- An Overview

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.

Hot reload is one of the most impressive features in .NET 6 and was introduced in the .NET 6 Preview 3 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, Windows Forms, WinUI, ASP.NET Core, console applications 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.
SDKVisual Studio support
.NET 6 Preview 3Visual Studio 2019 (v16.10 latest preview)
.NET 6 Preview 4Visual Studio 2019 (v16.11 latest preview)
.NET 6 Preview 5Visual Studio 2022 (v17.0 latest preview)
.NET 6 Preview 6Visual Studio 2022 (v17.0 latest preview)
.NET 6 Preview 7Visual Studio 2022 (v17.0 latest preview)
.NET 6 RC 1Visual Studio 2022 (v17.0 latest preview)

Note: Refer to .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
  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
  3. Now, enter your project name and click Next.
    Enter your project name and click Next
  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

Thus, we have created the Blazor Server app. Refer to the following screenshot.
Blazor Server app

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 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
  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

    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

  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:
  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

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

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)WinFormsWPF, WinUI, ASP.NET (Web FormsMVCCore), UWPXamarinFlutterJavaScriptAngularBlazorVue, and React. Use them to boost your application development speed.

Also, you can contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Comments (1)

Highly informative post and explained in a precise manner that anyone can easily understand.
Thanks for sharing.
https://www.taffinc.com/dot-net-web.html

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top