Vários aplicativos ASP.NET Core Blazor WebAssembly hospedados

Este artigo explica como configurar um aplicativo Blazor WebAssembly hospedado para hospedar vários aplicativos Blazor WebAssembly.

Configuração

Selecione a versão deste artigo que corresponde aos seus requisitos de hospedagem, seja hospedagem de porta/domínio (por exemplo, :5001/:5002 ou firstapp.comsecondapp.com/) ou hospedagem de subcaminho de rota (por exemplo, /FirstApp e /SecondApp ).

Com a seleção de hospedagem atual, este artigo aborda a hospedagem de porta/domínio (por exemplo, :5001/:5002 ou firstapp.com/secondapp.com).

Nos exemplos a seguir:

• O nome do projeto do aplicativo Blazor WebAssembly hospedado está MultipleBlazorApps em uma pasta nomeada MultipleBlazorApps.
• Os três projetos na solução antes que um segundo aplicativo cliente seja adicionado estão MultipleBlazorApps.Client na pasta Client, MultipleBlazorApps.Server na pasta Server e MultipleBlazorApps.Shared na pasta Shared.
• O aplicativo cliente inicial (primeiro) é o projeto cliente padrão da solução criada com base no modelo de projeto Blazor WebAssembly.
• Um segundo aplicativo cliente é adicionado à solução, MultipleBlazorApps.SecondClient em uma pasta nomeada SecondClient.
• Opcionalmente, o projeto de servidor (MultipleBlazorApps.Server) pode servir páginas ou exibições como um aplicativo formal Razor Pages ou MVC.
• O primeiro aplicativo cliente é acessível em um navegador na porta 5001 ou com um host de firstapp.com. O segundo aplicativo cliente é acessível em um navegador na porta 5002 ou com um host de secondapp.com.

Com a seleção atual, este artigo aborda a hospedagem de subcaminho de rota (por exemplo, /FirstApp e /SecondApp).

Nos exemplos a seguir:

• O nome do projeto do aplicativo Blazor WebAssembly hospedado está MultipleBlazorApps em uma pasta nomeada MultipleBlazorApps.
• Os três projetos na solução antes que um segundo aplicativo cliente seja adicionado estão MultipleBlazorApps.Client na pasta Client, MultipleBlazorApps.Server na pasta Server e MultipleBlazorApps.Shared na pasta Shared.
• O aplicativo cliente inicial (primeiro) é o projeto cliente padrão da solução criada com base no modelo de projeto Blazor WebAssembly.
• Um segundo aplicativo cliente é adicionado à solução, MultipleBlazorApps.SecondClient em uma pasta nomeada SecondClient.
• Opcionalmente, o projeto de servidor (MultipleBlazorApps.Server) pode servir páginas ou exibições como um aplicativo formal Razor Pages ou MVC.
• Ambos os aplicativos cliente usam a porta padrão definida pelo arquivo Properties/launchSettings.json do projeto MultipleBlazorApps.Server em seu valor applicationUrl. O primeiro aplicativo cliente é acessível em um navegador no subcaminho /FirstApp. O segundo aplicativo cliente é acessível em um navegador no subcaminho /SecondApp.

Os exemplos mostrados neste artigo exigem configuração adicional para:

• Acessando os aplicativos diretamente nos domínios de host de exemplo firstapp.com e secondapp.com.
• Certificados para os aplicativos cliente para habilitar a segurança TLS/HTTPS.
• Configurando o aplicativo de servidor como um aplicativo Razor Pages para os seguintes recursos:
  • Integração de componentes Razor em páginas ou exibições.
  • Componentes Razor de pré-renderização.

As configurações anteriores estão fora do escopo desse artigo. Para obter mais informações, consulte os seguintes recursos:

• Hospedar e implantar artigos
• Impor HTTPS no ASP.NET Core
• Integrar componentes principais Razor do ASP.NET com MVC ou Razor Pages em soluções hospedadas Blazor WebAssembly

