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 (client-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ó relembrando que o Blazor ainda está em Preview, e para que você consiga criar aplicações Blazor no VSCode, precisará realizar os seguintes passos:

  1. Instale o VSCode (se você ainda não instalou). https://code.visualstudio.com/
  2. Instale o .NET Core 3.0 Preview 7 SDK (3.0.100-preview7-012821). Você encontra o Download desse Preview aqui: https://dotnet.microsoft.com/download/dotnet-core/3.0
  3. Instale os Templates do Blazor através do seguinte comando a ser executando no prompt de comando:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview7.19365.7

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 (client-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 (client-side). Sendo assim, para criar um novo projeto na pasta que você acabou de criar, execute o seguinte comando: dotnet new blazor.

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 http://localhost:51124. 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!

5 comentários em “Criando Projeto Blazor pelo VSCode

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