.NET 6 - Apresentando o Hot Reload

Hoje vou apresentar o novo recurso do .NET 6 (RC1), o famigerado Hot Reload.

O Hot Reload é um dos novos recursos do .NET 6 e foi introduzido na versão .NET 6 Preview 3. Ele nos permite modificar a interface do usuário quando o aplicativo está em execução, alterando o código e podemos ver o reflexo instantâneo dessas alterações (depois de salvá-las) na saída sem precisar reiniciar o aplicativo. Com o hot reload, você pode desenvolver aplicativos rapidamente, economizar tempo e aumentar a produtividade.

O novo recurso Hot reload funciona com tipos de projetos como WPF, Windows Forms, WinUI, ASP.NET Core, aplicativos de console e Blazor, etc.

Hoje eu vou mostrar como usar o Hot Reload em uma aplicação Blazor Server.

Os pré-requisitos para usar este recurso são ter instalado o .NET 6 Preview 3 ou superior e usar o Visual Studio 2022 v17.0 na última versão preview.

Criando o projeto Blazor Server

Abra o Visual Studio 2022 e selecione Create New Project;

Selecione o template Blazor Server App e clique em Next;

Informe o nome do projeto como BlazorHotReload e clique em Next;

A seguir selecione o .NET 6.0 Preview e as demais opções conforme mostra a figura acima e clique em Create.

O .NET 6 hot reload funciona com dotnet-watch e com o botão Apply Code Changes ou Aplicar alterações de código. Mas existem algumas limitações no hot reload do .NET 6.  Para mais detalhes sobre essas limitações consulte este link.

Vamos então iniciar pelo dotnet watch.

Usando o dotnet watch

O dotnet-watch é uma ferramenta de tempo de desenvolvimento que executa um comando .NET quando um arquivo de origem é alterado.

Siga estas etapas para usar o hot reload usando o dotnet-watch:

Abra o Visual Studio e navegue até Tools -> Command Line -> Developer PowerShell.

Clicando em Developer PowerShell será aberta a janela de comandos.

Navegue até a pasta do projeto e a seguir digite o comando : dotnet watch



Ao Executar o comando dotnet watch habilitará o hot reload e os detalhes de edição suportados serão exibidos na janela de saída.

A aplicação então será aberta no navegador conforme abaixo:

Para testar o Hot Reload vamos alterar o código no arquivo Index.razor :

Ao salvar as alterações a interface do usuário vai ser atualizada de imediato :

Mas e se você quiser executar o projeto sem usar o Hot Reload ?

Sem problema, basta digitar o comando :  dotnet watch --no-hot-reload

Usando o Apply Code Changes

O botão Apply Code Changes (Aplicar alterações de código) será habilitado quando executarmos o aplicativo.

Após fazer as alterações no código e clicar neste botão as alterações serão exibidas na interface mesmo sem você salvar as alterações feitas.



A principal limitação desta abordagem é que a reflexão instantânea automática pode não funcionar. Para isso, precisamos recarregar a página manualmente.

Para projetos Blazor WebAssembly, precisamos adicionar a propriedade “hotReloadProfile”: “blazorwasm” no arquivo launchSettings.json.

E estamos conversados...

"Ele (Jesus) não cometeu pecado algum, e nenhum engano foi encontrado em sua boca.
Quando insultado, não revidava; quando sofria, não fazia ameaças, mas entregava-se àquele que julga com justiça."
1 Pedro 2:22,23

Referências:

José Carlos Macoratti