Criando Projeto Blazor pelo VSCode

Atendendo à pedidos, nesse artigo vou mostrar como criar uma nova aplicação pelo Visual Studio Code, usando o Template Blazor (server-side).

Se você ainda não sabe o que é Blazor, dê uma olhada neste artigo. E se quiser ver como criar um projeto Blazor pelo Visual Studio 2019, veja esse outro artigo aqui.

Visual Studio Code

O Visual Studio Code ou VSCode é um editor de código da Microsoft. O VSCode nos oferece as  funcionalidades mais básicas de edição de aplicações .NET Core.

O VSCode é inteiramente gratuito e muito mais leve que o Visual Studio. Ele pode ser utilizado não só no Windows, mas em Linux e macOS. Instale e saiba mais sobre o VS Code através desse link aqui: https://code.visualstudio.com/

Pré-requisitos

Só lembrando que o Blazor client-side ainda está em Preview, e portanto, vamos usar o modo server-side no exemplo desse artigo. O Ambiente que você precisa ter instalado é o seguinte:

1. Instale o VSCode (se você ainda não instalou).
2. Instale o .NET Core 3.1 SDK

Criando o Projeto

Crie uma pasta no seu computador, onde você quer criar o seu projeto Blazor. Em seguida abra um prompt de comando e navegue até a pasta criada. Digite dotnet new e dê um Enter, e veja na Figura 1 os tipos de projetos .net core que podemos criar via linha de comando.

Figura 1: Identificando template para criar Projeto Blazor (server-side)

Como você pode ver, já temos vários templates de projetos que podemos utilizar pelo dotnet cli (comand line interface).

O template que nos interessa é o do Blazor Server App. Sendo assim, para criar um projeto na pasta atual, execute o seguinte comando: dotnet new blazorserver.

Se tudo correr bem você receberá a mensagem Restore succeeded, indicando que o projeto foi criado e seus pacotes nuget restaurados. Veja na Figura 2 o resultado do comando e o conteúdo do projeto criado.

Figura 2: Projeto criado com o template Blazor

Abrindo o Projeto no VS Code

Para abrir o projeto no VS Code, basta executar o seguinte comando: code . (Figura 3).

Figura 3: Abrindo o Projeto no VSCode

Se você conhece o VSCode, sabe que do lado esquerdo temos a janela Explorer, onde você tem acesso a todo o conteúdo da pasta do projeto criado. Veja na Figura 4.

Figura 4: Projeto Blazor aberto no VSCode

Assim como no Visual Studio, você pode editar qualquer arquivo do projeto pelo VSCode, sem nenhuma restrição. O projeto que criamos pelo prompt de comando também pode ser aberto pelo Visual Studio.

Executando o App

Não é exatamente o VSCode que executa o projeto, e sim o próprio dotnet cli. Tanto que você pode executar o projeto pelo prompt de comando, se preferir.

Mas o VSCode também possuí um terminal de linha de comando integrado, que podemos utilizar para, entre outras coisas, executar o projeto.

Para abrir o Terminal integrado do VSCode, como mostra a Figura 5, vá ao menu View, e clique na opção Terminal.

Figura 5: Abrindo o Terminal Integrado do VSCode

O Terminal irá aparecer na parte de baixo do VSCode, e nele podemos executar qualquer comando do dotnet. Vamos executar o comando para rodar o projeto, que é: dotnet run. Veja na Figura 6.

Figura 6: Executando projeto com dotnet run

Veja que o projeto é executado e está respondendo na url https://localhost:5001. Abra o seu browser e navegue nessa URL. Veja o resultado na Figura 7.

Figura 7: App Blazor rodando no Browser

Como você pode conferir a aplicação Blazor está funcionando corretamente, exatamente como se tivesse sido criada pelo Visual Studio.

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

Publicidade