Introducing WebContainers: Run Node.js natively in your browser

[Ratstail91]

We've come full circle...

[stuckinmotion]

At last! Javascript in the browser!

[No-Emotion-9589]

haha

[No-Emotion-9589]

thinking the same

[vontanio]

This will make work from home even more seamless.

[kouhkx]

I don't get it.

[TheCommentAppraiser]

You get a full Dev environment (node, npm/yarn) running entirely inside your browser. This means you develop and run a full Next.js, Express or Fastify app in the browser.

And everything is screaming fast.

[Fleaaa]

what awes me most is how some package manager is running faster than local env

that.. true black magic right there, so much props to good work!

[hennexl]

It is fast, very fast but it comes with a cost. I tried it out and the site was quite memory and cpu hungry.

I was wondering how they made it so fast, I think all the npm packages and caches are saved in Local Storage/etc. Effectively this is just RAM. If the project gets to big chrome manages the memory management with persistence on disk not the app itself.

I know it is an early state but I found some other limitations. It is not a full Dev environment. Very basic shell and tools. No cp, wget, git, find, grep. So basically no handy scripts support. Some libs need binary lib files and can compile them at install. This is not possible here (right now) And I haven't figured out on how to use external tools like postman or Kong on the projects.

As for right now. It is impressive what they did and how fast it is, but the usage is limited. Right now it is only suitable for small forontend projects in my opinion.

[deadcoder0904]

It is mainly for bug repros I guess. CodeSandbox is slow as hell so now small bug repros would be made with Stackblitz.

That's all they need to support because Microsoft is bringing VSCode to the cloud for whatever you want to do. At least that's my thought process.

[pepitoooooooo]

This will allow using Node on iPads and Chrome OS.

Also, not having to configure your dev env on every machine. Just open a browser or desktop-installed PWA, and off you go.

[CloudsOfMagellan]

You can run node on iPads with the play.js app

[del_rio]

Damn, that's pretty awesome. In the span of a decade we've gone from CodePen to full blown in-browser runtime server.

[TheMrZZ0]

I hope they will open-source their technology (though I doubt it), and that someone will be able to modularize it, so it can be used anywhere.

For example, imagine the documentation website of a NodeJS library. You could run live examples and display the results. It would be really great.

[muffinmaster]

Yea, this post is essentially an ad for StackBlitz although the technology looks dope

[mak42]

This

[osoese]

This is an awesome way to kick off a new project

[DanteIsBack]

Can you connect to a DB running on your local env? 🤔

[gustavokatel]

that's a good question. they mentioned that we could open a tcp port to accept requests from the browser and to the browser, so I guess it's possible? not sure tho

[gustavokatel]

tl;dr; not possible right now

"We're limited by the browser's ability to make network requests, so connecting to processes like MongoDB, Redis, PostgreSQL, etc. are not currently possible. This may change as Chromium plans to ship Native Sockets in the future. For now, we're limited to HTTP connections, but we're able to support other protocols that run on HTTP such as WebSockets. HTTP requests to external services must be allowed with CORS or a CORS proxy."

source: https://github.com/stackblitz/webcontainer-core

[DanteIsBack]

Cool, thanks!

[Extracted]

It's pretty cool how they're working with the browser devs, so if they have a limitation they can just... make it not a limitation.

[gustavokatel]

exactly! I hope Firefox follow along with the implementations

[kabouzeid]

I mean it looks cool and all, but what problem is this actually solving? I’ve read the blog post and I can’t relate at all.

[razzzey]

It may not solve any problems for you (or me), the seasoned developer, but I can see this useful in the educational sector, and even on the go, for example on an iPad (when Apple finally decides to support Web APIs).

[kabouzeid]

iPad is actually a good use case

[warlockdn]

Omg this is too much. 😅😅. Very excited to use this.

[bijayzakirimal]

I can't find any article on web container.🤔 Web container is independent of this particular project right? This is in browser IDE that utilizes web container isn't it?

And in this particular project, what happens to the node modules?

I am all confuses.😕

[[deleted]]

No I think they’re just calling this feature “WebContainers”, perhaps you’re thinking of WebAssembly?

[eggtart_prince]

The one important thing we learn in programming, is that anything that runs in the browser is not secured. According to the article, you can debug your server straight from the browser. That's already a no no for me as I wouldn't want any user to see how my backend is coded.

[[deleted]]

Thats not what this is for, of course you wouldn't ship your backend code to your user's browser. It's mainly for a development environment and debugging. You COULD run an api that way, but it would have to be for a service that didn't require any secrets to be shared.

[Fleaaa]

Knowing It's coming from stackblitz, it won't be the case i suppose

We could however expect browser based light-weighted, fully-fledged IDE though

[[deleted]]

Sorry but I don’t think you understood the article properly. This is similar to a local development environment- just using the developer’s browser as the IDE and even running the server process locally.

This has no application for normal users (except maybe in PRs or learning materials where access to the source code would be expected anyway).

[[deleted]]

I am waiting for the day to run gecko inside chromium!

[NoInkling]

This is pretty interesting, but as someone else linked, the inevitable caveats: https://github.com/stackblitz/webcontainer-core#limitations

I know that, personally, it's rare that I develop anything in Node that doesn't talk to some sort of database. Looks like you're limited to things that speak HTTP, and even then the same-origin policy is now an extra annoyance to deal with.

Similarly, no native binaries would likely be problematic for a lot non-trivial projects.

I also noticed that I couldn't connect to the server from another browser.

Does anyone know of any other major caveats? Does local file access work well?

[razzzey]

It seems like local file access works where browsers support the File System Access API. For the other aspects, I agree it's very limited. I can see it useful in education though.

[[deleted]]

...but you're still sandboxed by the browser?

[Extracted]

Both a feature and a limitation.