Switching Development/Test/Production variables in Javascript

Question

I am trying to search the best approach to manage different values for same variables in Devlopment, Test and Production environment.
For example, I have variable jsonFile which can be:

var jsonFile = http://localhost:63342/json/appsconfig.json

for development env

var jsonFile = http://192.168.35.59/applications/json/appsconfig.json

for test env

var jsonFile = http://example.com/applications/json/appsconfig.json

for production env

I am trying to read a lot about Frontend Development Stack, but I am confused about what tool to use. I will use Google Closure Tools for minification, can it be also useful to switch variable values? Or can it be considered a Grunt task (even if I am not able to understand how to properly configure Grunt tasks...)?

Answer 1

What might be better is to write the JSON into a JS file that is part of your build artifacts. Something like file-creator that can write a file like so (using a simplistic setup that can obviously be made more dynamic).

In the top of your module.exports for grunt tasks, load in the config file into a var like:

var configData = grunt.file.readJSON('../config/appsconfig.json'),

Then write to a new JS file using the grunt file-creator module

"file-creator": {
    'dev': {
        'build/config.js': function (fs, fd, done) {
                fs.writeSync(fd, 
                    'var yourSiteHere = yourSiteHere || {}; yourSiteHere.config = '
                    + JSON.stringify(configData) + ";"
                );
                done();
        }
    }
}

Then load this JS file into the page (perhaps even minify it using a separate grunt task). You will be then able to refer to the config data like so:

var apiEndPoint = yourSiteHere.config.api.apiEndPoint,
    apiKey = yourSiteHere.config.api.apiKey;