Iniciando e Configurando o Blazor

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 Standard

A primeira coisa que você vai observar num projeto Blazor é que ele é uma aplicação ASP.NET Core, que tem como target o .NET Standard. Dê uma olhada na Solution Explorer, como mostra a Figura 1, para você ver as dependências iniciais com as quais o Projeto é criado.

Figura 1: Estrutura do Projeto Blazor na Solution Explorer

Veja que o Projeto depende do .NET Standard, e dos pacotes Blazor do .NET Core Preview 7.

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.

Figura 2: Conteúdo do arquivo MyBlazorApp.csproj

Uma das grandes vantagens de um projeto Blazor é que, por ele ter como Target o .NET Standard, podemos referenciar outros assemblies que também usam o .NET Standard.

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.

Note que, apesar do Blazor ser um framework client-side, precisamos hospedar a aplicação num servidor. Assim como qualquer framework client-side, uma aplicação Blazor é hospedada no servidor como arquivos estáticos, que serão baixados pelo Browser.

Para entender como subir a aplicação Blazor no Host, veja o conteúdo do Program.cs na Figura 3. Note que o método CreateHostBuilder usa a classe BlazorWebAssemblyHost para iniciar um Host para o Blazor.

Figura 3: Program.cs

E é através do método UseBlazorStartup que indicamos a classe Startup, que será utilizada para configurar o Host. Veja na Figura 4.

Figura 4: Startup.cs

App.razor

É na classe Startup que configuramos o ponto de entrada da nossa aplicação. Veja na Figura 4, que na classe Startup temos o método Configure. E através do método AddComponent dizemos que o ponto de entrada da nossa aplicação Blazor é a 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 5 o conteúdo do arquivo App.razor.

Figura 5: App.razor

Veja que o arquivo possuí apenas uma tag chamada Router, e que aponta o atributo AppAssembly para o Assembly da nossa aplicação.

Esse Router serve para o Blazor saber onde deverá encontrar as Rotas da aplicação.

Também é definido no App.razor uma tag NotFoundContent, 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 deverão ser interpretadas pelo aplicativo.

Grande Abraço e até o próximo!

Um comentário em “Iniciando e Configurando o Blazor

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s