Chargement dynamique d’environnements avec AngularJs

Afin de pouvoir automatiser le passage de l’environnement de développement à l’environnent déployé. J’ai utilisé quelques astuces afin de gagner du temps lors de la production de version.

La solution consiste à générer un fichier env.js contenant les variables de déploiement. C’est Grunt qui fera le travail de configuration.

Installation de grunt-ng-constant

npm install --save-dev

Ecriture des configurations

Dans un répertoire config, on placera le template. Ce template sera utilisé pour générer le fichier de configuration. Dans ce script on stockera les différentes variables dans comme variable d’environnements (window.__env).

/**** DO NOT MODIFY DIRECLTY - THIS FILE IS AUTO GENERATED ***/ 
'use strict'; 


(function (window) {
  window.__env = window.__env || {};

  {% constants.forEach(function (constant){ %}
  window.__env.{%- constant.name %}={%= constant.value %};
  {% }) %}

}(this));

Et les fichiers de configurations…

Pour le développement :

{
  "APIEndpoint": {
    "protocol": null,
    "host": null,
    "port": null
  }
}

Pour la production :

{
  "APIEndpoint": {
    "protocol": "http",
    "host": "api.host.fr",
    "port": 80
  }
}

Chargement de la configuration

Maintenant nous allons configurer notre module. En chargeant les variables d’environnement (window.__env) .

/**
 * Configuration for module.
 */
'use strict';

angular.module('MyModule')
   .constant('Config', {
    API: {
      useMocks: true,
      fakeDelay: 2000,
      protocol: window.__env.APIEndpoint.protocol || window.location.protocol
        .split(':')[0],
      host: window.__env.APIEndpoint.host || window.location.hostname,
      //port: String(window.location.port || 80),
      port: window.__env.APIEndpoint.port || 3000
    }
  });

On n’oubliera pas d’inclure le fichier env.js à nos scripts.

Script de production

On enregistre une tache ngConstant chargée de générer le fichier env.js

// Automatically load required Grunt tasks
  require('jit-grunt')(grunt, {
    useminPrepare: 'grunt-usemin',
    ngtemplates: 'grunt-angular-templates',
    cdnify: 'grunt-google-cdn',
    ngconstant: 'grunt-ng-constant'
  });

/* ... */ 

 ngconstant: {
      options: {
        // Name of our Angular module with configuration data.
        name: 'env',
        // Place where we need to create new file with our config module.
        dest: '<%= yeoman.app %>/scripts/env.js',
        // This object will be merged to all config files.
        constants: 'config/default.json',
        // Template to create config module.
        template: grunt.file.read('config/env-template.ejs')
      },
      // Environments
      development: {
        constants: 'config/development.json'
      },
      production: {
        constants: 'config/production.json'
      }
    }

/* ... */

  grunt.registerTask('build', function(target) {
    var ngconstantTask = 'ngconstant:development';

    if (target === 'production') {
      ngconstantTask = 'ngconstant:production';
    }

    grunt.task.run([
      ngconstantTask,
      'clean:dist',
      'wiredep',
      'useminPrepare',
      'concurrent:dist',
      'postcss',
      'ngtemplates',
      'concat',
      'ngAnnotate',
      'copy:dist',
      'cdnify',
      'cssmin',
      'uglify',
      'filerev',
      'usemin',
      'htmlmin'
    ]);
  });

  grunt.registerTask('default', [
    'newer:jshint',
    'newer:jscs',
    'test',
    'build'
  ]);

Sources :

http://www.jvandemo.com/how-to-configure-your-angularjs-application-using-environment-variables/

http://cayugasoft.com/configuring-multiple-environments-angular-js-using-grunt-ng-constant/