Angular config according to environment (dev, staging, production)

Question

It's silly, I know - every time I change environment I comment out and back my app's config factory. There must be a better way, is there?

I though of checking the URL but this seems like a bad practice. The other option I had in mind was using some sort of an gulp NPM during the build process - however development has no build process.

angular.module('myApp.services')
    .factory('GemsConfig', function () {
        return {
            //apiServer: "http://localhost:3000/v2/",
            //apiServer: "https://staging.gems.org/v2/",
            apiServer: "https://api.gems.org/v2/",
            //giphyServer: "http://api.giphy.com/v1/gifs/",
            giphyServer: "https://api.giphy.com/v1/gifs/",
            TTL: 5000,
            OS: 'web',
            version: '1.1',
            apiVer: '2.0',
            checkBalanceEveryXSeconds: 600,
            //giphyKey: 'xxx',    // testing
            giphyKey: 'xxxx'
        };

    })

Answer 1

Create two config one for production and one for development. And create one variable which can have two values either "production" or "development". Based on this variable call your config. By this you need to change only your variable's name.

Eg.

angular.module('myApp.services')
    .factory('GemsConfig', function () {

        var currentEnv = "production";
        var config  = {

          development :{
            apiServer: "https://api.gems.org/v2/",
            giphyServer: "https://api.giphy.com/v1/gifs/",
            TTL: 5000,
            OS: 'web',
            version: '1.1',
            apiVer: '2.0',
            checkBalanceEveryXSeconds: 600,
            giphyKey: 'xxxx'
        },
          production :{
            apiServer: "https://api.gems.org/v2/",
            giphyServer: "https://api.giphy.com/v1/gifs/",
            TTL: 5000,
            OS: 'web',
            version: '1.1',
            apiVer: '2.0',
            checkBalanceEveryXSeconds: 600,
            giphyKey: 'xxxx'
        }
        };

        return config[currentEnv];

     })

EDIT

Or better solution: Create three config 1) common 2) production 3) development

You can keep your common configuration params inside 'common' common config,or you can override them either in 'production' or 'development'. And at least you have to merge your "current environment" - (production or development) config and "common" config. For this you can use angular.extend function.

EG.

 angular.module('myApp.services')
        .factory('GemsConfig', function () {

           var currentEnv = "production";
            var config  = {

                common:{
                  TTL: 5000,
                  OS: 'web',
                  version: '1.1',
                  apiVer: '2.0',
                  checkBalanceEveryXSeconds: 600,
                  giphyKey: 'xxxxx'
                },
               development :{
                  apiServer: "https://api.gems.org/v2/",
                  giphyServer: "https://api.giphy.com/v1/gifs/",
                },

                production :{

                  apiServer: "https://api.gems.org/v2/",
                  giphyServer: "https://api.giphy.com/v1/gifs/",
                  TTL:800,

                }
            };

            return angular.extend(config['common'],config[currentEnv]);
});