La .NET CLI e Visual Studio permettono la creazione di un progetto backend WebAPI e un frontend gestito da Vite, uno strumento che permette di compilare le applicazioni javascript, tutto in un'unica soluzione. Se noi applicassimo le best practices studiate fino ad ora, per inserire il progetto in .NET Aspire, ci accorgeremmo che la dashboard mostrerà una sola riga, relativa al servizio WebAPI e verrà aperta una nuova console per il frontend. Questa casistica, anche se può sembrare errata, è in realtà corretta, in quanto l'applicazione che mostrerà la UI è controllata dal servizio WebAPI.

Il primo passo per uniformare tutto verso .NET Aspire, è creare un nuovo profilo all'interno di Properties/launchSettings.json per escludere la SPA

{
  "profiles": {
    "aspire": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "swagger",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        // rimuovere questa linea
        // "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy" 
      },
      "dotnetRunMessages": true,
      "applicationUrl": "https://localhost:53089;http://localhost:53090"
    }
}}

A seguito di questa modifica andiamo ad informare Aspire riguardo al profilo con cui dovrà eseguire l'applicazione

// MioProgetto.AppHost/program.cs
var servizioWebAPI = builder.AddProject<Mio.Progetto.WebAPI>("app", "aspire");

A questo punto toccherà aggiungere l'applicazione npm alla pipeline dei servizi da eseguire, specificandone il comando di esecuzione (dev), che servirà attendere il progetto WebAPI per fornirne l'endpoint.

builder.AddNpmApp("miaAppFrontend", "../Mio.Progetto.client", "dev")
    .WithReference(servizioWebAPI)
    .WaitFor(servizioWebAPI)
    .WithEnvironment("ASPNETCORE_URLS", servizioWebAPI.GetEndpoint("https"))
    .WithEnvironment("BROWSER", "none")
    .WithHttpsEndpoint(port: 5174, env: "PORT",name: "https");