How to configure separate development and production environments in AngularJS

We’ve seen ourselves write this type of code in all sorts of server scripting languages:

if ( env == “development” ) {
//do development stuff
}
else if ( env == “production” ) {
// do production stuff
}

What if we want to perform same kind of tasks in front-end? May be to serve production app through the dist folder, and staging app from the src folder. Or may be to use some environment variables from the back-end. Or many more use-cases that help make the development easier and faster, and production optimised.

Another ng-tool for angularJS: ng-constant

This is possible in AngularJS by using Grunt. Grunt is an awesome tool that helps automate several tasks which may otherwise consume a lot of time if performed manually.

The idea is to start your AngularJS application using grunt, and creating a grunt task that creates angular constants. These angular constants will define whether the environment is production or development . Here is a step-by-step guide to do it:

  1. Setup grunt for your project. Refer the original grunt Get Started Guide. It’s very well explained even for a noob.
  2. Setup ng-constant for your project. It is a grunt tool which helps you auto-create angular constant files. Its github repo is self-explanatory.
  3. After setting up ng-constant , register two separate grunt tasks in your Gruntfile.js : One for development, another for production. If you still don’t know how to do that or where your Gruntfile.js is, then you haven’t read enough about grunt, please do so. The tasks should look something like this:
grunt.registerTask('dev', [
'ngconstant:development'
]);
grunt.registerTask('prod', [
'ngconstant:production'
]);

4. In the code above, ngconstant:development and ngconstant:production are grunt configurations. Create those configurations with the help of ng-constant readme. They should look something like this:

grunt.initConfig({
ngconstant: {
// Options for all targets
options: {
space: ' ',
wrap: '\'use strict\';\n\n {\%= __ngModule %}',
name: 'constants'
},
// Environment targets
development: {
options: {
dest: './path/to/new/constants/file.js'
},
constants: {
ENV: {
name: 'dev'
}
}
},
production: {
options: {
dest: './path/to/new/constants/file.js'
},
constants: {
ENV: {
name: 'prod'
}
}
}
}
});

5. That’s all. Now serve your angular application with grunt dev or grunt prod depending upon the environment you want to run it in. The angular constants can be easily injected in it’s controllers, directives, services, etc. For example in this custom angular directive:

angular.module('myApp')
.directive('myDirective', function (ENV) {
var templateUrl;
if ('dev' === ENV.name) {
templateUrl = '/path/to/view/in/dev/mode.html';
}
else if ('prod' === ENV.name) {
templateUrl = './path/to/view/in/prod/mode.html';
}
return {
restrict: 'A',
controller: 'FormConfirmationCtrl',
controllerAs: 'fc',
template: templateUrl
};
}]);

That’s it. There are many more methods and tools to help with this, but I found this method the best and easiest.

More suggestions are welcome.

All the best for your rocket-speed development.