Plusieurs applications hébergées ASP.NET Core Blazor WebAssembly

Cet article explique comment configurer une application hébergée Blazor WebAssembly pour héberger plusieurs applications Blazor WebAssembly.

Configuration

Sélectionnez la version de cet article qui correspond à vos besoins d’hébergement, l’hébergement de port ou de domaine (par exemple, :5001/:5002 ou firstapp.com/secondapp.com), ou l’hébergement de sous-chemin de routage (par exemple, /FirstApp et /SecondApp).

Les exemples présentés dans cet article nécessitent une configuration supplémentaire pour :

• L’accès aux applications directement sur les exemples de domaines hôtes, firstapp.com et secondapp.com.
• Les certificats pour les applications clientes pour activer la sécurité TLS/HTTPS.
• La configuration de l’application serveur en tant qu’application Pages Razor pour les fonctionnalités suivantes :
  • L’intégration de composants Razor dans des pages ou des vues.
  • Composants Razor de pré-affichage.

Les configurations précédentes dépassent l’étendue de cet article. Pour plus d'informations, reportez-vous aux ressources suivantes :

• Articles sur l’hôte et le déploiement
• Appliquer HTTPS dans ASP.NET Core
• Intégrer ASP.NET composants Core Razor à MVC ou Razor Pages dans des solutions hébergées Blazor WebAssembly

Utilisez une Blazor WebAssemblysolution hébergée existante ou créez une nouvelle solution Blazor WebAssembly hébergée depuis le modèle de projet Blazor WebAssembly en transmettant l’option -ho|--hosted si vous utilisez l’interface de ligne de commande .NET ou en cochant la case ASP.NET Core hébergé dans Visual Studio ou Visual Studio pour Mac lorsque le projet est créé dans l’IDE.

Utilisez un dossier pour la solution nommé MultipleBlazorApps et nommez le projet MultipleBlazorApps.

Créez un dossier dans la solution nommé SecondClient. Dans le nouveau dossier, ajoutez une deuxième application cliente Blazor WebAssembly nommée MultipleBlazorApps.SecondClient. Ajoutez le projet en tant qu’application autonome Blazor WebAssembly. Pour créer une application autonome Blazor WebAssembly, ne transmettez pas l’option -ho|--hosted si vous utilisez l’interface de ligne de commande .NET ou si vous n’utilisez pas la case à cocher Hébergé sur ASP.NET Core si vous utilisez Visual Studio.

Appliquez les modifications suivantes au projet MultipleBlazorApps.SecondClient :

• Copiez le composant FetchData (Pages/FetchData.razor) du dossier Client/Pages vers le dossier SecondClient/Pages. Cette étape est requise, car une application Blazor WebAssembly autonome n’appelle pas le contrôleur d’un projet Server pour les données météorologiques. Elle utilise un fichier de données statiques. En copiant le composant FetchData dans le projet ajouté, la deuxième application cliente effectue également un appel d’API web à l’API serveur pour les données météorologiques.
• Supprimez le dossier SecondClient/wwwroot/sample-data, car le fichier weather.json dans le dossier n’est pas utilisé.

Le tableau suivant décrit les dossiers et les noms de projet de la solution après l’ajout du dossier SecondClient et du projet MultipleBlazorApps.SecondClient.

Le projet MultipleBlazorApps.Server sert les deux applications clientes Blazor WebAssembly et fournit des données météorologiques aux composants FetchData des applications clientes via un contrôleur MVC. Si vous le souhaitez, le projet Razor peut également délivrer des pages ou des vues, en tant qu’application Pages ou MVC MultipleBlazorApps.Server traditionnelle. Les étapes permettant d’activer le traitement de pages ou de vues sont abordées plus loin dans cet article.

Dans le premier fichier projet de l’application cliente (MultipleBlazorApps.Client.csproj), ajoutez une propriété <StaticWebAssetBasePath> à un <PropertyGroup> avec la valeur de FirstApp pour définir le chemin d’accès de base des ressources statiques du projet :

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

