Fichiers statiques ASP.NET Core Blazor

Cet article décrit la configuration d’application Blazor pour servir des fichiers statiques.

Fichiers statiques de l’infrastructure Blazor

Dans les versions antérieures à .NET 8, les fichiers statiques de l’infrastructure Blazor, tels que le script Blazor, sont servis via le middleware de fichiers statiques. Dans .NET 8 ou version ultérieure, le middleware de fichiers statiques n’est plus utilisé, car les fichiers statiques de l’infrastructure Blazor sont mappés à l’aide du routage de point de terminaison.

Mode projet d’une ressource web statique

Cette section s’applique au projet .Client d’une application web Blazor.

Le paramètre requis <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode> dans le projet .Client d’une application web Blazor rétablit les comportements de ressources statiques Blazor WebAssembly par défaut afin que le projet se comporte comme partie intégrante du projet hébergé. Le Kit de développement logiciel (SDK) Blazor WebAssembly (Microsoft.NET.Sdk.BlazorWebAssembly) configure les ressources web statiques d’une manière spécifique pour fonctionner en mode « autonome » avec un serveur qui consomme simplement les sorties de la bibliothèque. Cette action n’est pas appropriée pour une application web Blazor, où la partie WebAssembly de l’application constitue une partie logique de l’hôte et doit se comporter davantage comme une bibliothèque. Par exemple, le projet n’expose pas le bundle de styles (par exemple BlazorSample.Client.styles.css) et fournit uniquement l’hôte à la place avec le bundle de projet afin que l’hôte puisse l’inclure dans son propre bundle de styles.

La modification de la valeur (Default) de <StaticWebAssetProjectMode> ou la suppression de la propriété du projet .Clientn’est pas prise en charge.

Middleware de fichiers statiques

Cette section s’applique aux applications Blazor côté serveur.

Configurez l’Intergiciel de fichiers statiques pour délivrer des ressources statiques aux clients en appelant UseStaticFiles dans le pipeline de traitement des requêtes de l’application. Pour plus d’informations, consultez Fichiers statiques dans ASP.NET Core.

Fichiers statiques dans des environnements non Development

Cette section s’applique aux fichiers statiques côté serveur.

Lors de l’exécution locale d’applications, les ressources web statiques sont uniquement activées par défaut dans l’environnement Development. Pour activer les fichiers statiques pour des environnements autres que Development pendant le développement et le test locaux (par exemple, Staging), appelez UseStaticWebAssets sur WebApplicationBuilder dans le fichier Program.

Warning

Appelez UseStaticWebAssets pour l’environnement exact pour empêcher l’activation de la fonctionnalité en production, car elle délivre des fichiers provenant d’emplacements distincts sur le disque autres que le projet si elle est appelée dans un environnement de production. L’exemple de cette section vérifie l’environnement Staging en appelant IsStaging.

if (builder.Environment.IsStaging())
{
    builder.WebHost.UseStaticWebAssets();
}

Préfixe pour les ressources Blazor WebAssembly

Cette section s’applique aux applications web Blazor.

Utilisez l’option WebAssemblyComponentsEndpointOptions.PathPrefix le point de terminaison pour définir la chaîne de chemin qui indique le préfixe des ressources Blazor WebAssembly. Le chemin d’accès doit correspondre à un projet d’application référencé Blazor WebAssembly.

endpoints.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode(options => 
        options.PathPrefix = "{PATH PREFIX}");

Dans l’exemple précédent, l’espace réservé {PATH PREFIX} est le préfixe du chemin d’accès et doit commencer par une barre oblique (/).

Dans l’exemple suivant, le préfixe de chemin d’accès est défini sur /path-prefix :

endpoints.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode(options => 
        options.PathPrefix = "/path-prefix");

Chemin d’accès de base des ressources web statiques

Cette section s’applique aux applications Blazor WebAssembly autonomes.

Par défaut, la publication de l’application place les ressources statiques de l’application, y compris les fichiers d’infrastructure Blazor (ressources de dossier _framework), au niveau du chemin d’accès racine (/) dans la sortie publiée. La propriété <StaticWebAssetBasePath> spécifiée dans le Fichier projet (.csproj) définit le chemin d’accès de base à un chemin d’accès non racine :

<PropertyGroup>
  <StaticWebAssetBasePath>{PATH}</StaticWebAssetBasePath>
</PropertyGroup>

Dans l’exemple précédent, l’espace réservé {PATH} est le chemin d’accès.

Sans définir la propriété <StaticWebAssetBasePath>, une application autonome est publiée à /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/.

Dans l’exemple précédent, l’espace réservé {TFM} est le Moniker du framework cible (TFM) (par exemple, net6.0).

Si la propriété <StaticWebAssetBasePath> dans une application Blazor WebAssembly autonome définit le chemin d’accès à la ressource statique publiée sur app1, le chemin racine de l’application dans la sortie publiée est /app1.

Dans le fichier projet de l’application Blazor WebAssembly autonome (.csproj) :

<PropertyGroup>
  <StaticWebAssetBasePath>app1</StaticWebAssetBasePath>
</PropertyGroup>

Dans la sortie publiée, le chemin d’accès à l’application Blazor WebAssembly autonome est /BlazorStandaloneSample/bin/Release/{TFM}/publish/wwwroot/app1/.

Dans l’exemple précédent, l’espace réservé {TFM} est le Moniker du framework cible (TFM) (par exemple, net6.0).

Mappages de fichiers et options de fichier statiques

Cette section s’applique aux fichiers statiques côté serveur.

Pour créer des mappages de fichiers supplémentaires avec un FileExtensionContentTypeProvider ou configurer d’autres StaticFileOptions, utilisez l’une des approches suivantes. Dans les exemples suivants, l’espace réservé {EXTENSION} est l’extension de fichier et l’espace réservé {CONTENT TYPE} est le type de contenu. L’espace de noms de l’API suivante est Microsoft.AspNetCore.StaticFiles.

• Configurez les options via l’injection de dépendances (DI) dans le fichier Program à l’aide de StaticFileOptions :

  var provider = new FileExtensionContentTypeProvider();
  provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";
  
  builder.Services.Configure<StaticFileOptions>(options =>
  {
      options.ContentTypeProvider = provider;
  });
  
  app.UseStaticFiles();
  

• Passez StaticFileOptions directement à UseStaticFiles dans le fichier Program :

  var provider = new FileExtensionContentTypeProvider();
  provider.Mappings["{EXTENSION}"] = "{CONTENT TYPE}";
  
  app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });
  

Ressources supplémentaires

Chemin de base de l’application