Gestion de la configuration via Grunt dans une application Angular

Je vais essayer de vous faire partager dans cet article mon retour d'expérience sur l'industrialisation d'une application web Angular. Cette application web a été mise en place via Yeoman et les utilitaires yo, bower et grunt (voir article sur le sujet).

Grunt permet de gérer le cycle de vie de l'application et de lancer la compilation, les tests, le packaging.... Par contre contrairement à un outil de build comme Maven nous n'avons pas la notion de filtering permettant de remplacer des variables liées à un environnement dans les fichiers de paramétrage d'une application.

Prenons deux exemples concrets

• Je ne souhaite pas avoir un serveur web par application Angular et je veux pouvoir dissocier plusieurs instances sur le même serveur ==> accéder à mon application via http://monserveurweb/app1 ou  http://monserveurweb/app2 
• La configuration de la partie serveur diffère suivant les environnements de développement, recette, production.

Tous les éléments de configuration peuvent être définis dans un fichier [project]/app/config.js 

var Config = {
    serveur: "localhost",
    port: "8080",
    context: "app-remoting",
    repolocal: "app1"
}

Au niveau de la définition de la configuration Angular de votre application  [project]/app/scripts/app.js, on reprend ces éléments pour 

• définir des propriétés dans le $rootScope pour pouvoir les retrouver ensuite dans les différents contrôleurs de l'application. 
• reprendre le répertoire d'installation de l'application dans la définition des routes 

angular.module('synApp', ['synAppServices'])
    .run(['$rootScope', function($rootScope) {
        $rootScope.remoteApp = "http://" + Config.serveur + ":"

           + Config.port  + "/" + Config.context + "/";
    }])
    .config(function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.when(Config.repolocal + '/',
            {templateUrl: Config.repolocal + '/views/main.html',

             controller: MainCtrl});
        //....
        $routeProvider.otherwise({redirectTo: Config.repolocal + '/'});
    }) ;

Déclinez ensuite ce fichier de configuration en fonction de vos environnements config_dev.js, config_rct.js, config_prd.js...  Ils peuvent être placés dans le répertoire [project]/app/scripts/config.

C'est au moment de la construction du livrable que l'on va paramétrer Grunt pour qu'il prenne en compte la bonne version de notre fichier de configuration. Grunt se paramètre via le fichier Gruntfile.js au sein de la fonction

module.exports = function(grunt) { 
  // Do grunt-related things in here 
};

Dans cette fonction plusieurs blocs sont définis pour configurer

• le projet : grunt.initConfig({ });
• le chargement des plugins grunt.loadNpmTasks();
• la définition des tâches grunt.registerTask();

Nous allons définir une nouvelle tâche deploy qui étendra la phase de construction build et qui prendra un paramètre, l'environnement. Nous créons également une sous tâche verifyParam qui permettra de contrôler que l'environnement est bien saisi.

grunt.registerTask('deploy', [
   'verifyParam',
   'build',
   'copy:deploy'
]);

grunt.registerTask('verifyParam', 'Verification des params lies a environnement', function(){
    if(!grunt.option('env')){
          grunt.fail.warn("Le parametre --env est obligatoire")
    }
}) ;

Dans la définition des étapes du projet nous allons étendre la configuration de la tâche nommée copy et ajouter une partie spécifique à la tâche deploy (copy:deploy). Il existe déjà une personnalisation de la tâche pour définir les fichiers à copier dans le répertoire dist

copy: {
      dist: {
        //........................
      },
      deploy: {
          files: [
             {
                flatten: true,
                src: [ '<%= yeoman.app  %>/scripts/config/config_' 

                          + grunt.option('env') + '.js'],
                dest: '<%= yeoman.dist %>/config.js',
                filter: 'isFile'
            }
          ]
      }
    }

Voila il ne vous reste plus qu'à lancer la commande ci dessous pour packager votre application correspondant à votre environnement de recette.
grunt deploy --env=rct