Building a Node.js Runtime for the Browser

Rate this content

We'll walk through what it takes to build a Node.js runtime for the browser, the challenges we discovered along the way and solutions we built to those challenges.

13 min
15 Nov, 2023

AI Generated Video Summary

This Talk discusses the challenges and collaboration involved in building Nodebox, a Node.js compatible runtime for the browser. It provides an overview of how Nodebooks works, including the main manager, previews, and web workers. The Talk also covers the simplicity and speed of reading from the filesystem in Nodebooks. It highlights the complexity of implementing HTTP support and WebSocket mocking in Nodebox. Lastly, it mentions the ability to build a web server using Nodebox and provides information on available templates.

1. Building Nodebox: Challenges and Collaboration

Short description:

Hey, I'm Jasper. I'll talk about how we built Nodebox, a Node.js compatible runtime for the browser. We needed to build a file system, HTTP server, websockets support, modules, and the ability to fetch NPM modules. We had help from existing libraries in the Browserify ecosystem.

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.

2. Overview of Nodebooks and Filesystem

Short description:

So a general overview of how Nodebooks actually works. We have a main manager that controls everything in our virtual environment. It spawns processes, mimicking actual Node processes. We also have previews, which act like an HTTP server. Our Node processes are web workers with their own contained process. We use web workers to initialize each worker and do the initializing work of building the file system tree, loading web assembly files, and waiting for it to finish. Once the worker is ready, we send it back to main and can run commands like Next.js. We wrap the module in our own global to make it believe it's running in a node environment. Our filesystem works with the main process having the whole state and workers having eventual consistency. When writing to the filesystem, the write is synced and sent to the main process to synchronize it across the entire application state.

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.

3. Reading from the Filesystem

Short description:

In Nodebooks, reading from the filesystem is simple and fast. Each module has access to the entire filesystem state and can instantly retrieve files using the function.

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 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.

4. HTTP Support and WebSocket Mocking

Short description:

And then we also have HTTP support. It's more complicated than filesystem. We start a simple HTTP server on port 3000. Our notebox environment sends a message to our worker to start the server. The preview manager opens an iframe with a preview relay. The relay initializes a service worker. The preview manager sends the ready message to Sandpack, which spawns another preview iframe. Requests go through the service worker, relay, preview manager, and worker. Responses are sent back through the same flow. WebSocket support is provided through a mock WebSocket.

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.

5. WebSocket Support and Building a Web Server

Short description:

Let's see how WebSocket support works in NodeBox. It starts from a preview frame and goes through the service worker, relay, and manager. With all these building blocks, you can build your own web server. Try it out at We have templates for Node.js, Next.js, Vite, React, Vue, Spelt, and Astro. Connect with me on Twitter at Jasper D'Amour and find Codesandbox at Codesandbox.

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 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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
React Summit US 2023React Summit US 2023
32 min
Gateway to React: The Story
A behind the scenes look at the design and development of the all-new React docs at The new launched this year introducing new methodologies like challenges and interactive sandboxes and subtle inclusivity features, like "international tone" and culturally agnostic examples. Not only have the new docs changed how people learn React, they've inspired how we think about developer education as a community. In this talk, you will learn how the React team and some ambitious community members made the "React docs rock" for a generation of front end developers and how these new patterns and established techniques can be applied in your favorite projects.
React Finland 2021React Finland 2021
27 min
Opensource Documentation—Tales from React and React Native
Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community
React Finland 2021React Finland 2021
18 min
Documenting components with stories
Most documentation systems focus on text content of one form or another: WYSIWYG editors, markdown, code comments, and so forth. Storybook, the industry-standard component workshop, takes a very different approach, focusing instead on component examples, or stories.
In this demo, I will introduce an open format called Component Story Format (CSF).
I will show how CSF can be used used to create interactive docs in Storybook, including auto-generated DocsPage and freeform MDX documentation. Storybook Docs is a convenient way to build a living production design system.
I will then show how CSF stories can be used create novel forms of documentation, such as multiplayer collaborative docs, interactive design prototypes, and even behavioral documentation via tests.
Finally, I will present the current status and outline a roadmap of improvements that are on their way in the coming months.
TypeScript Congress 2022TypeScript Congress 2022
25 min
TypeScript for Library Authors: Harnessing the Power of TypeScript for DX
Using real-life open-source examples, we'll explore the power of TypeScript to improve your users' experience. We'll cover best practices for library authors, as well as tips and tricks for how to take a library to the next level. This talk will cover: 
- how to leverage the type inference to provide help to your users; - using types to reduce the need and complexity of your documentation - for example, using function overloads, string literal types, and helper (no-op) functions; - setting up testing to ensure your library works (and your types do too!) with tools like tsd and expect-type; - treating types as an API and reducing breaking changes whilst shipping enhancements; - I'd draw on my experience with libraries like nuxt3, sanity-typed-queries and typed-vuex and show what we managed to do and what I'd do differently in future. 

React Advanced Conference 2021React Advanced Conference 2021
24 min
The Legendary Fountain of Truth: Componentize Your Documentation!
"In Space, No One Can Hear You Scream." The same goes for your super-brand-new-revolutionary project: Documentation is the key to get people speaking about it.Building well-fitted documentation can be tricky. Having it updated each time you release a new feature had to be a challenging part of your adventure. We tried many things to prevent the gap between doc and code: code-generated documentation, live examples a-la-Storybook, REPL...It's time for a new era of documentation where people-oriented content lives along with code examples: this talk will guide you from Documentation Best Practices – covered from years of FOSS collaborative documentation – to the new fancy world of Components in Markdown: MDX, MDJS, MD Vite, and all.Let's build shiny documentation for brilliant people!