I'm trying to customize public javascript files based upon the environment. Specifically, for socket.io, I'm trying to customize the location the client will connect to:

development:

var socket = io.connect('http://localhost/chat');

production:

var socket = io.connect('http://xxx.xxx.xxx.xxx/chat');

I know all about environment variables within the app itself (and I do use node environment variables through express), but from what I can tell these variables won't touch the public static js files I'm serving to the client.

What's the best way to go about achieving this contextual switch based upon development/production environments?

@Aust - That's an interesting idea, but the problem with that is the url of the document isn't the same as the url that socket.io is trying to connect to. So, I could be on one of several different pages, but all should connect to the same socket.io location. Any other ideas?
–
Ryan OgleAug 1 '12 at 1:58

If you're writing unobtrusive JavaScript and using a proper bundling system, then each HTML page you deliver should reference only a single "loader" script, which is then responsible for bringing in all the rest of the scripts. Create two versions of that script, one for development and one for production, and give them different names. When rendering HTML, make the name of the script a template variable which you'll have set based on your environment. Your loader script can then set appropriate variables to be used by the scripts it brings in.