Execute Blazor WASM como Blazor Server-Side

Question

NOTA : Esta é uma postagem "Compartilhe seu conhecimento - estilo Q&A". Provavelmente recebi um voto negativo porque alguém interpretou mal o contexto desta postagem :(

Problema

O Blazor WASM poderia ter sido facilmente preferido ao Blazor Server-Side, sem suas desvantagens em termos de desenvolvimento. Atualmente, o Blazor WASM não oferece suporte a uma experiência de depuração completa e tem uma inicialização muito lenta. Isso retarda o desenvolvimento muito mais do que com o Blazor Server-Side. Embora eu, honestamente, ache que a experiência de depuração retarda o desenvolvimento muito mais do que a inicialização lenta.

Solução proposta

NOTA: incluí a palavra "proposta" aqui porque não tenho certeza sobre as desvantagens que essa solução pode causar, então sinta-se à vontade para comentar minha resposta abaixo.

A solução é simplesmente criar um projeto Blazor Server-Side adicional e então fazer referência ao projeto Blazor WASM para o projeto Blazor Server-Side. Depois, adicione alguns ajustes ao Startupe ao _Host.cshtmldo Blazor Server-Side para usar corretamente os arquivos de barbear Blazor WASM e os arquivos wwwroot. Veja minha resposta proposta abaixo para uma explicação passo a passo para esta solução.

Em termos mais simples, esta solução apenas adiciona e configura o projeto Blazor do lado do servidor sem fazer nenhuma alteração e nenhuma duplicação de código significativa no projeto Blazor WASM.

Answer 1

NOTA: neste exemplo, estou usando o Visual Studio 2019 16.7.2 e a versão dos modelos está atualmente em 3.1.8

1. Crie um projeto Blazor WASM. Tanto a opção ASP.NET Core Hosted quanto a opção Standalone funcionarão bem, mas terão configurações diferentes que serão discutidas posteriormente. O resto das opções não terá nenhum efeito. Neste exemplo, irei com o ASP.NET Core Hosted para explicar mais tarde sobre como ter controladores de API. Depois, crie também o projeto do lado do servidor Blazor.

   
   

---

1. A partir deste momento, a estrutura do seu projeto deve ser semelhante à primeira captura de tela abaixo.

   Exclua os itens destacados no projeto Blazor Server-Side mostrado na segunda captura de tela abaixo.

   
   

---

1. Referencie o projeto Blazor WASM ao projeto Blazor Server-Side.

   • ASP.NET Core Hosted - Referência ao projeto BlazorWasm.Client& BlazorWasm.Server.
   • Independente - referencie o projeto Blazor WASM único como está.

---

1. Vá para a Startupaula do projeto Blazor Server-Side. No ConfigureServices(), remova o WeatherForecastServicejunto com o BlazorServer.Datanamespace e, em seguida, adicione um serviço para HttpClientser usado pelos arquivos do razor do projeto Blazor WASM.

   services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(sp.GetRequiredService<NavigationManager>().BaseUri) });
   

   NOTA Na produção, não sugiro criar uma instância do HttpClient. Use o em IHttpClientFactoryvez disso. Visite este artigo Use IHttpClientFactory para implementar solicitações HTTP resilientes .

   Para projetos ASP.NET Core WASM

   No Configure(), mapeie os pontos de extremidade dos controladores. Isso usará os controladores no projeto X.Server/ BlazorWasm.Server.

   app.UseEndpoints(endpoints =>
   {
       endpoints.MapControllers();
       ...
   });
   

---

1. Vá para o _Host.cshtmlno / Páginas pasta do projeto Blazor do lado do servidor. Altere a referência de css/site.csspara, css/app.csspois os nomes de arquivo do arquivo css principal para o projeto Blazor WASM são diferentes.

   <link href="css/site.css" rel="stylesheet" /> <!-- Previous -->
   <link href="css/app.css" rel="stylesheet" /> <!-- New -->
   

---

1. Por último, altere o Appno typeatributo da componenttag e consulte o Apparquivo da classe razor no projeto Blazor WASM. Neste exemplo, a Appclasse é encontrada no BlazorWasm.Clientprojeto:

   <component type="typeof(App)" render-mode="ServerPrerendered" /> <!-- Previous -->
   <component type="typeof(BlazorWasm.Client.App)" render-mode="ServerPrerendered" /> <!-- New -->
   

---

É isso! Quando você executa o projeto do lado do servidor Blazor, ele deve carregar sem o texto "Carregando ...".

• Nenhuma mudança feita no (s) projeto (s) Blazor WASM e nenhuma duplicação de código significativa feita.
• As únicas coisas a mudar são as referências e o launchSettings.json& appsettings.json.
• Quanto às configurações Startuppara o Blazor Server-Side, você pode apenas criar métodos de extensão no (s) projeto (s) Blazor WASM e usá-los no projeto Blazor Server-Side.

NOTA: Sinceramente, acho que isso é ideal (?) Apenas para depuração durante o desenvolvimento, uma vez que os arquivos de barbear WASM não utilizarão totalmente a capacidade de um servidor Blazor verdadeiro porque ele ainda usaria solicitações HTTP.

---

Esperando por feedbacks abaixo! : DD