Staging Server – Fast and Free

Staging environments can be expensive in time and materials.  Turns out there's a way to bypass all of that for testing JavaScript.  It's also easy to learn, quick to implement, works across platforms and browsers, and best of all, free.

Test Your Code On Your Live Site!

No kidding. Using a file loader like Require.js, you can get a JavaScript staging environment running in less time than it takes to decide on a physical server. Here's how:

//if you don't already have a namespace, create one to keep things tidy.
var foo={};

// List the live files you would normally load.
foo.loadFilesStr="file1.js,file2.js,file3.js";

// Get your favorite cookie reading function.  Here's one I use.
foo.strToObj=function(str,keySplit,pairSplit){var y={},k=keySplit||'&',fn=k.substr?'split':'match',a=str[fn](k),i=0,p,L=a.length;for(;L>i;i++){p=a[i][fn](pairSplit||'=');y[p[0]]=p[1]||''}return y};

// Pick a cookie name.  "devEnv" works.
foo.devCookieName= 'devEnv';

// Read the cookies
foo.cookie = foo.strToObj( document.cookie, '; ', '=');

// get the dev cookie's value.
foo.devCookieVal=foo.cookie[foo.devCookieName];

// if a value exists, replace your normal files with a string of files from the cookie
if( foo.devCookieVal ){ foo.loadFilesStr = foo.devCookieVal.split(',') }

// make them an array to prep them for your favorite script loader.
foo.loadFilesArray=foo.loadFilesStr.split(',');

// and load the scripts.
require(foo.loadFilesStr, function(){
    $(document).ready(function(){ do stuff here })
});

Finally, change the files you want to load with a bookmarklet that displays and sets the cookie values, like this one.

javascript:(function(foo,cookieName){
  var cookieVal=foo.cookie[cookieName]||'',
  filesArray = cookieVal.split(','), // get the cookie value
  i=0, // set an iterator
  L=filesArray.length, // and a length for the files array
  tempStr='', // and a temporary string to append file names to for display
  userEnteredStr = (function () {
    for (;L>i;i++) { // loop over file names
      (tempStr += ('\n\n' + filesArray[i])); // append them for display
    }
    var reply = prompt ( // prompt for any changes
      cookieName + ' will be set to the following paths:' + tempStr +
      '\n\nChange the cookie value below to alter them. '+
      'Leave blank or cancel to remove the cookie',
      cookieVal // display the val if one exists
    );
    return reply;
  })(),
  expir = (userEnteredStr ? (new Date((new Date).getTime() + 1e11).toGMTString()) : '-1'), // set the expiration
  newCookieVal = (cookieName + '=' + (userEnteredStr||'') + '; expires=' + expir + '; path=/'); // set the new value
  document.cookie = newCookieVal; // write the cookie
  alert (userEnteredStr ? ('setting\n' + newCookieVal) : cookieName+' removed'); // notify the action taken
})(foo,foo.devCookieName);

Finally, for developer usability I set a notification to indicate what files are loading.

$('body').prepend(
   '<div id="devCookieVals" style="position:fixed;left:0;top:0;z-index:1000;">'+
   '<span style="background-color:#777;color:#DDD">Dev Files Loaded:</span> '+
   foo.cookie[foo.cookieName]+'</div>');

That's it.  Visitors will continue receiving the live files. You can load any set of files you'd like by clicking your bookmarklet and refreshing, including new jQuery versions, unit tests, and more. Enjoy!