AngularJS: Development and switching backends using Gulp

Question

I need to switch my application server backend during development. Currently, the server is hard-coded in a module as a string. I was looking around for a good way to switch the server using gulp.

I am unsure how to achieve something like gulp watch localhost or gulp watch devserver, where the last argument denotes the backend server?

Answer 1

You might have a configuration file for every different config, for example dev.constant.js and local.constant.js.

Each of these files contains an angular constant wich holds your current config, including your backend's url:

angular
    .module('myFancyModule')
    .constant('config', {
        backendUrl: 'https://my.backend.com/api/'
    });

Using yargs and gulp-if, you can check if a flag (e.g. --dev) is set and add the corresponding config file to the stream using gulp-add-src.

Another, more safe way is, to copy the particular config file to a file called config.constant.js once.

var argv = require('yargs').argv;
var fs = require('fs-extra');

gulp.task('watch', function() {
    if(argv.dev) {
        fs.copySync('./config/dev.constant.js', './config.constant.js');
    }

    //Your watch task here
}

Doing it this way, you are able to change your configuration very quick and easy. You could use this for builds and deploys as well, if you're doing them via gulp.