Server in StackBlitz Browser Adds Support for Firefox, Headless API • DEVCLASS


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.

Coding in Next.js with a WebContainer

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.

Supported frameworks now include Next.js, React, Angular and Vue 3, with backends such as Express, GraphQL and json-server, all based on Node.js. The code editor is VS Code and TypeScript as well as JavaScript can be used.

Node.js uses the Chromium V8 JavaScript engine, so the fact that WebContainers only works on Chromium-based browsers like Chrome and Edge was no surprise. That has now changed, with the alpha version of StackBlitz for Mozilla Firefox. According to the team, achieving this took considerable effort, thanks to the reliance on a custom stack tracing PI in V8, as well as the need to support cross-origin isolation, which is necessary for a secure use of SharedArrayBuffer, in order to share memory. The porting exercise revealed bugs in Firefox and in WebContainers, according to the post.

A tutorial running in a WebContainer but using a headless API

WebContainers may be ideal for security, but are currently only suitable for a subset of developer requirements. According to Rich Harris, author of rollup.js and creator of the Svelte JavaScript framework, however, they are ideal for a particular niche: tutorials. “Running servers is expensive, so you need to have an authentication barrier. We don’t want the latency involved in starting a server. We want to minimize our reliance on third parties who might suffer outages or change their terms of service,” he said at the JSNation JavaScript Developer Event in June.

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.

Previous Enel X UK delivers its first e-bus project
Next Minnesota wolf management plan enters final week of public comment period