Use uma Blazor WebAssemblysolução hospedada existente ou crie uma nova solução Blazor WebAssembly hospedada a partir do modelo de projeto Blazor WebAssembly, passando a opção -ho|--hosted se estiver usando a CLI do .NET ou marcando a caixa de seleção ASP.NET Core Hospedado no Visual Studio quando o projeto for criado no IDE.

Use uma pasta para a solução nomeada MultipleBlazorApps e nomeie o projeto como MultipleBlazorApps.

Crie uma nova pasta na solução chamada SecondClient. Na nova pasta, adicione um segundo aplicativo cliente Blazor WebAssembly chamado MultipleBlazorApps.SecondClient. Adicione o projeto como um aplicativo Blazor WebAssembly autônomo. Para criar um aplicativo Blazor WebAssembly autônomo, não passe a opção -ho|--hosted se estiver usando a CLI do .NET ou não use a caixa de seleção ASP.NET Core Hospedado se estiver usando o Visual Studio.

Faça as seguintes alterações no projeto MultipleBlazorApps.SecondClient:

• Copie o componente FetchData (Pages/FetchData.razor) da pasta Client/Pages para a pasta SecondClient/Pages. Essa etapa é necessária porque um aplicativo autônomo Blazor WebAssembly não chama o controlador de um projeto Server para dados meteorológicos, ele usa um arquivo de dados estáticos. Ao copiar o componente FetchData para o projeto adicionado, o segundo aplicativo cliente também faz uma chamada à API Web para a API do servidor para dados meteorológicos.
• Exclua a SecondClient/wwwroot/sample-data pasta, pois o arquivo weather.json na pasta não é usado.

A tabela a seguir descreve as pastas e os nomes de projeto da solução depois que a pasta SecondClient e o projeto MultipleBlazorApps.SecondClient são adicionados.

Pasta física	Nome do projeto	Descrição
Client	MultipleBlazorApps.Client	Aplicativo cliente Blazor WebAssembly
SecondClient	MultipleBlazorApps.SecondClient	Aplicativo cliente Blazor WebAssembly
Server	MultipleBlazorApps.Server	Aplicativo do servidor ASP.NET Core
Shared	MultipleBlazorApps.Shared	Projeto de recursos compartilhados

O projeto MultipleBlazorApps.Server atende aos dois aplicativos cliente Blazor WebAssembly e fornece dados meteorológicos para os componentes FetchData dos aplicativos cliente por meio de um controlador MVC. Opcionalmente, o projeto MultipleBlazorApps.Server também pode atender a páginas ou exibições, como um aplicativo Razor Pages tradicional ou MVC. As etapas para habilitar o serviço de páginas ou exibições são abordadas posteriormente neste artigo.

Observação

A demonstração neste artigo usa nomes de caminho de ativos Web estáticos do FirstApp para o projeto MultipleBlazorApps.Client e SecondApp para o projeto MultipleBlazorApps.SecondClient. Os nomes "FirstApp" e "SecondApp" são apenas para fins de demonstração. Outros nomes são aceitáveis para distinguir os aplicativos cliente, como App1App2/, Client1/Client2 e 1/2, ou qualquer outro esquema de nomenclatura semelhante.

Ao rotear solicitações para os aplicativos cliente por uma porta ou um domínio, "FirstApp" e "SecondApp" são usados internamente para rotear solicitações e fornecer respostas para ativos estáticos e não são vistos na barra de endereços do navegador.

Observação

A demonstração neste artigo usa nomes de caminho de ativos Web estáticos do FirstApp para o projeto MultipleBlazorApps.Client e SecondApp para o projeto MultipleBlazorApps.SecondClient. Os nomes "FirstApp" e "SecondApp" são apenas para fins de demonstração. Outros nomes são aceitáveis para distinguir os aplicativos cliente, como App1App2/, Client1/Client2 e 1/2, ou qualquer outro esquema de nomenclatura semelhante.