Dans le Fichier projet de l’application MultipleBlazorApps.SecondClient (MultipleBlazorApps.SecondClient.csproj) :

• Ajoutez une propriété <StaticWebAssetBasePath> à un <PropertyGroup> avec la valeur SecondApp :

  <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
  

• Ajoutez une référence de projet pour le projet MultipleBlazorApps.Shared à un <ItemGroup> :

  <ItemGroup>
    <ProjectReference Include="..\Shared\MultipleBlazorApps.Shared.csproj" />
  </ItemGroup>
  

Dans le Fichier projet de l’application serveur (Server/MultipleBlazorApps.Server.csproj), créez une référence de projet pour l’application cliente MultipleBlazorApps.SecondClient ajoutée dans un <ItemGroup> :

<ProjectReference Include="..\SecondClient\MultipleBlazorApps.SecondClient.csproj" />

"applicationUrl": "https://localhost:5000;https://localhost:5001;https://localhost:5002",

"applicationUrl": "https://localhost:5001;https://localhost:5002",

Dans le fichier Program.cs de l’application serveur, supprimez le code suivant, qui s’affiche après l’appel à UseHttpsRedirection :

• Si vous envisagez de délivrer des pages ou des vues à partir de l’application serveur, supprimez les lignes de code suivantes :

  - app.UseBlazorFrameworkFiles();
  

  - app.MapFallbackToFile("index.html");
  

• Si vous envisagez que l’application serveur fournisse uniquement des services aux applications clientes Blazor WebAssembly, supprimez le code suivant :

  - app.UseBlazorFrameworkFiles();
  
  ...
  
  - app.UseRouting();
  
  - app.MapRazorPages();
  - app.MapControllers();
  - app.MapFallbackToFile("index.html");
  

  Laissez l’intergiciel de fichiers statiques à sa place :

  app.UseStaticFiles();
  

Pour plus d’informations sur UseStaticFiles, consultez Fichiers statiques Blazor ASP.NET Core.

Pour plus d’informations sur UseBlazorFrameworkFiles et MapFallbackToFile, consultez les ressources suivantes :

• Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (source de référence)
• Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (source de référence)

Les demandes des applications clientes à /WeatherForecast dans l’API serveur sont soit pour /FirstApp/WeatherForecast, soit pour /SecondApp/WeatherForecast, en fonction de l’application cliente qui effectue la requête. Par conséquent, les routes du contrôleur qui renvoient les données météorologiques de l’API serveur nécessitent d’être modifiées pour inclure les segment de tracé.

Dans le contrôleur de prévisions météorologiques de l’application serveur (Controllers/WeatherForecastController.cs), remplacez la route existante ([Route("[controller]")]) vers WeatherForecastController par les routes suivantes, qui prennent en compte les chemins de demande du client.

[Route("FirstApp/[controller]")]
[Route("SecondApp/[controller]")]

Si vous envisagez de délivrer des pages à partir de l’application serveur, ajoutez une page IndexRazor au dossier Pages de l’application serveur :

Pages/Index.cshtml:

@page
@model MultipleBlazorApps.Server.Pages.IndexModel
@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from Razor Pages!</p>
            </div>
        </div>
    </div>
</body>
</html>

Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages;

public class IndexModel : PageModel
{
    public void OnGet()
    {
    }
}

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MultipleBlazorApps.Server.Pages
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Si vous envisagez de délivrer des vues MVC à partir de l’application serveur, ajoutez une vue Index et un contrôleur Home :

Views/Home/Index.cshtml:

