How to use requirejs, jquery and d3 in a node express webserver

Question

I have been struggling with this for a while now but I am not making any progress. I always run into something unexpected.

I want to support browser code in node.js (express) that uses require.js, jquery and d3.js to build up a graph (svg), based on http request input parameters

The problem I am having is that once requirejs is initialized it will always return the same jquery and d3.v2 modules and these will all (for each of the client http request) start doing their thing on the same DOM (jsdom) instance. The net result is that the graphs get intermingled.

It is easy enough once require.js is out of the picture but that would have me update all the existing browser code that heavily uses require.js modules and dependency mgmt

All tips on how to approach this, or pointer to code that demonstrate this setup would be warmly appreciated!

Thanks

Peter

Answer 1

The trick that eventually worked for me is to make a clear separation between the node.js code that sets up the "browser" environment and the actual modules that also run in the browser.

So the flow, when an http request comes in, is now

• load jsdom node.js module and create a html document and window

• in that document make sure to add a script element that loads require.js (the browser version, not the node.js r.js script)

• in the window 'load' event listener pick up the requirejs module loaded through jsdom. This I could do with var requirejs = window.require

• configure the requirejs module (requirejs.config call)

• load all native node modules explicitly using node.js require method (not the requirejs one)

• the eventually call the "browser" code

I assume there are better ways (this is surely a bit of detour), but at least it works out now.

Perhaps someone else comes along here, and find this useful

Peter