If you're building an Angular application, your application is probably dependent on the proper environment. When working locally, you need to access a local set of services, when in production mode, you need your production set of services. Nothing new here. But what is new is a GulpJS task plugin I've been working on, gulp-ng-config, that will build your environment configuration as specified by your build task.
Let's assume we have a simple AngularJS application that uses some $resources. In this, very poor example, we set the configuration on the rootScope for the location of our API. Our NoteService, which is the factory for our $resource, uses this as the configured location of the API.
angular.module('myApp', ['ngResource'])
.run(['$rootScope', function myApp ($rootScope) {
$rootScope.baseUrl = 'https://mywebserver.com/api';
}]);
angular.module('myApp').factory('NoteService', ['$resource',
function NoteService ($resource) {
return $resource($rootScope.baseUrl + '/notes/:id');
}
]);
As we see here, or even if we tried this with a number of different examples, we're leaving our API's URL in our code, which like any configuration, isn't exactly how you want things set up. A better scenario would be if we had a service holding our configuration. That's one step in the right direction:
angular.module('myApp.config', [])
.constant('EnvironmentConfig', {
baseUrl: 'http://mywebserver.com/api'
});
angular.module('myApp', ['ngResource', 'myApp.config']);
angular.module('myApp').factory('NoteService', ['$resource', 'EnvironmentConfig',
function NoteService ($resource, EnvironmentConfig) {
return $resource(EnvironmentConfig.baseUrl + '/notes/:id');
}
]);
But how do we get here without that being hard-coded into our project? By using a JSON file, one for each of our environments (there will be improvements to this approach upcoming), we can generate this configuration component as a build task.
Let's look at the following configuration file:
{
"EnvironmentConfig": {
"environment": "local",
"baseUrl": "http://localhost:8080/api",
"somethingElse": {
"property": "value"
}
}
}
We can construct a build task using gulp-ng-config to use this JSON file as the source of the stream, and output on the other end the Angular module containing the constant.
var gulp = require('gulp'),
gulpNgConfig = require('gulp-ng-config');
gulp.task('configuration', function () {
gulp.src('config.json')
.pipe(gulpNgConfig('myApp.config'))
.pipe(gulp.dest('app/'));
});
And that will produce:
angular.module('myApp.config', [])
.constant('EnvironmentConfig', {
environment: 'local',
baseUrl: 'http://mywebserver.com/api',
somethingElse: {
property: 'value'
}
});
Since this ends up in the project directory, we can have our angular project include the file and our main application can now use it as a dependency.
If you'd like to use this GulpJS component, it's a simple npm install gulp-ng-config
. You can always contribute or open issues at https://github.com/ajwhite/gulp-ng-config