@{
    ViewData["Title"] = "Home";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Home</title>
</head>
<body>
    <div class="main">
        <div class="content px-4">

            <div>
                <h1>Welcome</h1>
                <p>Hello from MVC!</p>
            </div>
        </div>
    </div>
</body>
</html>

Controllers/HomeController.cs:

using Microsoft.AspNetCore.Mvc;

namespace MultipleBlazorApps.Server.Controllers;

public class HomeController : Controller
{
    public IActionResult Index() => View();
}

Pour plus d’informations sur l’utilisation Razor des composants de l’une des applications clientes dans des pages ou des vues de l’application serveur, consultez Intégrer ASP.NET composants Core Razor avec MVC ou Razor Pages dans des solutions hébergéesBlazor WebAssembly.

Exécuter l’application

Exécutez le projet MultipleBlazorApps.Server :

Les ressources statiques

Lorsqu’une ressource se trouve dans le dossier wwwroot d’une application cliente, fournissez le chemin d’accès de la requête de la ressource statique dans les composants :

<img alt="..." src="{PATH AND FILE NAME}" />

L’espace réservé {PATH AND FILE NAME} correspond au chemin et au nom de fichier sous wwwroot.

Par exemple, la source d’une image Jeep (jeep-yj.png) dans le dossier vehicle de wwwroot :

<img alt="Jeep Wrangler YJ" src="vehicle/jeep-yj.png" />

Prise en charge de la bibliothèque de classes Razor (RCL)

Ajoutez la bibliothèque de classes Razor (RCL) à la solution en tant que nouveau projet :

• Cliquez avec le bouton droit sur la solution dans l’Explorateur de solutions, puis sélectionnez Ajouter>Nouveau projet.
• Utilisez le modèle de projet Razor Bibliothèque de classes pour créer le projet. Les exemples de cette section utilisent le nom du projet ComponentLibrary, qui est également le nom de l’assembly RCL. Ne cochez pas la case Prendre en charge les pages et les vues.

Pour chaque application cliente hébergée Blazor WebAssembly, créez une référence de projet pour le projet RCL en faisant un clic droit sur chaque projet client dans Explorateur de solutions et en sélectionnant Ajouter>Référence de projet.

Utilisez des composants de la RCL dans les applications clientes avec l’une des approches suivantes :

• Placez une directive @using en haut du composant pour l’espace de noms RCL et ajoutez la syntaxe Razor du composant. L’exemple suivant est destiné à une RCL avec le nom de l’assembly ComponentLibrary :

  @using ComponentLibrary
  
  ...
  
  <Component1 />
  

• Fournissez l’espace de noms de la RCL, ainsi que la syntaxe Razor du composant. Cette approche ne nécessite pas de directive @using en haut du fichier de composant. L’exemple suivant est destiné à une RCL avec le nom de l’assembly ComponentLibrary :

  <ComponentLibrary.Component1 />
  

Quand une autre ressource statique se trouve dans le dossier wwwroot d’une RCL, référencez la ressource statique dans une application cliente conformément aux instructions de l’interface utilisateur Réutilisable Razor dans les bibliothèques de classes avec ASP.NET Core :

<img alt="..." src="_content/{PACKAGE ID}/{PATH AND FILE NAME}" />

L’espace réservé {PACKAGE ID} correspond à l’ID du package de la RCL. L’ID de package est défini par défaut sur le nom d’assembly du projet si <PackageId> n’est pas spécifié dans le fichier projet. L’espace réservé {PATH AND FILE NAME} correspond au chemin d’accès et au nom de fichier sous wwwroot.

L’exemple suivant montre le balisage d’une image Jeep (jeep-yj.png) dans le dossier vehicle du dossier wwwroot RCL. L’exemple suivant est destiné à une RCL avec le nom de l’assembly ComponentLibrary :

<img alt="Jeep Wrangler YJ" src="_content/ComponentLibrary/vehicle/jeep-yj.png" />

Ressources supplémentaires

• Consommer des composants Razor ASP.NET Core d’une bibliothèque de classes Razor (RCL)
• Interface utilisateur Razor réutilisable dans les bibliothèques de classes avec ASP.NET Core
• Isolation CSS Blazor ASP.NET Core