Managing JavaScript config files for different build environments (like QA, UAT, Production)

Question

So you are building a stand alone Single Page Application in JavaScript that is served statically. It connects to an API.

Your application has a JSON object in its main.js like this:

var config = {
 apiPath: 'http://dev.api.example.com',
 appTitle: 'hello'
};

You use Grunt to create a release build, this transpiles all your SASS, ES6, AMD Modules etc code into one or two JavaScript files, along with this config object.

Your production API url is http://api.example.com and when you do a release build, you want just this value in the config to change. (Maybe you would want to change other config parameters too). You have a release config

var config = {
 apiPath: 'http://api.example.com'
};

How can a JavaScript config file be altered depending on different types of release environments during a build. Notice that I want to merge the release config into the default, not maintain totally seperate files with all the settings. While there are grunt plugins for setting a build mode, I've not found any that have the ability to update config files, only hacks that change which file is pointed to.

ASP.NET has web.config transforms that do exactly this, any property in the release transform for example, will overwrite the 'default' config on packaging. Does such a workflow exist using grunt or something?

Answer 1

In the end I solved the question myself by using a combination of environment variables and an amazing Node called Confidence which where you place all your different envs config settings in a single file, and they are resolved to a single configuration based on filters (such as an environment variable) - these can then be injected into the build process using tools like WebPack.