Categorias
Tecnologia

Usando grunt-ng-constant para mudar o endereço da API no build de um app AngularJS

Desenvolvendo pela primeira vez um webapp que consome uma API com AngularJS (e usando o Yeoman e o Grunt para fazer build e para autorefresh durante o desenvolvimento) me deparei com uma questão: Como faria o build dos arquivos para diferentes ambientes? Atualmente este projeto possui os ambientes local (dev), homologação e produção, cada um com seu respectivo endereço de API.

Para atingir esse objetivo, e como essa era minha primeira vez com Angular e com Grunt, pesquisei muito e achei uma solução que funcionou bem.

Usango o pacote grunt-ng-constant eu consigo manter uma constante com a URL de cada ambiente separadamente. Dependendo do comando de build que eu executar no Grunt, terei um resultado diferente nessa constante.

O primeiro passo é instalar o pacote citado. Lembrando que estou utilizando o NPM como gerenciador de pacotes.

npm install grunt-ng-constant --save-dev

Depois temos que configurá-lo no nosso arquivo Gruntfile.js. Aqui segue um exemplo comentado:

[gist id=”3fc6625cd09f3a4c280cf7cb7c662f45″ file=”Gruntfile.js”]

Com o Grunt configurado, podemos passar para nosso AngularJS agora.

Dentro do arquivo app.js injetamos o parâmetro ENV no método run e passamos a constante apiBaseURL para o $rootScope, fazendo com que ela fique disponível por todo o app.

[gist id=”3fc6625cd09f3a4c280cf7cb7c662f45″ file=”app.js”]

Agora você pode usar um service que faça as chamadas de API concatenando seu apiBaseUrl em todos os requests. Como no exemplo abaixo.

[gist id=”3fc6625cd09f3a4c280cf7cb7c662f45″ file=”api.js”]

Para finalizar, fazemos o build com o seguinte comando:

grunt build:homolog

Podendo subistituir o homolog por develop ou prod (ou deixar sem nenhum, que pegará o padrão prod que definimos no Grunfile.js) e testar seus arquivos no diretório dist. Lembrando que o arquivo config.js será gerado automaticamente durante o build.

Tive uma boa batalha com o Grunt no começo, mas depois que aprendemos como funciona ele se torna um aliado incrível para o desenvolvimento.

Espero que tenha gostado dessa postagem, se tiver alguma dúvida ou comentário deixe abaixo.

Por Marcus Beck

Sou quadrinista, desenvolvedor de software, marido da Lu e pai da Laura.

Ver arquivo

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *