Can we create Environment Variables for backbone applications? - backbone.js

Question

We are building a backbone application that uses a set of REST APIs. What we want to do ideally is to have different config files for dev and live that are determined by environment variables. Is it possible.
Thanks in advance

Answer 1

I recommend you to have one file in a way like this:
var YourProject = {};
YourProject.Config = {
Local : {
db : 'mysql:dumy:dummy#localhost',
relativeUrl : 'blabla',
otherConfig : '123456'
},
Dev : {
db : 'mysql:dumy:dummy#localhost',
relativeUrl : 'blabla',
otherConfig : '123456'
},
Production : {
db : 'mysql:dumy:dummy#localhost',
relativeUrl : 'blabla',
otherConfig : '123456'
}
}
And then in your utilities to have something like this:
YourProject.ConfigHandler = {
getValue : function(key){
var env;
switch( window.location.hostname ){
case "localhost":
case "127.0.0.1":
env = 'Local';
break;
case "dev.yourdomain.com":
env = 'Dev';
break;
case "yourdomain.com":
env = 'Production';
break;
default:
throw('Unknown environment: ' + window.location.hostname );
}
return YourProject.Config[env][key];
}
};
So you will have just one file and for call differents API DB urls you will need to call just one line:
YourProject.ConfigHandler.getValue( 'db' );

Answer 2

Your question can be targeted to any javascript application, not just a backbone application, so the following answer is more general:
What I do is have a config.js file that is the first thing loaded in your HTML. The content is just a JSON object with configuration:
var CONFIG = {
debug : false,
server : 'http://production.foo.com'
};
Now every component of your app can access the configuration since CONFIG is a global object. So you can write this anywhere in your app:
if (CONFIG.debug) {
console.log('my debug stuff...');
}
The trick is to have 2 config.js files. One for development and one for production. When you want to publish your application, bundle your production config.js file and upload it to your server.
You can create a build script to build your application for production. As a first step, it could copy the correct config.js file to the right location. You can also add steps to minify your js files, bundle them into one file and more.

Answer 3

I adapted Daniel's nice answer to Coffeescript/CommonJS, so in my config.coffee I have:
env = switch window.location.hostname
when "localhost", "127.0.0.1"
"development"
when "www.example.com", "example.com"
"production"
config =
development:
urlRoot: "http://localhost:3000"
production:
urlRoot: "http://www.example.com"
module.exports = config[env]
And then client code looks like:
config = require("config")
config.urlRoot