Stackblitz recently released a new product called WebContainers that enables developers to create full stack Node.js environments within the browser which loads instantly and comes bundled with VS Code, a full terminal, NPM, and more.
Writing and executing custom code inside the browser isn't a new capability. In fact, vendors have been offering such solutions for a good number of years. In order to offer these capabilities, vendors relied on a remote development environment that would execute the code before streaming it back to the browser.
While these solutions allowed developers to access capabilities and execute languages that are not supported by the browser, they suffer several drawbacks:
- Spinning a new remote container can take a noticeable amount of time.
- Executing code on remote machines costs money.
- The solution requires a stable internet connection and inherently does not support offline work.
- Sending the code to a remote server raises some security concerns.
In order to address the aforementioned drawbacks, Stackblitz has collaborated with the teams at Next.js and Google to create WebContainers, a progressive web application that spawns a Node.js development environment within the browser.
To achieve that, Stackblitz uses the latest capabilities of WebAssembly, and WASI (or WebAssembly System Interface), and Web APIs to create a container that is capable of running Node.js from within the browser. Service workers are then mapped to the Node.js server to serve the HTTP requests.
The result is a web application that can run offline, is surprisingly fast (Builds complete up to 20% faster and package installs complete >= 5x faster than yarn/npm according to Stackblitz), and offers a secure environment to execute code as it runs behind the browser sandbox.
It's important to keep in mind that WebContainers is still in beta and currently only runs on Chromium based browsers. This limitation seems to be primarily caused by its reliance on recent/non-standard web APIs such as the File System Access API and according to the official Github page should be addressed in future releases.
In addition to the current capabilities of WebContainers, Stackblitz has promised to add several important enchantments including the support of private NPM registries, SQLite, and ES modules. Looking further into the future, it may also be possible to support additional languages such as Ruby and Python.
While the core WebContainers project is not open source, developers are encouraged to get involved by adding support to additional frameworks through the official Github repository and participate in the conversation via the official Discord channel.
