Building a Node.js Runtime for the Browser

Hey, I'm Jasper. I'm a staff engineer at Codesoundbox, and I'll give a talk about how we built our Node.js compatible runtime for the browser called Nodebox.

So why do we actually build a Node.js compatible runtime for the browser? We wanted to build a Node.js compatible runtime because we wanted to allow our playground library, Sandpack, to run small projects. Like for example a small Next.js example, a feed example, or Next.pressjs application. Obviously for the purposes of documentation.

And so what did we need to build to actually make this possible? There's a lot of stuff that goes into Node.js. For example, we had to build a file system, an HTTP server and websockets support, we had to build modules, we had to be able to fetch NPM modules. We also had to make sure that we had child process support, as most libraries and frameworks heavily on that. And there's also a lot of more smaller libraries and other standard libraries in Node.js that we had to support to make all this work.

So we actually had a lot of help from existing libraries, because there's a lot of stuff out there from the Browserify ecosystem. For example, there's assert, and there's like zlib. There's also a buffer and events, or path string decoder, like URL utils. Readable stream by the Node team, which helps us build stream support. And then there's also like crypto, and a bunch of other ones that are not listed on this slide.

So a general overview of how Nodebooks actually works. So we have our main manager, which controls everything in the sort of our virtual environment. And that spawns processes, which are actual Node processes, or try to be Node processes, they mimic it. And then we also have previews, which is sort of like your HTTP server, which goes through our preview manager, which we built, which then starts like iframes to mimic this HTTP server behavior. And our Node processes are actually web workers, which then also have their own contained process similar to how Node works.

And so how does a Node process work in our environment? So as I said before, we use web workers. To do this, we initialize each worker by sending a file system buffer and environment variables and a bunch of other small config options we have in Node box. Well, once this happens, the worker spins up and starts doing its initializing work, which is building the file system tree, loading some web assembly files which we use for example, for transpiling our code or some things like probably compression, which doesn't really exist in the browser at the time. And we also have things like waiting for it to to finish at the end. And then we go into actually loading the rest of the stuff.

So, once the worker is ready, we send it back to main. And once it's in main, main knows our worker's ready. And now, we can do like running a command. For example, running Next.js is as simple as passing in the JSON command next and then it spins up a whole Next.js server. It does this by going into our node modules and resolving the next binary which is actually just a JavaScript file in the end. So, we resolve that which ends up being like .bin slash next and then it has a sim link to slash node module slash next slash CLI.MJS or something. And then we run that actual script as like node, the resolve file and then which we pass as args to our module. And then we use that to evaluate the module. How we do that is by wrapping our module in our own like global which we built which contains most globals, node modules expect like the module, global require there's a couple other ES module stuff and then global this which is all different from the browser and we try to make it believe that it's running in a node environment by this instead of the actual browser. So we also set certain browser globals to undefined or null. And then we run it in a function. We wrap it in a function with our global arguments. So the code believes these are new globals instead of the actual globals that the browser has. And that we also do apply where we override the disks to be our global disks instead of the browser's disks. So it really believes it's inside of a node environment while it's still running inside a browser.

So how does our filesystem work? Our filesystem works in a way that our main process has the whole filesystem state and all our workers have eventual consistency. For example, here we have an example of how it writes to a filesystem. So in the module, you have importfs and then you call fs.write. That write then gets sent to our filesystem state which instantly syncs it inside its own state and then it sends a message to our worker bus to the main process to say I've written some file. Can you synchronize it across our entire state of the application? And then the main filesystem state also receives that, updates its internal state and then emits it to all other workers.

So in this case there's just one other worker which receives this message and then also updates its own filesystem state. So if there would now be a second module in Worker2 that tries to read that file, it would get the latest state. So how does reading then work? Reading is a lot simpler because you already have the whole state of the filesystem in your process. So it's just your module has the filesystem standard library and then you do fs.read() and then it just instantly looks it up in a map in the filesystem state and resolves it without any passing of messages or anything. It's just instant. It's incredibly fast.

And then we also have HTTP support. This is quite a bit more complicated than filesystem. So let's start off with starting a simple HTTP server. For example at port 3000. So we have our module which like you have the standard boilerplate HTTP server code and then you call httpserver.listen() with a port in the end. And once you do that, our notebox environment goes out the module and then it sends a message to our worker to say start HTTP server on port 3000. It receives that, passes it onto the preview manager which manages all previews and servers which could be compared to sockets on an operating system.

And then you and then the preview manager says open an iframe to actually register this port. That iframe contains what we call a preview relay which has a unique domain name with some initialization script that we build at Code Sandbox. That initialization script starts a service worker which then listens for the requests that come in and once that is ready, it says I'm ready to receive requests. And then we go back to the preview manager with that ready message through our relay and then the preview manager sends this to Sandpack which actually spawns another preview iframe which actually previews your application. The relay has this initializing script and it doesn't preview anything. The preview frame actually contains your application.

And once it's done that, it goes back to workers to say it's ready and then you get in your module like a listening event on your HttpServer. And it's just like regular Node.js. How do requests work in this whole setup? You have your preview frame which contains your application. You do an HttpRequest, for example, loading the index.html. It goes through the service worker that intercepts that request and then it says to the relay, I've received a request. The relay then says to the preview manager, there's a request here for you to handle. The preview manager knows where the server is running in our whole worker, web of workers. So it goes through main, then main forwards it to the worker. That worker then emits an request event to your module and then you handle it like regular node and then eventually you'll get a response. That response then goes again through that worker, back through main, back to the preview manager, then the preview manager sends it again to the relay, and there's a unique ID to this, so it's tracked across the whole graph. And then once preview relay has this response, it says to the service worker, I have a response for your request with ID something. And then it sends that response to your preview frame, like you would do with a service worker. Just here it goes through a bunch of workers and relays to a mock server instead of a real server. But then we also have WebSocket support, which does a similar thing. It mocks the actual WebSocket by overriding the global with something we call a mock WebSocket, and we build it entirely. There are codes and mocks where we have overwritten every method of this WebSocket to be compatible with NodeBox instead of using actual WebSockets. This only happens when it's local host or the local IP, then it uses the mock logic, and otherwise it just uses a real WebSocket, because you might still want to connect to a real web server, even in your small playground projects.

So let's see how that works. So again, we start from, for example, a preview frame that says, I want to send a WebSocket message. And then it goes through the service worker again, like the same way as a request. Actually, the first message in a WebSocket is an upgrade request. And that does exactly the same as before. But now we want to send a message. So we send it through a service worker. Service worker does it back to the relay, and back to the manager, knows where that server is running, because you first did a request to start a WebSocket, and then the module will handle it. And then you respond to it, for example, with another WebSocket.send. Then you go through the worker, through main again, preview manager, preview relay, same as before, and then it emits this again to the service worker, back to the view frame. And now we basically have WebSocket support as well.

And with all that, you have a pretty basic web server running. For example, here you have a simple hello world. Even prints to the console that server's running when listen is done. With all these building blocks, you can actually build something like this yourself. Theoretically, it's identical to how NodeBox works. You can actually try this out at NodeBox.codesandbox.io. We have a ton of templates built on top of Sandpack that you can play around with, like Node.js, Next.js, Vite, React in Vite, React in our Sandpack browser environment. Vue in Vite, but also Vue in our browser Sandbox environment. And then you have, like, Spelt again to environments, and then Astro we also support. And you can play around with anything that's Node compatible and see if it works. If it doesn't, you can always open a ticket on GitHub for us to fix it.

Thank you for listening! You can find me on Twitter at Jasper D'Amour. And you can also find Codesandbox on Twitter at Codesandbox.