Aggiungere Blazor WebAssembly ad una applicazione ASP.NET Core esistente

pubblicato da il 14/05/2020 alle 7:54

ASP.NET Core  Blazor  WebAssembly 

Tra i template che Microsoft offre per lo sviluppo con Blazor WebAssembly c'è la possibilità di fare hosting di Blazor in un progetto ASP.NET Core. Questo tipo di template permette di creare tre diverse tipologie di progetti:

  • Un progetto Blazor WebAssembly
  • Un progetto ASP.NET Core che contiene una reference al progetto Blazor
  • Un progetto Class Library in cui troviamo le classi utilizzate da entrambi i progetti descritti sopra.

Se fossimo nella situazione di avere un progetto ASP.NET Core già esistente e volessimo aggiungere una parte in WebAssembly, ad esempio un'area di backoffice, come possiamo fare?

Il processo di aggiutnta della componente è molto semplice.

Prima di iniziare verifichiamo di avere installato il necessario per lavorare con Blazor Webassembly (ad oggi in Release Candidate) seguendo la guida che troviamo sul portale web della documentazione ufficiale qui.

Verificati i prerequisiti, creiamo un progetto Blazor Webassembly, assicuriamoci che la spunta su ASP.NET Core Hosted non sia selezionata e aggiungiamo la reference di quest'ultimo alla nostra applicazione ASP.NET Core esistente.

Installiamo nel progetto ASP.NET Core il pacchetto Microsoft.AspNetCore.Components.WebAssembly.Server da NuGet e modifichiamo il metodo Configure della classe Startup come segue:

if (env.IsDevelopment())
{
  app.UseDeveloperExceptionPage();

  app.UseWebAssemblyDebugging();
}
else
{
  app.UseExceptionHandler("/Error");
  // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
  app.UseHsts();
}

app.UseHttpsRedirection();

app.UseBlazorFrameworkFiles();
app.UseStaticFiles();

app.UseRouting();

app.UseEndpoints(endpoints =>
{
  endpoints.MapControllers();

  endpoints.MapFallbackToFile("index.html");
});

Il metodo app.UseWebAssemblyDebugging() abilita il debugger per Blazor se la configurazione lo permette (potete trovare gli step per abilitare il debugging su Blazor sulla documentazione ufficiale qui).

Il metodo app.UseBlazorFrameworkFiles() configura l'applicazione per fare in modo che i file di framework per Blazor Webassembly possano essere raggiunti dal path di root. Per questo metodo è presente anche un overload che permette di specificare una istanza di PathString in caso i file si trovino in una root path diversa.

Infine il metodo endpoints.MapFallbackToFile("index.html"), che si trova nella callback di UseEndpoints,  istruisce ASP.NET a fare fallback sul file index.html che trovate nella cartella wwwroot del progetto Blazor, in caso la rotta non sia mappata nel routing engine di ASP.NET Core. In questo modo se digitiamo un url che non esiste nel routing di ASP.NET, la richiesta viene gestita dal routing di Blazor.

Potrebbe però capitare che l'esigenza sia che l'applicazione Blazor risponda ad un prefisso specifico, ad esempio /backoffice. In questo caso è possibile utilizzare il metodo app.Map() come segue:

app.Map("/backoffice", app =>
{
  app.UseBlazorFrameworkFiles();
  app.UseRouting();

  app.UseAuthorization();

  app.UseEndpoints(endpoints =>
  {
    endpoints.MapFallbackToFile("index.html");
  });
});

In questo modo stiamo configurando l'applicazione dicendogli che, qualora venisse chiamato un endpoint che abbia come prefisso il path /backoffice, la richiesta dovrà utilizzare il nostro progetto Blazor.
Come si può vedere all'interno della callback del metodo Map viene abilitato Blazor e viene chiamato il metodo UseEndpoints al cui interno l'applicazione viene istruita a fare fallback sul file index.html presente nel progetto Blazor Webassembly.

A questo punto dobbiamo fare alcune modifiche al progetto Blazor.
Apriamo il file index.html che troviamo nella wwwroot e modifichiamo il tag <base href="/" /> impostandogli come valore dell'href il prefisso scelto. Nel nostro esempio il tag deve diventare <base href="/backoffice/" />.

Fatto questo spostiamo gli altri file statici presenti nella wwwroot in una cartella che creiamo al suo interno e che dovrà chiamarsi come il prefisso che abbiamo scelto (backoffice nel nostro caso).

Fatto questo, avviando l'applicazione MVC e dirigendoci al percorso /backoffice si caricherà l'applicazione Blazor.