WebContainer from StackBlitz is a new tool that is gaining popularity in the web development community. It allows developers to quickly create and share Node.js applications—including servers—that securely run on the client-side, inside web browsers. In this blog post, we will explore WebContainer as well as some use cases for it.
How it Works
WebContainer embeds an iframe into your web page that points to a server running on StackBlitz's infrastructure: conceptually, this server can be thought of as a secure minimal Node.js runtime container for code execution. WebContainer provides a set of web APIs to interact with this container, enabling developers to read and write files, execute commands, and perform other common operations.
The code that is executed inside the container is isolated from the rest of the web page, which means that it cannot access the DOM or other parts of the web page. This is a security feature that prevents malicious code from accessing sensitive information or performing malicious actions.
To see it in action, here's a simple NodeJS server, but in your browsers:
{"files":{"index.js":{"file":{"contents":"import express from 'express';const app = express();const port = 3111;app.get('/', (req, res) => { res.send('Welcome to a WebContainers app! 🥳');});app.listen(port, () => { console.log(`App is live at http://localhost:${port}`);});"}},"package.json":{"file":{"contents":"{ \"name\": \"example-app\", \"type\": \"module\", \"dependencies\": { \"express\": \"latest\", \"nodemon\": \"latest\" }, \"scripts\": { \"start\": \"nodemon --watch './' index.js\" }}"}}}}Developer Experience
Following the documentation, we've spent some time playing around with WebContainer and developed a feel for its developer experience. Here are some of the highlights:
Onboarding
One of the biggest advantages of WebContainer is that it is TypeScript-first. While we did follow the documentation, we often found ourselves using autocompletion hints provided by TypeScript far more often, especially when working with the file system APIs . This is particularly useful for beginners who may not be familiar with the installation and configuration process of various tools.
Shareability
Using the file system APIs, we were able to preconfigure a WebContainer and create a project with specific initial state that was reproducible every time, on every load of the page. This was very helpful for sharing code snippets with other developers, as well as for creating tutorials and other educational content.
It was also helpful to reproduce serverful bugs consistently on a web page which we could then share with other developers. This was particularly useful for debugging issues, proving that they were reproducible in a generic Node.js environment and not just on our own devices.
Framework-agnoisticism
WebContainer is not bound to any specific user interface library or framework, but instead exposes a generic web API that is entirely decoupled from other code. This means that developers can use any framework or library that they want, without having to worry about compatibility issues.
Room for Improvement
We're a part of a community shaped by constructive feedback that results in high-quality products. In exploring WebContainer, we found some areas where it could be improved.
Opaque Resources
WebContainer is an online tool, which means that it may not have access to the same resources as a local development environment. For example, it may be limited in terms of CPU, memory, and storage, which could affect the performance of large or complex applications. At the time of writing, we haven't found any indication of the specifications of the underlying infrastructure.
Use Cases
Besides these limitations, we've found WebContainer to be a great tool for a multitude of use cases. Let's explore some of them below.
Interactive Tutorials
We love Svelte at Monogram. SvelteKit's tutorial is built on WebContainer since SvelteKit requires running a server for local development. WebContainer enables a REPL (Read-Eval-Print-Loop) for this tutorial that allows users to interact with the code and see the results immediately.
We even use this ourselves in some blog posts, like the one about Monogram and Svelte where we highlight the differences between SvelteKit and Next.js.
Preview Environments for CLIs
We know and love deploy previews from today's prominent cloud platforms like Vercel, Netlify, and Cloudflare. While preview environments for static sites are quite common these days, preview environments for systems-level applications are slightly more rare. WebContainer enables developers to create preview environments for serverful applications that are accessible to anyone with a web browser.
Imagine one preview per pull-request for a CLI (Command Line Interface) that teams can review and test before merging. This would be a huge improvement over the current state of affairs where teams have to manually deploy their applications to a staging environment before merging code.
A great example of previewing a CLI in the browser is Clack: a Node.js library for building command-line applications.
Image Optimization
Currently, image optimization is a very common use case for serverful applications. The sharp library is used on the server side to compress, resize, and otherwise alter images for ideal support over the network to a client in response to client-specific request headers.
For example, the Accept header coming from a client tells the server which image formats the client supports. If the client supports the popular AVIF format, a source image can be converted to AVIF and sent to the client. If the client does not support AVIF, the server can convert the image to a more common format like JPEG or PNG.
With WebContainer, this image optimization can be done on the client side, which can be valuable and lucrative for hobbyists and smaller teams that do not otherwise have the means to deploy, employ, or afford servers for these purposes.
Conclusion
We are excited to explore the implications and applications of WebContainer. We hope that this post has given you a good overview of what WebContainer is and how it can be used. For more information, we recommend visiting the official website.