Handling environment-specific configuration in a javascript app

Question

Context : a single-page backbone application build with yeoman

I would like a way to have some application parameters depend on my current environment (dev vs production).

Right now I am using two separate config files, and I switch the dev one to the prod one when deploying which the grunt:usemin task :

// index.html
<!-- build:js scripts/config.prod.js -->
<script src="scripts/config.dev.js"></script>
<!-- endbuild -->    

// config.dev.js
window.config = {
    api_host: 'localhost:9393',
    api_key:  'dev_api_key'
}

// config.prod.js
window.config = {
    api_host = 'api.host.tld',
    api_key =  'prod_api_key'
}

This solution works but is smelly and doesn't allow any other environment than production and dev. What are my alternatives?

Answer 1

Try this:

var DEV = (window.location.indexOf("DEV=1")) != -1 ? true : false;

Then type ?DEV=1 after your URL.