"FirstApp" e "SecondApp" também aparecem na barra de endereços do navegador porque as solicitações são roteados para os dois aplicativos cliente usando esses nomes. Outros segmentos de rota de URL válidos têm suporte e os segmentos de rota não precisam corresponder estritamente aos nomes usados para rotear ativos Web estáticos internamente. Usar "FirstApp" e "SecondApp" para o roteamento interno de ativos estáticos e o roteamento de solicitação de aplicativo é apenas para convenções nos exemplos deste artigo.

No arquivo de projeto do aplicativo cliente (MultipleBlazorApps.Client.csproj), adicione uma propriedade <StaticWebAssetBasePath> a um <PropertyGroup> com um valor de FirstApp para definir o caminho base para os ativos estáticos do projeto:

<StaticWebAssetBasePath>FirstApp</StaticWebAssetBasePath>

No arquivo de projeto do aplicativo MultipleBlazorApps.SecondClient (MultipleBlazorApps.SecondClient.csproj):

• Adicione uma propriedade <StaticWebAssetBasePath> a um <PropertyGroup> com um valor de SecondApp:

  <StaticWebAssetBasePath>SecondApp</StaticWebAssetBasePath>
  

• Adicione uma referência de projeto para o projeto MultipleBlazorApps.Shared a um <ItemGroup>:

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

No arquivo de projeto do aplicativo de servidor (Server/MultipleBlazorApps.Server.csproj), crie uma referência de projeto para o aplicativo cliente adicionado MultipleBlazorApps.SecondClient em um <ItemGroup>:

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

No arquivo Properties/launchSettings.json do aplicativo do servidor, configure o applicationUrl do perfil Kestrel (MultipleBlazorApps.Server) para acessar os aplicativos cliente nas portas 5001 e 5002. Se você configurar seu ambiente local para usar os domínios de exemplo, as URLs para applicationUrl poderão usar firstapp.com e secondapp.com, e não usar as portas.

Observação

O uso de portas nesta demonstração permite o acesso aos projetos do cliente em um navegador local sem a necessidade de configurar um ambiente de hospedagem local para que os navegadores da Web possam acessar os aplicativos cliente por meio das configurações do host firstapp.com e secondapp.com. Em cenários de produção, uma configuração típica é usar subdomínios para distinguir os aplicativos cliente.

Por exemplo:

• As portas são removidas da configuração dessa demonstração.
• Os hosts são alterados para usar subdomínios, como www.contoso.com para visitantes do site e admin.contoso.com para administradores.
• Hosts adicionais podem ser incluídos para aplicativos cliente adicionais, e pelo menos mais um host será necessário se o aplicativo de servidor também for um aplicativo Razor Pages ou MVC que atenda a páginas ou exibições.

Se você planeja fornecer páginas ou exibições do aplicativo do servidor, use a seguinte configuração applicationUrl no arquivo Properties/launchSettings.json, que permite o seguinte acesso:

• Opcionalmente, o aplicativo Razor Pages ou MVC (projeto MultipleBlazorApps.Server) responde às solicitações na porta 5000.
• As respostas às solicitações para o primeiro cliente (projeto MultipleBlazorApps.Client) estão na porta 5001.
• As respostas às solicitações para o segundo cliente (projeto MultipleBlazorApps.SecondClient) estão na porta 5002.

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

Se você não espera que o aplicativo do servidor atenda a páginas ou exibições e atenda apenas aos aplicativos cliente Blazor WebAssembly, use a seguinte configuração, que permite o seguinte acesso:

• O primeiro aplicativo cliente responde na porta 5001.
• O segundo aplicativo cliente responde na porta 5002.

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

No arquivo Program.cs do aplicativo do servidor, remova o seguinte código, que aparece após a chamada para UseHttpsRedirection:

• Se você planeja servir a páginas ou exibições do aplicativo do servidor, exclua a seguinte linha de código:

  - app.UseBlazorFrameworkFiles();
  

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

