In un precedente script abbiamo visto come abilitare la compilazione a runtime delle view Razor, così da non esser costretti a riavviare l'intera applicazione dopo aver apportato una modifica al codice HTML (https://www.aspitalia.com/script/1342/Compilare-Dinamicamente-View-ASP.NET-Core-3.0.aspx).

La ricompilazione delle view Razor avviene dunque in maniera automatica al salvataggio di un file .cshtml ma subito dopo siamo costretti a staccare le mani dalla tastiera e usare il mouse per aggiornare la pagina nel browser, in modo da visualizzare i cambiamenti appena apportati.
Possiamo automatizzare tutto questo se sfruttiamo una funzionalità chiamata live reload. Grazie a un pacchetto NuGet, la pagina potrà aggiornarsi da sé, senza alcun intervento manuale.

Installare il pacchetto NuGet per il live reload

dotnet add package  WestWind.AspnetCore.LiveReload

Dato che anche questo è un pacchetto utile sono ai fini dello sviluppo, possiamo referenziarlo in maniera condizionale, proprio come abbiamo visto nello script precedente. Dunque apriamo il file con estensione .csproj e modifichiamo il nodo PackageReference come segue.

<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="WestWind.AspnetCore.LiveReload" Version="0.1.12" />

In questo modo eviteremo che il pacchetto venga distribuito nel server di produzione.

Configurare il middleware per il live reload

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
  #if DEBUG
  app.UseLiveReload();
  #endif
  
  //Qui altri middleware, ad esempio app.UseStaticFiles();
}

Come si vede, abbiamo usato la direttiva per il preprocessore #if DEBUG in modo che il middleware venga usato solo mentre siamo in fase di sviluppo dell'applicazione.

Ora spostiamoci nel metodo ConfigureServices e aggiungiamo i servizi necessari al middleware.

public void ConfigureServices(IServiceCollection services)
{
  #if DEBUG
  services.AddLiveReload();
  #endif
  services.AddControllersWithViews().AddRazorRuntimeCompilation();
}

Il middleware prevede dei parametri di configurazione. Perciò apriamo il file appsettings.Development.json e aggiungiamo la sezione LiveReload che si vede nel seguente esempio.

{
  "LiveReload": {
    "LiveReloadEnabled": true,
    "ClientFileExtensions": ".cshtml,.razor,.css,.js,.htm,.html",
    "ServerRefreshTimeout": 3000,
    "WebSocketUrl": "/__livereload",
    "WebSocketHost": "wss://localhost:5001",
    "FolderToMonitor": "~/"
  }
}

Verificare il funzionamento del live reload

• Inietta del codice JavaScript nell'HTML prodotto dalle nostre view. Tale codice serve a stabilire una connessione WebSocket con il server;
• Monitora i cambiamenti ai file situati nel percorso che abbiamo indicato con la chiave di configurazione FolderToMonitor (il percorso "~/" rappresenta la directory principale del progetto);
• Segnala al client che ci sono stati cambiamenti tramite la suddetta connessione WebSocket, così che la pagina possa essere aggiornata per riflettere i cambiamenti.

Per questo, ogni volta che modifichiamo una view Razor, vedremo il browser ricaricare la pagina nel giro di pochi secondi, tempo necessario alla ricompilazione delle view.
Le modifiche ai file statici come .css, .js e gli altri tipi indicati nell'opzione ClientFileExtensions, verranno invece rilevate e mostrate nella pagina quasi istantaneamente.

Se vogliamo che la pagina si aggiorni anche quando modifichiamo il codice C# presente nei Controller o negli altri componenti dell'applicazione, allora dovremo avviarla con il comando dotnet watch run anziché usare il tasto F5. In questo modo, infatti, verranno osservati anche i cambiamenti ai file di codice .cs ed eseguita una ricompilazione automatica dell'intero progetto. In questo caso serviranno alcuni secondi in più per visualizzare i cambiamenti, in base alla dimensione del progetto. Durante la ricompilazione, la connessione WebSocket verrà ovviamente interrotta e il codice JavaScript proverà a ripristinarla periodicamente, in base al numero di millisecondi indicati con l'opzione di configurazione ServerRefreshTimeout.

Conclusioni