Gulp + Browserify configuration based on environment

Nowadays when we speak about Web Development we are actually speaking about a set of tools and technologies which when combined allow us to automate development and deployment processes and Gulp and Browserify are without doubt part of those tools.

All applications have configurations which represent one of the most import of any application and usually we have several environments where our applications run (development, release, production, etc) and for each environment usually we need a specific configuration.

Today we are going to see how can we use a configuration based on the environment. To do that we are going to use the following tools:

  • Gulp
  • Browerify (gulp-browserify)
  • Envify

What is Envify?

The official description is “Selectively replace Node-style environment variables with plain strings”. In other words is a module which can  be used as Browserify transform to provide environment variables under process.env object.

Project structure

Lets create a simple project structure just with a main app.js file and a config folder where we are going to keep all configurations.

config
  dev.config.js
  prod.config.js
  index.js
app.js

config/dev.config.js

module.exports = {
  debug: true,
  api: {
    protocol: 'http',
    domain: 'localhost',
    path: 'api',
    port: '8080'
  }
};

config/prod.config.js

module.exports = {
  debug: true,
  api: {
    protocol: 'https',
    domain: 'some-production-server',
    path: 'api',
    port: '443'
  }
};

config/index.js

if( process.env.NODE_ENV === 'production' ) {
  module.exports = require( './prod.config' );
} 
else {
  module.exports = require( './dev.config' );
}

app.js

var config = require( './config' )
var api = config.api || {};

// Printing the link to our API
console.log( '%s://%s:%s/%s', api.protocol, api.domain, api.port, api.path );

Setup Gulp tasks

var gulp = require( 'gulp' );
var browserify = require( 'gulp-browserify' );
var envify = require( 'envify/custom' );

gulp.task( 'build-dev', function() {
  gulp.src( 'app.js' )
    .pipe(browserify( {
      insertGlobals: true,
      transform: [
        envify( {
          NODE_ENV: 'development'
        } )
      ]
    } ) )
    .pipe( gulp.dest('./build') )
} );

gulp.task( 'build-prod', function() {
  gulp.src( 'app.js' )
    .pipe(browserify( {
      insertGlobals: true,
      transform: [
        envify( {
          NODE_ENV: 'production'
        } )
      ]
    } ) )
    .pipe( gulp.dest('./build') )
} );

This gulpfile.js has two tasks build-dev and build-prod  to build the development and production versions of our project respectively. Both of them are  creating the build/app.js file on with development configuration and other in production one.

Installing dependencies

npm install gulp gulp-browserify envify

Building project

gulp build-dev
gulp build-prod

Note: if you don’t have gulp-cli install in you machine please run: npm install -g gulp-cli

 Conclusion

Of course there are several ways to archive this result especially using Gulp as base built tool but following this approach it is very easy to have an application with configurations per environment. Although the presented example is not taking into account several aspects you can use it some imagination to create great stuff.