• Se você planeja que o aplicativo do servidor atenda apenas aos aplicativos cliente Blazor WebAssembly, exclua o seguinte código:

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

  Deixe o middleware de arquivo estático no lugar:

  app.UseStaticFiles();
  

• Adicione middleware que mapeia solicitações para os aplicativos cliente. O exemplo a seguir configura o middleware a ser executado quando a porta de solicitação for 5001 para o primeiro aplicativo cliente ou 5002 para o segundo aplicativo cliente ou o host de solicitação for firstapp.com para o primeiro aplicativo cliente ou secondapp.com para o segundo aplicativo cliente.

  Observação

  O uso dos hosts (firstapp.com/secondapp.com) em um sistema local com um navegador local requer configuração adicional que está fora do escopo deste artigo. Para testes locais desse cenário, recomendamos o uso de portas. Aplicativos de produção típicos são configurados para usar subdomínios, como www.contoso.com para visitantes do site e admin.contoso.com para administradores. Com a configuração adequada de servidor e DNS, que está além do escopo deste artigo e depende das tecnologias usadas, o aplicativo responde a solicitações em quaisquer hosts nomeados no código a seguir.

  De onde você removeu a linha app.UseBlazorFrameworkFiles(); do Program.cs, coloque o seguinte código:

  app.MapWhen(ctx => ctx.Request.Host.Port == 5001 || 
      ctx.Request.Host.Equals("firstapp.com"), first =>
  {
      first.Use((ctx, nxt) =>
      {
          ctx.Request.Path = "/FirstApp" + ctx.Request.Path;
          return nxt();
      });
  
      first.UseBlazorFrameworkFiles("/FirstApp");
      first.UseStaticFiles();
      first.UseStaticFiles("/FirstApp");
      first.UseRouting();
  
      first.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}", 
              "FirstApp/index.html");
      });
  });
  
  app.MapWhen(ctx => ctx.Request.Host.Port == 5002 || 
      ctx.Request.Host.Equals("secondapp.com"), second =>
  {
      second.Use((ctx, nxt) =>
      {
          ctx.Request.Path = "/SecondApp" + ctx.Request.Path;
          return nxt();
      });
  
      second.UseBlazorFrameworkFiles("/SecondApp");
      second.UseStaticFiles();
      second.UseStaticFiles("/SecondApp");
      second.UseRouting();
  
      second.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}", 
              "SecondApp/index.html");
      });
  });
  

  Aviso

  Uma API que dependa do cabeçalho de host, como HttpRequest.Host e RequireHost, está sujeita a possíveis falsificações por clientes.

  Para evitar falsificação de host e porta, use uma das seguintes abordagens:

  • Use HttpContext.Connection (ConnectionInfo.LocalPort) onde as portas são verificadas.
  • Empregar filtragem de host.

• Adicione middleware que mapeia solicitações para os aplicativos cliente. O exemplo a seguir configura o middleware a ser executado quando o subcaminho de solicitação for /FirstApp para o primeiro aplicativo cliente ou /SecondApp para o segundo aplicativo cliente.

  De onde você removeu a linha app.UseBlazorFrameworkFiles(); do Program.cs, coloque o seguinte código:

  app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/FirstApp", 
      StringComparison.OrdinalIgnoreCase), first =>
  {
      first.UseBlazorFrameworkFiles("/FirstApp");
      first.UseStaticFiles();
      first.UseStaticFiles("/FirstApp");
      first.UseRouting();
  
      first.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/FirstApp/{*path:nonfile}",
              "FirstApp/index.html");
      });
  });
  
  app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/SecondApp", 
      StringComparison.OrdinalIgnoreCase), second =>
  {
      second.UseBlazorFrameworkFiles("/SecondApp");
      second.UseStaticFiles();
      second.UseStaticFiles("/SecondApp");
      second.UseRouting();
  
      second.UseEndpoints(endpoints =>
      {
          endpoints.MapControllers();
          endpoints.MapFallbackToFile("/SecondApp/{*path:nonfile}",
              "SecondApp/index.html");
      });
  });
  

