Nesse artigo vamos ver como uma aplicação Blazor é Iniciada e Configurada em um Servidor. Para isso partiremos de um projeto já criado. Se você não sabe como criar um projeto Blazor no Visual Studio, dê uma olhada no post anterior.
.NET Core
A primeira coisa que você vai observar num projeto Blazor (server-side) é que ele é uma aplicação ASP.NET Core. Dê uma olhada na Solution Explorer, como mostra a Figura 1, para você ver as dependências iniciais com as quais o Projeto é criado.
Veja que o Projeto depende do .NET Core e do ASP.NET Core. Uma outra forma de você conferir essas dependências é vendo o conteúdo do arquivo do projeto, com extensão .csproj. Veja a Figura 2.
Uma das grandes vantagens de um projeto Blazor é que, por ele ser uma aplicação .NET Core, podemos referenciar outros assemblies escritos na plataforma.
Isso significa que você pode referenciar no Blazor, uma biblioteca de classes que também é usada pela sua API no Backend. Imagine o nível de reutilização que podemos alcançar com isso.
Program.cs e Startup.cs
Assim como qualquer aplicação ASP.NET Core, temos uma classe Program.cs que é o ponto de início da aplicação, e onde levantamos a aplicação no Servidor Web. Lembre-se que podemos usar o IIS ou o Kestrel para hospedar uma aplicação ASP.NET Core.
Uma aplicação Blazor server-side é como qualquer aplicação ASP.NET, e possuí um processo de inicialização bem familiar, veja na Figura 3.
O Program.cs inicia um WebHost através da classe Startup.cs. Nessa classe temos os clássicos métodos de configuração de uma aplicação ASP.NET, o ConfigureServices e o Configure. Confira o código desses dois métodos nas Figuras 4 e 5.
No método ConfigureServices, veja que são necessários adicionar dois services para levantar uma aplicação Blazor server-side: o RazorPages e o ServerSideBlazor.
E já no método Configure, veja que precisamos chamar o método MapBlazorHub nos endpoints. Lembre-se que o Blazor server-side depende do SignalR, e esse é o método que configura o Hub do SignalR para o Blazor.
Além disso, ainda no método Configure, estamos configurando a página _Host como Fallback da aplicação.
_Host.cshtml
A página _Host.cshtml será o ponto de entrada da nossa aplicação, e ela funciona basicamente como um index.html. Você encontra o _Host.cshtml dentro da pasta Pages.
Não vou abordar todos os detalhes do _Host.cshtml aqui nesse artigo, mas o importante é notar que nesse arquivo temos uma tag app, como você pode verificar na Figura 6.
Essa tag app define o local onde a nossa aplicação Blazor será renderizada. Veja que nela temos a configuração de um componente, que aponta para uma classe dotnet chamada App.
App.razor
É no _Host.cshtml que configuramos o ponto de entrada da nossa aplicação. É na tag component que dizemos ao Blazor que a aplicação deverá ser iniciada através de uma classe chamada App.
Você vai notar que no projeto não existe um arquivo chamado App.cs. O que temos é um arquivo App.razor. A extensão .razor é utilizada nos arquivos que usamos para definir os componentes no Blazor.
Nesse caso o arquivo App.razor será compilado e no final se tornará uma classe chamada App. Veremos isso em mais detalhes quando formos explorar mais a fundo os componentes Blazor.
Veja na Figura 7 o conteúdo do arquivo App.razor.
Veja que o arquivo possuí uma tag chamada Router, e que aponta o atributo AppAssembly para o Assembly do próprio projeto.
Esse Router serve para o Blazor saber onde deverá encontrar as Rotas da aplicação.
Dentro do Router temos uma tag chamada Found, onde configuramos qual será o componente de Layout para todas as rotas que forem encontradas corretamente. Veremos o que são os Layouts e como utilizá-los em um artigo futuro.
Também é definido no App.razor uma tag NotFound, onde podemos especificar o conteúdo que a aplicação irá apresentar caso o usuário acesse uma rota não configurada.
Como qualquer framework baseado em componentes, trabalhamos com o conceito de Rotas, que define como as requisições do browser serão interpretadas pelo aplicativo. No próximo artigo iremos explorar mais a fundo o sistema de Rotas do Blazor.
Grande Abraço e até o próximo!
Blaze of Code 