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:
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.
Agora você pode usar um service que faça as chamadas de API concatenando seu apiBaseUrl em todos os requests. Como no exemplo abaixo.
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.