• Defina o caminho base em cada aplicativo cliente:

  No arquivo index.html do primeiro aplicativo cliente (Client/wwwroot/index.html), atualize o valor da marca <base> para refletir o subcaminho. A barra à direita é necessária:

  <base href="/FirstApp/" />
  

  No arquivo index.html do segundo aplicativo cliente ( SecondClient/wwwroot/index.html ), atualize o valor da marca <base> para refletir o subcaminho. A barra à direita é necessária:

  <base href="/SecondApp/" />
  

Saiba mais em UseStaticFiles, confira Arquivos estáticos de Blazor no ASP.NET Core.

Para obter mais informações em UseBlazorFrameworkFiles e MapFallbackToFile, consulte os seguintes recursos:

• Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.UseBlazorFrameworkFiles (fonte de referência)
• Microsoft.AspNetCore.Builder.StaticFilesEndpointRouteBuilderExtensions.MapFallbackToFile (fonte de referência)

Observação

Os links de documentação para a fonte de referência do .NET geralmente carregam o branch padrão do repositório, que representa o desenvolvimento atual da próxima versão do .NET. Para selecionar uma marca para uma versão específica, use a lista suspensa para Alternar branches ou marcas. Para saber mais, confira Como selecionar uma marca de versão do código-fonte do ASP.NET Core (dotnet/AspNetCore.Docs #26205).

As solicitações dos aplicativos cliente para /WeatherForecast na API do servidor são para /FirstApp/WeatherForecast ou /SecondApp/WeatherForecast dependendo de qual aplicativo cliente faz a solicitação. Portanto, as rotas do controlador que retornam dados meteorológicos da API do servidor exigem uma modificação para incluir os segmentos de caminho.

No controlador de previsão do tempo do aplicativo de servidor (Controllers/WeatherForecastController.cs), substitua a rota existente ([Route("[controller]")]) por WeatherForecastController com as rotas a seguir, que levam em conta os caminhos de solicitação do cliente:

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

Se você planeja atender a páginas do aplicativo do servidor, adicione uma página IndexRazor à pasta Pages do aplicativo de servidor:

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()
    {
    }
}

Observação

A página Index anterior é um pequeno exemplo puramente para fins de demonstração. Se o aplicativo exigir ativos adicionais do Razor Pages, como um layout, estilos, scripts e importações, obtenha-os de um aplicativo criado a partir do modelo de projeto Razor Pages. Para obter mais informações, consulte Introdução ao Razor Pages no ASP.NET Core.

Se você planeja fornecer exibições MVC do aplicativo servidor, adicione uma exibição Index e um controlador 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();
}

Observação

O modo de exibição Index anterior é um pequeno exemplo puramente para fins de demonstração. Se o aplicativo exigir ativos adicionais do MVC, como um layout, estilos, scripts e importações, obtenha-os de um aplicativo criado a partir do modelo de projeto MVC. Para obter mais informações, consulte Introdução ao ASP.NET Core MVC.

Para obter mais informações sobre como usar os Razor componentes de qualquer um dos aplicativos cliente em páginas ou exibições do aplicativo de servidor, consulte Integrar ASP.NET componentes principais Razor com MVC ou Razor Páginas em soluções hospedadasBlazor WebAssembly.

Executar o aplicativo

Execute o projeto MultipleBlazorApps.Server:

• Acesse o aplicativo cliente inicial em https://localhost:5001.
• Acesse o aplicativo cliente adicionado em https://localhost:5002.
• Se o aplicativo de servidor estiver configurado para atender a páginas ou exibições, acesse a página Index ou exibição em https://localhost:5000.

