Run Node.js locally in the browser

Everything starts with receiving an email

In the morning, I received an email, StackBlitz said that they are working with Next.js and Google’s team to develop a new technology

• A few years ago, StackBlitz realized that the network is moving towards a critical turning point. The emergence of WebAssembly and new functional APIs makes it possible to write an operating system based on WebAssembly, which is powerful enough to run Node.js completely in a browser. We envision an advanced development environment that is faster, safer and more consistent than the local environment to achieve seamless code collaboration without the need to set up a local environment

Technical name: WebContainers

• WebContainers allows you to create a complete Node.js environment, which can be started within milliseconds, and can be connected and link sharing immediately with one click. This environment has powerful editing experience in VS Code, a complete terminal, npm and other functions. It can also run entirely in your browser, which brings some key benefits:
• Faster than the local environment. Compared with yarn/npm, the build speed can be increased by up to 20%, and the package installation speed can be more than 5 times faster.
• Node.js debugging in the browser. Seamless integration with Chrome DevTools enables native back-end debugging without installation or extension.
• The default is safe. All code execution occurs in the browser’s security sandbox, not on remote VMs or local binaries.
• Again, these environments are not running on remote servers. Rather, each environment is completely contained in your web browser. That's right: the Node.js runtime itself runs natively in the browser for the first time.

From now on, WebContainers is now in the public testing phase. Current support includes Next.js, GraphQL and Vanilla Node.js, we are working with other open source projects to expand support

Why is there WebContainers

Safety

• StackBlitz solves these problems by leveraging decades of speed and security innovations in the browser. All calculations in StackBlitz will happen immediately in the browser security sandbox, and cannot burst to your local computer. The model also unleashes some key development and debugging advantages (more advantages will be provided in a matter of seconds).

Release the browser’s functionality

• Use Chrome DevTools to seamlessly debug Node.js

  • It turns out that browsers are indeed very good at debugging Javascript. I know, this is shocking ;) By executing Node.js in the browser, the integration with Chrome DevTools is out of the box. No installation, no extension, only native back-end debugging in the browser

Run the server, in your browser

• Actually. WebContainers contains a virtual TCP network stack that has been mapped to the browser's ServiceWorker API, allowing you to instantly create a real-time Node.js server, even if you are offline, you can continue to work. Because it runs completely in the browser security sandbox, the server response delay is less than that of the local host (!), and it can protect your web server from local host crawling attacks
• Millisecond startup time

• There is a brand new environment when every page loads

  • Goodbye rm -rf node_modules! The built-in npm client of WebContainer is so fast that it runs a fresh installation every time the page loads, ensuring you get a clean environment every time. If your environment does have a problem, you can restore it to a clean state like any other web application: click the "refresh" button
• With StackBlitz, whether you are on a train, on an airplane or in the rain, you can continue to work without an Internet connection

Using StackBlitz's novel computing model, 100% of code execution occurs in the browser security sandbox. This leads to a faster and less restrictive development environment compared to local, while at the same time providing higher security, which is a very rare combination.

• In fact, the default security status is so solid that our embedded package manager is the first publicly available tool that can solve the long-unresolved npm vulnerability of Sam Saccone that has been unresolved for more than five years
• Again, these environments are not running on remote servers. Rather, each environment is completely contained in your web browser. That's right: the Node.js runtime itself runs natively in the browser for the first time

Write at the end

• WebAssembly powerful enough to write an operating system, but this time WebContainers puts this technology in the direction of Node.js , which I think has epoch-making significance
• In my opinion, the main application direction of this technology in the future is to enable software around the world to run in places where it could not be run before. In the future, you may only need to install a Google browser on your computer.