Aplicação C# Asp.Net MVC com vue.js/vuetify

Tive essa brilhante ideia de criar o novo projeto aqui da empresa usando como backend uma aplicação C# com Asp.Net MVC e como frontend vuefity. Que dor de cabeça, não no sentido de desenvolvimento, isso é simples, as duas tecnologias possuem uma boa documentação, encontrei o problema na integração das duas, queria que elas agissem com um único projeto, já que ambas são compiladas tive que pensar em uma maneira de automatizar o processo, porque toda vez que eu atualizava a interface estava precisando copiar os arquivos do diretório /dist do projeto vuetify para o diretório /Content/frontend do projeto C#, isso depois de umas quatro vezes encheu minha paciência.

Para resolver esse problema tive que modificar o projeto vuetify de forma que ele automaticamente exporta-se o diretório de distribuição para o projeto C#, para isso eu criei um script para ser executado no postbuild configurado no package.json. Vou deixar as configurações e o script abaixo.

Essa alteração configura para executar automaticamente o script postbuild.js quando executado o comando yarn build (no meu caso) ou npm build for executado.

O script postbuild.js possui duas funções, uma para limpar o diretório de destino e a outra para copiar os arquivos do diretório de distribuição. Define duas constantes para configurar o script, a work_dir que define o diretório atual de trabalho (não precisa ser alterada) e a dest_dir que define o diretório Content do projeto C#.

No projeto C# o arquivo HomeController.cs somente retorna a função File com o arquivo index.html.

Depois de aplicada esse solução trabalhar no projeto ficou muito mais fácil, por mais que seja simples fazer chamadas ajax da aplicação vuetify para o projeto C# no ambiente de testes eu sempre gostei de fazer testes com a versão compilada do projeto, principalmente para testar em dispositivos móveis.

pablo / 24 de agosto de 2020 / C#, Node.js, Vue.js / 0 Comments