StackBlitz, whose WebContainer product allows a Node.js server to run in WebAssembly in the browser for development, has added alpha support for Firefox – alongside existing support for Chromium-based browsers – as well just a private preview of a headless API that enables a custom UI with a WebContainer behind the scenes.
Traditional web development means a PC with a web server, database, debugging tools, and a host of dependencies. This approach is still common, but can no longer be assumed. Development environments can now be containerized, either to run locally or remotely.
Hybrid environments are common, for example with Visual Studio Code running locally but supported by remote components accessible via ssh (Secure Shell), so that the code and the build process run on a remote machine. Platforms such as GitPod and GitHub Codespaces go one step further, with remote containers and in-browser code editing, allowing installation-free development from anywhere.
StackBlitz WebContainers represent a return to development on the local machine, but with one difference: everything runs in the browser, including the web server and build tools.
The project was first showcased at the Google I/O event just over a year ago, with support from Vercel’s Next.js as well as Google. The introductory post stated that the WebContainer approach is faster, better integrated with Chrome developer tools, and more secure because “all code execution occurs within the browser’s security sandbox.” WebContainers include a “virtualized TCP network stack that is mapped to your browser’s ServerWorker API,” the team explained, offering even lower latency than a server on localhost.
In order to make WebContainers work for this, Harris needed a new feature – a headless API. “We want to have more control over the user interface,” he said. “Wouldn’t it be great if we could take the underlying webcontainer technology and use it headless in our own page? That’s exactly what we did,” he said, introducing learn.svelte.dev as a tutorial.
“What happens is we went to Vercel’s edge network, downloaded the app, and that downloaded Node, installed SvelteKit and its dependencies like Vite and esbuild, we wrote our app to the system files and we started a Vite dev server, and it normally happens within seconds.
“I know of at least two other frameworks that have started working on something very similar. I expect this to become the norm very soon in how we learn the full tools,” he said.