VueJS: Configurando Build no Azure Devops

Para uma aplicação VueJS, configurar um pipeline de build no Azure DevOps pode parecer fora de moda, mas não quando você ama automatizar tudo pela frente 🙂

VueJS: Configurando Build no Azure Devops

Além da diversão de criar artigos e ajudar a comunidade de desenvolvedores, meu blog é quase uma documentação pública de processos e código fonte.

Esse artigo é uma cópia descarada de Angular: Configurando Build no Azure Devops, então se você encontrar algum texto idêntico, é porque copiei mesmo 🙂

O tema de hoje é sobre configurar um pipeline de build para uma aplicação VueJS no Azure DevOps da Microsoft.

VueJS: Configurando Build no Azure Devops


# Código fonte VueJS

O foco aqui não é o código da aplicação VueJS, e sim o build no Azure DevOps.

Antes de mais nada, queria agradecer ao Lucas Juliano por fornecer o código fonte VueJS, que será usado como base para configurar o pipeline de build.

O código fonte será disponibilizado em breve no github.

VueJS: Configurando Build no Azure Devops 1

Quando desenvolvemos uma aplicação VueJS, utilizamos o TypeScript para isso, e conforme vamos salvando os arquivos, automaticamente o TypeScript é convertido em Javascript.

Se a aplicação tiver muitos componentes, cada um deles é gerado um arquivo Javascript, e isso não estou falando dos arquivos de rotas, módulos, diretivas e outros arquivos TypeScript.

A ideia é quando a aplicação estiver em produção, todos esses componentes gerados em Javascript, estejam em um arquivo só (ou um arquivo por módulo), e totalmente minificados.

Existem vários processos hoje em dia para fazer a concatenação e minificação de arquivos Javascript. Se você é um desenvolvedor ASP.NET, deve conhecer o Bundles, que faz justamente isso.

Além de minificar os arquivos Javascript, esse processo também será realizado para os arquivos CSS e HTML! 🙂


# O Build no Azure DevOps

Eu abandonei a palavra Tutorial para esse artigo sobre o build de VueJS, mas escrevi alguns a respeito do Azure DevOps e seus pipelines de automação, são eles:

Tutorial: Controle seu Código Fonte de Graça com GIT e Azure DevOps
Tutorial: Criando um Pacote NuGet e Publicando no Azure DevOps
Tutorial: Continuous Integration de Pacote NuGet no Azure DevOps

Quando recebi o código fonte do Lucas Juliano, criei um projeto FSL.VueJSBuild no Azure DevOps usando GIT.

AVueJS: Configurando Build no Azure Devops

Configurei o build VueJS diretamente na branch master, porém, o correto é criar uma branch específica para isso e usar o Pull Request para fazer entrega.

No artigo Tutorial: Continuous Integration de Pacote NuGet no Azure DevOps demonstro como fazer isso.

No menu Pipelines / Build, clique no botão New pipeline:

VueJS: Configurando Build no Azure Devops

Clique em Use the classic editor:

VueJS: Configurando Build no Azure Devops

Escolha Azure Repos Git e clique em Continue:

VueJS: Configurando Build no Azure Devops

Selecione o template Empty job:

VueJS: Configurando Build no Azure Devops

Na tela do build, é onde adicionaremos todas as tarefas para fazer a compiliação da aplicação VueJS.

Em Agent job 1, clique no botão +, na busca digite Node.js tool installer e clique no botão Add:

VueJS: Configurando Build no Azure Devops

VueJS: Configurando Build no Azure Devops

Faça o mesmo só que procure por Nuget tool installer:

VueJS: Configurando Build no Azure Devops

Agora procure por npm para o comando npm install:

VueJS: Configurando Build no Azure Devops

VueJS: Configurando Build no Azure Devops

Em seguida adicione mais uma npm para o comando npm build VueJS:

VueJS: Configurando Build no Azure Devops

VueJS: Configurando Build no Azure Devops

O comando RUN BUILD, quer dizer BUILD é o nome de uma task dentro do arquivo package.JSON.

vue-cli-service build

Adicione agora a tarefa Archive files para compactar os arquivos que serão minificados:

VueJS: Configurando Build no Azure Devops

VueJS: Configurando Build no Azure Devops

Por fim, adiciona a tarefa Publish build artifacts, que guardará os arquivos minificados para serem publicados:

VueJS: Configurando Build no Azure Devops

Depois basta clicar no botão superior Save and Queue para fazer uma nova compilação.

Ao final, todas as tarefas aparecerão concluídas assim:

VueJS: Configurando Build no Azure Devops

E no menu superior Artifacts, é possível baixar o arquivo vue_bundles.zip, resultado do build com os arquivos minificados.

VueJS: Configurando Build no Azure Devops


# Continuous Integration

Para fazer a automação do build, ou seja, iniciar o build toda vez que uma determinada branch for atualizada, basta fazer a seguinte configuração:

VueJS: Configurando Build no Azure Devops

Em Triggers, habilite a opção Enable continous integration e escolha a branch correspondente.

Nesse caso, esse build VueJS será iniciado quando a branch master for atualizada.


# Considerações finais

Esse nosso processo de build VueJS está sendo utilizado à dois anos e o único erro que encontramos foi na mudança da versão do NodeJS.

Antigamente não tinhamos a task que forçava a versão do NodeJS, então, algo mudou no Azure DevOps fazendo com que nossos builds parassem de funcionar, por isso a necessidade de forçar uma determinada versão.

Obs.: artigo publicado e não revisado.

E aí, você tem um build VueJS diferente desse?

Compartilha aí com a gente!

Obrigado e até a próxima 🙂

Sobre o Autor:
Trabalha como arquiteto de soluções e desenvolvedor, tem mais de 18 anos de experiência em desenvolvimento de software em diversas plataformas sendo mais de 16 anos somente para o mercado de seguros.