• Acesse o aplicativo cliente inicial em https://localhost:{DEFAULT PORT}/FirstApp.
• Acesse o aplicativo cliente adicionado em https://localhost:{DEFAULT PORT}/SecondApp.
• Se o aplicativo de servidor estiver configurado para atender a páginas ou exibições, acesse a página Index ou exibição em https://localhost:{DEFAULT PORT}.

Nas URLs de exemplo anteriores, o espaço reservado {DEFAULT PORT} é a porta padrão definida pelo arquivo Properties/launchSettings.json do projeto MultipleBlazorApps.Server em seu valor applicationUrl.

Importante

Ao executar o aplicativo com o comando dotnet watch (ou dotnet run) (CLI do .NET), confirme se o shell de comando está aberto na pasta Server da solução.

Ao usar o botão iniciar do Visual Studio para executar o aplicativo, confirme se o projeto MultipleBlazorApps.Server está definido como o projeto de inicialização (realçado no Gerenciador de Soluções).

Ativos estáticos

Quando um ativo estiver na pasta wwwroot de um aplicativo cliente, forneça o caminho de solicitação de ativo estático nos componentes:

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

O espaço reservado {PATH AND FILE NAME} é o caminho e o nome do arquivo em wwwroot.

Por exemplo, a origem de uma imagem do Jeep (jeep-yj.png) na pasta vehicle de wwwroot:

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

Suporte à RCL (biblioteca de classes) Razor

Adicione a RCL (biblioteca de classes) Razor à solução como um novo projeto:

• Clique com o botão direito do mouse na solução em Gerenciador de Soluções e escolha Adicionar>Novo Projeto.
• Use o modelo de projeto Biblioteca de Classes Razor para criar o projeto. Os exemplos nesta seção usam o nome do projeto ComponentLibrary, que também é o nome do assembly da RCL. Não marque a caixa de seleção Páginas de suporte e exibições.

Para cada aplicativo cliente Blazor WebAssembly hospedado, crie uma referência de projeto para o projeto RCL clicando com o botão direito do mouse em cada projeto cliente no Gerenciador de Soluções e selecionando Adicionar>Referência de Projeto.

Use componentes da RCL nos aplicativos cliente com uma das seguintes abordagens:

• Coloque uma diretiva @using na parte superior do componente para o namespace da RCL e adicione a sintaxe Razor para o componente. O exemplo a seguir é para uma RCL com o nome do assembly ComponentLibrary:

  @using ComponentLibrary
  
  ...
  
  <Component1 />
  

• Forneça o namespace da RCL junto com a sintaxe Razor do componente. Essa abordagem não requer uma diretiva @using na parte superior do arquivo de componente. O exemplo a seguir é para uma RCL com o nome do assembly ComponentLibrary:

  <ComponentLibrary.Component1 />
  

Observação

Uma diretiva@using também pode ser colocada no arquivo _Import.razor de cada aplicativo cliente, o que torna o namespace da RCL globalmente disponível para componentes nesse projeto.

Quando qualquer outro ativo estático estiver na pasta wwwroot de uma RCL, faça referência ao ativo estático em um aplicativo cliente de acordo com as diretrizes em Interface do usuário Razor reutilizável em bibliotecas de classes com ASP.NET Core:

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

O espaço reservado {PACKAGE ID} é a ID do pacote da RCL. A ID do pacote terá como valor padrão o nome do assembly do projeto, se <PackageId> não for especificado no arquivo de projeto. O espaço reservado {PATH AND FILE NAME} é o caminho e o nome do arquivo em wwwroot.

O exemplo a seguir mostra a marcação de uma imagem de Jeep (jeep-yj.png) na pasta vehicle da pasta wwwroot da RCL. O exemplo a seguir é para uma RCL com o nome do assembly ComponentLibrary:

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

Recursos adicionais

• Consumir componentes do Razor de uma Razor biblioteca de classes (RCL)
• Interface do usuário do Razor reutilizável em bibliotecas de classes com o ASP.NET Core
• Isolamento da CSS Blazor do ASP.NET Core