Este artigo visa demonstrar para quem está iniciando sua carreira em programação Web, um passo a passo de como realizar a configuração de projetos Asp.Net Core juntamente com o framework VueJS no Visual Studio Code.

Todos sabemos que nos últimos anos a complexidade das aplicações Web aumentou consideravelmente para atender às altas exigências de mercado, principalmente em relação à questões de performance, adaptações para dispositivos móveis, requisitos de segurança e outras características e requisitos.

E para simplificar este processo surgiram nos últimos 10 anos uma infinidade de frameworks baseados em Javascript, que possuem centenas (até mesmo milhares) de recursos implementados que podem ser utilizados livremente pela comunidade, sem precisarmos ficar “reinventando a roda”.

Dentre as bibliotecas mais famosas e utilizadas no mercado, podemos citar o Angular, VueJS e o React que contribuíram fortemente para que tivéssemos uma Web mais leve, rápida e segura.

Como sou naturalmente um desenvolvedor back-end, estou procurando me adaptar a estas bibliotecas, desenvolvendo projetos do “zero” e estudando os prós e contras de cada uma delas. É uma tarefa meio “ingrata” para um desenvolvedor back-end testar e aprender com profundidade estes três principais frameworks, mas estamos nesta vida pra aprender, não é mesmo? Nada que muitas horas de estudo e muitas xícaras de café não possam resolver, juntamente com uma galera bacana da comunidade que disponibiliza vários tutoriais gratuitamente.

Confesso que “apanhei” um pouco ao utilizar pela primeira vez esses frameworks, mas a curva de aprendizado, após as dificuldades iniciais, tem sido razoavelmente rápida, pois mesmo sendo um programador back-end, estou muito habituado a Javascript.

Mas depois dessa “enrolação” inicial típica de um artigo técnico, vamos ao que interessa?

Configuração do projeto VueJS no Visual Studio Code

 

Antes de mais nada é preciso ter o Visual Studio Code instalado na sua máquina. E o download da ferramenta pode ser feito aqui. Como pode ser visto na imagem abaixo, mesmo sendo uma ferramenta da Microsoft ela não está restrita ao ambiente Windows, pois é multi-platoforma, podendo ser utilizado também no Linux e MacOS.

Estou bastante acostumado com o Visual Studio tradicional para Windows, então estou em processo de adaptação ao Visual Studio Code, que foi feito para se trabalhar mais por linha de comando, o que, convenhamos, é muito mais produtivo quando a gente se acostuma de fato.

Após instalação do Visual Studio Code, é necessário verificar se você tem o .NET Core instalado na sua máquina e o Node, necessário para baixar pacotes via NPM.

Você pode verificar se já estão instalados da seguinte forma:

1. Abrir o Visual Studio Code
2. Abrir o terminal em “View” > Integrated Terminal
3. Verificar se o .NET Core está instalado digitando o comando “dotnet — version” no terminal e pressionar “Enter”, conforme na imagem abaixo

Caso não possua instalado, basta baixar no site da Microsoft a versão correspondente ao seu sistema operacional e realizar a instalação.

4. Após isso, é necessário verificar se o Node já está instalado, digitando o comando “npm version” no terminal e pressionando “Enter”. Caso esteja, aparecerá a versão do Node instalado.

Caso não possua o Node instalado, basta ir no no site oficial do Node, fazer download da versão compatível com o seu sistema operacional e realizar a instalação.

5. Para criar a sua aplicação Asp.Net você pode executar o comando “dotnet new” no terminal e escolher um dos templates SPA (Single Page Application) disponíveis (Angular, React, etc) ou realizar clone ou download do template Asp.Net Core com VueJs disponibilizado pela comunidade neste link:

• https://github.com/MarkPieszak/aspnetcore-Vue-starter

A utilização de templates facilita muito o nosso dia a dia, pois não precisamos ficar criando a estrutura de pastas e arquivos padrão para o tipo específico do projeto que iremos desenvolver.

6. Após a obtenção dos arquivos do template, basta renomear e abrir a pasta no Visual Studio, tomando como ponto de partida a pasta “content” como raiz do projeto, considerando esta estrutura de template.

Para abrir o projeto clique em “File” > “Open Folder” e selecione a pasta “content”. A estrutura dos arquivos do projeto aparecerão no Visual Studio Code da seguinte forma:

Como pode ser visto na imagem, a estrutura contém as pastas padrão de um projeto Asp.Net MVC (Models, Views, Controllers) e também a pasta ClientApp, que contém a estrutura padrão de pastas e arquivos de um projeto que utiliza a biblioteca VueJS, conforme na imagem abaixo:

7. Após isso, é necessário executar o comando “npm install” no terminal para que sejam instalados os pacotes e dependências referenciados nos arquivos de configuração do template.

8. Por último, é importante configurar a variável de ambiente que indicará que estamos em um ambiente de desenvolvimento, caso queiramos executar o projeto pelo próprio Visual Studio Code sem maiores problemas com arquivos estáticos e outras coisas, executando o seguinte comando no terminal:

$Env:ASPNETCORE_ENVIRONMENT = “Development”

Ou:

set ASPNETCORE_ENVIRONMENT = “Development”

Caso você esteja utilizando Linux ou MacOS, o comando é este aqui:

export ASPNETCORE_ENVIRONMENT=Development

Sem essa configuração tive muitos problemas para fazer funcionar a aplicação no meu ambiente. Ao gerar “publish” da aplicação para um servidor IIS de produção ou homologação, talvez sejam necessárias algumas configurações para que não ocorram vários erros “404 Not Found” de arquivos do seu projeto, mas isso já é assunto para um outro artigo.

Por fim, é só executar o comando “dotnet run” para compilar o projeto e poder acessá-lo no navegador e verificar no terminal qual URL foi gerada. Normalmente é a padrão: http://localhost:5000

Como estamos todos sempre em fase de constante aprendizado, sugestões de melhoria no artigo ou contribuições são sempre muito bem-vindos.

Obrigado por ter lido este artigo até o final. Até mais!