Gulp Tutorial - Part 15 Transforming Environment Variables

http://robertdunaway.github.io

http://mashupjs.github.io

The Mashup is a learning tool that serves as a seed project for line-of-business applications. It’s goal is a shortened learning curve for building modern business applications and the reduction of technical debt.

This tutorial and more can be found in

Gulp - Quick guide to getting up and running today

Gulp Tutorial - Part 15

Transforming Environment Variables

Most applications are expected to function in multiple environments. When coding you expect the application to function in the local environment. When you deploy to the test environment you expect it to function there and the same for production.

We will use Gulp to set an Angular constant used to build the connection URI to each WebApi.

Create a json file representing each possible environment in the “src” folder.

env.config.localdev.json

Create this file with the following content.

{ 
    "myFirstApi":  "http://localhost:52335",
    "mySecondApi":  "http://localhost:52336"
}

env.config.dev.json

Create this file with the following content.

{ 
    "myFirstApi":  "http://devFirstApi",
    "mySecondApi":  "http://devSecondApi"
}

env.config.stage.json

Create this file with the following content.

{ 
    "myFirstApi":  "http://stageFirstApi",
    "mySecondApi":  "http://stageSecondApi"
}

env.config.prod.json

Create this file with the following content.

{ 
    "myFirstApi":  "http://prodFirstApi",
    "mySecondApi":  "http://prodSecondApi"
}

Each file contains the connection string for each WebApi used.

Create an Angular constant in the app.js file

// ---------------------------------------------------------------------------------------------
// Application Constants
// ---------------------------------------------------------------------------------------------
mashupApp.constant('apiUrl', { 'myFirstApi': '@@myFirstApi' },
                             { 'mySecondApi': '@@mySecondApi' });

From the command-line install

npm install gulp-replace-task --save-dev
npm install yargs --save-dev
npm install fs --save-dev

Add the module to the Gulp file

    , replace               = require('gulp-replace-task')
    , args                  = require('yargs').argv
    , fs                    = require('fs')

Add the task to the Gulp file

This will be different for your environment. You might have a different path to your configuration files and WebApi names.

gulp.task(' setEnv', function () {
    // Get the environment from the command line
    var env = args.env || 'localdev';

    // Read the settings from the right file
    var filename = 'env.config.' + env + '.json';
    var settings = JSON.parse(fs.readFileSync('dist/' + filename, 'utf8'));

    // Replace each placeholder with the correct value for the variable.  
    gulp.src('src/app.js')
      .pipe(replace({
          patterns: [
            {
                match: 'myFirstApi',
                replacement: settings. myFirstApi
            },
            {
                match: 'mySecondApi',
                replacement: settings. mySecondApi
            },
          ]
      }))
      .pipe(gulp.dest('dist/./'));
});

Add the new task to the default task

gulp.task('default', function () {
    runSequence('annotate', 'clean-dist', 'copy',
                ['coreservices', 'routeconfig', 'libs', 'minifyhtml', 'minifyimage'
                    , 'grunt-merge-json:menu', 'jshint', 'tscompile', 'tslint', 'sass'
                    , 'setEnv']
                , ['uglifyalljs', 'minifycss']
                , 'watch');
});

You can execute the task individually
The first option uses the prod configuration. The second uses the default which happens to be the localdev configuration.

To change the environment manually execute the one of the following commands. The first executes the setEnv task and passes in the –env parameter with the value of prod. The env.config.prod.json file will be used.

Gulp setEnv --env prod
Or
Gulp setEnv

Before the app.js is changed by the setEnv task.

// ---------------------------------------------------------------------------------------------
// Application Constants
// ---------------------------------------------------------------------------------------------
mashupApp.constant('apiUrl', { 'myFirstApi': '@@myFirstApi' },
                             { 'mySecondApi': '@@mySecondApi' });

 
Before the app.js is changed by the setEnv task.
// ---------------------------------------------------------------------------------------------
// Application Constants
// ---------------------------------------------------------------------------------------------
mashupApp.constant('apiUrl', { 'myFirstApi': 'http://localhost:52335' },
                             { 'mySecondApi': 'http://localhost:52336' });

Add to the default task

I’ve added the setEnv to the early part of the default configure so it executes before the minification task is run.

gulp.task('default', function () {
    runSequence('annotate', 'clean-dist', 'copy',
                ['coreservices', 'routeconfig', 'libs', 'minifyhtml', 'minifyimage'
                    , 'grunt-merge-json:menu', 'jshint', 'tscompile', 'tslint', 'sass'
                    , 'setEnv']
                , ['uglifyalljs', 'minifycss']
                , 'watch');
});

Now I can simply type Gulp and all my tasks, including the Replace task will run.

gulp

If you want to create a fresh distribution folder for production you could type

gulp --env prod

When no –env parameter is provided the default parameter value is used as described in code. In this case the default value is “localdev”.

Source code for this tutorial

Start the tutorial using this code base:

https://github.com/MashupJS/gulp-tutorial

A completed tutorial can be found here:

https://github.com/MashupJS/gulp-tutorial-end-result

This tutorial and more can be found in

Gulp - Quick guide to getting up and running today