Single Page e ASPNET Core 3.0

in ASPNET Core

Single Page e ASPNET Core 3.0

Reading Time: 4 minutes

ASPNET Core 3.0 mette a disposizione una serie di strumenti per lo sviluppo di Single Page Application (SPA). Oggi, lo sviluppo di questa tipologia di applicazioni utilizza framework che portano con se il valore aggiunto di milioni di sviluppatori che li stanno utilizzando.

Angular e React anno parte dei template standard della cli di dotnet core, rendendo semplice la realizzazione della struttura base single page application. Al momento della scrittura di questo i template messi a disposizione non permettono la realizzazione di SPA con altri framework, come Vue, Backbone ecc..

Con ASPNET è possibile sviluppare SPA in diversi modi:

  • utilizzando middleware specifici per Angular e Rect
  • inserire il codice della SPA all’interno di una cartella dell’applicazione ASPNET Core (es. all’interno della cartella static)
  • integrazione completa del framework della SPA direttamente all’interno del progetto

Nel corso di questo post analizzerò ciascuna delle modalità precedenti. In particolare, realizzando codice SPA tramite Angular. Non è ovviamente semplice definire il tipo di approccio che dovrà essere utilizzato: dipende dal tipo di architettura da realizzare. Personalmente, preferisco creare integrazioni complete piuttosto che utilizzare altri tipi di operazioni. Questo perchè raramente mi trovo nella situazione di dover creare un’unica soluzione monolitica all’interno di ambienti enterprise. Ma ripeto, la scelta di una

Middleware

ASPNET Core mette a disposizione un middleware specifico per la creazione di applicazioni SPA. Questo tipo di approccio è molto pratico e consente di gestire l’intero codice all’interno di una singola sottodirectory, creando di fatto un isolamento della SPA rispetto al progetto completo.

Per la creazione di questo tipo di progetto si può utilizzare direttamente Visual Studio 2019, scegliendo il tipo di progetto ASPNET Core Web Application -> Angular/React, oppure utilizzando la cli di dotnet core con il comando:

dotnet new angular -o <output_directory_name> -au Individual

e nel caso di creazione di un applicazione react:

dotnet new react -o <output_directory_name> -au Individual

Con il codice precedente viene creato un progetto ASPNET Core che utilizzerà Angular o React come framework di riferimento. Inoltre, l’applicazione farà uso dell’autenticazione. Supponendo di voler implementare un progetto Angular, la struttura prevederà una cartella ClientApp all’interno della quale saranno posizionati tutti i file di supporto alla SPA.

Ma come fa ASPNET Core ad utilizzare questa cartella? Semplicemente aggiungendo un middleware specifico, al termine del metodo Configure:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {

      // ...

      if (!env .IsDevelopment())
      {
        app.UseSpaStaticFiles();
      }

      app.UseRouting();

      app.UseEndpoints(endpoints =>
      {
        endpoints.MapControllerRoute(
                  name: "default",
                  pattern: "{controller}/{action=Index}/{id?}");
      });

      app.UseSpa(spa =>
      {
        // To learn more about options for serving an Angular SPA from ASP.NET Core,
        // see https://go.microsoft.com/fwlink/?linkid=864501

        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
          spa.UseAngularCliServer(npmScript: "start");
        }
      });
    }

Analizzando il codice precendente, notiamo la presenza di :

  • app.UseSpaStaticFiles();
  • app.UseSpa(…)

che consentono di gestire le chiamate dal file index.html creato dalla cli di angular. Inoltre, se ci troviamo all’interno dell’ambiente dev, l’esecuzione avverà utilizzando il comando npm start.

Utilizzando il template per React viene realizzata una struttura simile a quella vista in precedenza.

Sottocartella del progetto MVC

Nell’esempio precedente abbiamo realizzato la struttura SPA utilizzando il middleware messo a disposizione da ASPNET Core. Questo tipo di soluzione è sicuramente pratica, ma crea di fatto un’applicazione “monolica” e dedicata alla SPA. Spesso, durante le fasi di sviluppo, è meglio integrare l’applicazione SPA con la logica del progetto MVC che la contiene.

In questo caso, viene creata la cartella destinazione della nostra applicazione SPA, allo stesso livello della directory root. All’interno della cartella ClientApp è presente il file package.json, come se effettivamente si trattasse di un progetto Angular separato. All’interno di questa cartella possiamo sviluppare come se si trattasse di un’applicazione esterna.

Un problema di questa tecnica, riguarda la presenza della directory della build di Angular all’interno della cartella ClientApp. Per evitare problemi nell’accesso si può ricorrere all’utilizzo del middleware SpaStaticFiles . Se non si vuole utilizzare il middleware, è anche possibile configurare il file del framework SPA per utilizzare come directory di output, la directory www.

Integrazione completa dell’applicazione SPA all’interno del progetto

Questo tipo di soluzione prevede alcuni passaggi manuali per l’integrazione della SPA all’interno di un progetto ASPNET Core esistente.

In particolare:

  • configurazione/unione della configurazione NPM
  • spostamento della configurazione all’interno della root del progetto

Il primo punto riguarda la creazione di un unico file package.json contenente tutti i i riferimenti necessari all’esecuzione dell’applicazione. Poichè all’interno del package.json un progetto SPA (ad esempio Angular) contiene una serie di riferimenti ai package da utilizzare, la fase di configurazione/unione può essere piuttosto laboriosa, soprattutto perchè una volta creato il file completo delle dipendenze sarà necessario cancellare tutte le cartelle all’interno di node_modules, facendo scaricare nuovamente i pacchetti tramite npm install.

Una volta definita la nuova configurazione NPM, si passa allo spostamento della configurazione applicazione SPA. Attenzione, solo della configurazione e non del codice dell’intera applicazione che dovrà essere mantenuta all’interno della cartella dei sorgenti. Nel caso di un applicazione Angular, i file che dobbiamo trovarci all’interno della root dovranno essere angular.json , tsconfig.json e tslint.json .

Dovranno essere adeguati tutti i riferimenti dei file dell’applicazione per farli puntare all’interno della cartella ClientApp/src.

Una volta ultimata la configurazione, il modo più semplice per testare se tutto è stato fatto correttamente è quello di utilizzare il comando :

ng build 

Se l’applicazione compila correttamente, non dovrebbero essere problemi con nuova configurazione.

Tips

Utilizzando il template di ASPNET Core per la creazione di un progetto Angular, è possibile utilizzare il comando della cli di Angular ng .

La cartella ClientApp contiene, infatti, un applicazione angular standard. Supponiamo di voler aggiungere un nuovo component, chiamato todo-list:

Utilizzando il comando precedente otteniamo un errore:

More than one module matches. Use skip-import option to skip importing the component into the closest module.

Per poter procedere con la creazione del nuovo componente è necessario specificare il module di partenza.

ng g c todo-list --module=app.module

indicando app.module per l’importazione delle direttive del nuovo componente. In questo modo è possibile creare un nuovo componenente ed averlo a disposizione all’interno della cartella ClientApp.