When you’re developing a website, you typically have a development version of the site running locally (localhost), a staging version and a production version. Normally you would set up something that would automatically grab the necessary settings to use for that specific environment.

Here’s what my CakePHP’s config/database.php file looks like (PHP4 unfortunately). You’ll notice I have a set of options for my development environment ($dev) and one for my production environment ($prod). You’ll notice that when new DATABASE_CONFIG() is called, the __contruct method will fire and set $this->default to the appropriate environment that we’re in. It does this by checking to see if the domain that we’re on is the production domain.

class DATABASE_CONFIG {
 
	var $default = array(); // overridden
 
	// debugging enabled - development site
	var $dev = array(
		'driver' => 'mysql',
		'persistent' => false,
		'host' => 'localhost',
		'port' => '',
		'login' => 'root',
		'password' => 'root',
		'database' => 'polly_pocket',
		'schema' => '',
		'prefix' => '',
		'encoding' => ''
	);
 
	// debugging disabled - live site
	var $prod = array(
		'driver' => 'mysql',
		'persistent' => false,
		'host' => 'localhost',
		'port' => '',
		'login' => 'root',
		'password' => 'asodij390284niusofdiuh3823_SUPER_SECURE!!!',
		'database' => 'polly_pocket',
		'schema' => '',
		'prefix' => '',
		'encoding' => ''
	);
 
	function __construct(){
 
		$this->default = (str_replace('www.', '', $_SERVER['HTTP_HOST']) == 'prod-live-site.com') ? $this->prod : $this->dev;
 
	}
 
}

I’m sure there is a simpler way of doing this, maybe merging in the necessary key/values with array_merge instead of re-writing the entire array – but you get the idea.

Now I want to talk about accomplishing the same sort of idea but with JavaScript. I recently had to work on a project that was largely front-end. Different configurations had to be used for different environments. Here is what I came up with:

/**
* Fire it up and set options
* @constructor
*/	
var SiteName = function(){
 
	/**
	* We check the config host to load in and over-write the default settings
	* @private
	*/
	function setOptions(){
 
		var clean_host = (window.location.hostname).replace(/www./, '');
		if(config[clean_host] && typeof(config[clean_host]) === 'object'){
			this.opts = jQuery.extend({}, config.default, config[clean_host]);
		}
 
	}
 
	/**
	* Here is where we define our default set of options and our options to be merged/over-written with
	* options specific to the host name
	* @private
	*/
	var config = {
		"default" : {
			cache: true,
			backgroundAnimated: true,
			allowIE6Users: false,
			blowUpMachineIfIE6User: true,
			storeURL: '',
			blogURL: ''
		},
		"localhost" : {
			backgroundAnimated: false,
			blogURL : "http://localhost/blog",
			storeURL: "http://localhost/store"
		},
		"prod-live.com" : {
			blogURL : "http://prod-live.com/blog",
			storeURL : 'http://store.prod-live.com/main'
		}
	};
 
	/**
	* Once the configs are merged from setOptions, it puts it in this new clean options object
	* @public
	*/
	this.opts = {};
 
	setOptions.call(this);
 
}
 
var MySite = new SiteName();
console.log(MySite.opts);

All this is doing is running a check to see if the config exists for the domain that we’re on and if so, merge it with the defaults. It’s important to note that this technique uses jQuery’s extend method. If we are on the localhost domain then our SiteName.opts will look now like this: 

{ 
	cache: true,
	backgroundAnimated: false,
	allowIE6Users: false,
	blowUpMachineIfIE6User: true,
	blogURL : "http://localhost/blog",
	storeURL: "http://localhost/store"
}

I’m sure storing config in an XML file and parsing it would be a logical approach as well. I’m open to any suggestions and thoughts on this approach.