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/
