20 ms·

WebContainers: Run Node.js natively in the browser

387 points by bpierre 5y ago

ericmsimons 5y ago
Hi all- CEO of StackBlitz/author of this blog post here. Happy to answer any questions! (Also, thanks for posting this bpierre!)
- simonw 5y ago
  Is this all open source? I'm fascinated in learning more about how you run a web server with this - the article says "WebContainers include a virtualized TCP network stack that's mapped to your browser's ServiceWorker API" but I'd love to understand a bit more about how that works. Since this is all done with WebAssembly are you planning on targeting other stacks such as Python? The amount of time I lose helping other people getting their Python development environments to work remains horrifying.
  - ericmsimons 5y ago
    We'll be open sourcing core parts of WebContainer as we move towards GA. We have some additional technical info in our core WG repo: https://github.com/stackblitz/webcontainer-core https://github.com/stackblitz/webcontainer-core We also did an hour long podcast a few months back that goes into pretty deep detail: https://www.youtube.com/watch?v=5F9qH-ea5Qk https://www.youtube.com/watch?v=5F9qH-ea5Qk
- bpierre 5y ago
  You’re welcome :) Any plan to work towards supporting Firefox & other browsers?
  - ob1gman 5y ago
    Yes definitely! Firefox compatibility is close to done and will ship soon. Waiting on Safari to ship some additional features. They don’t share timelines so it’s unclear at this point.
    - bpierre 5y ago
      That’s great to hear! Looking forward to it.
- waheoo 5y ago
  That isn't a blog post. That's an ad. Can you link to the blog post where you actually discuss literally any of the technical stack in any depth further than one sentence of wow more pizzaz much fast.
- skybrian 5y ago
  Could you point us to an introduction to how operating system concepts get mapped to browser concepts? It sounds like each native binary gets compiled to a WebAssembly binary, but how do they communicate? How are the network and file system implemented? Are parts of the file system persistent? How does a system call work?
  - ericmsimons 5y ago
    Great questions- we have some additional technical info in our core WG repo: https://github.com/stackblitz/webcontainer-core https://github.com/stackblitz/webcontainer-core We also did an hour long podcast a few months back that goes into pretty deep detail: https://www.youtube.com/watch?v=5F9qH-ea5Qk https://www.youtube.com/watch?v=5F9qH-ea5Qk
- yuri91 5y ago
  Is node/v8 compiled to Wasm entirely, or are you using the browser's JS engine with polyfills for node's APIs? Or something in between?
- stephenbuilds 5y ago
  First, congratulations! This is an astonishing advancement. I found this on the GH repo: "Is this open source? Today no, but the API will be open source to developers at GA." I'm confused by what "the API" is, exactly. Is WebContainers a technology you plan to make available for others to use node, in the browser, in their own apps?
  - nailer 5y ago
    > "Is this open source? Today no, but the API will be open source to developers at GA." If they make it Open Source, Microsoft will add it to VScode and eat their lunch. If they don't, developers might be afraid of lock in. Best exit for them is to just grow users and not make a decision either way until they get acquired by Github (aka Microsoft) and folded into VScode.
    - crazypython 5y ago
      > If they make it Open Source, Microsoft will add it to VScode and eat their lunch. Put the code under the GPL so no one can use it to build proprietary software. Visual Studio Code contains proprietary components, so this would prevent that.
- apignotti 5y ago
  Hi, CTO of LeaningTech here. Congratulations for the highly polished demo. I think you might find interesting this one we did months ago: https://repl.leaningtech.com/?nodejs https://repl.leaningtech.com/?nodejs
- bouh 5y ago
  hey very nice work ! do you think that a docker.js running containers in the browser is something that could become a reality soon if we follow you line of work ?
- drew-y 5y ago
  Can you expand on the capabilities of the terminal? What sort of operations can be done from the terminal? It looks like the shell is JSH. Is this an in house shell? Is there any more information on it?
- worik 5y ago
  Why do this at all? With all the security and design problems of Node.js, when there are actually secure and reliable ways (harder ways, yes. Security and reliability are hard) to do all of this. Why?
- miohtama 5y ago
  How much of this is JavaScript specific and how much could be expanded to “any” programming language?
- Galaco 5y ago
  > Faster than your local environment. Builds complete up to 20% faster and package installs complete >= 5x faster than yarn/npm. Above is a quote from the post. I feel like this is a stupid question, but how can running yarn/npm in a browser on my machine be faster than running yarn/npm on my machine? Particularly when each page load runs a fresh npm/yarn install? Nonetheless, this is a incredible piece of software that i'll be following closely
  - altano 5y ago
    I was wondering the same thing
  - grassthehopper 5y ago
    I'm also curious about this
  - giorgioz 5y ago
    I've also asked myself this question. I think the comparison is not with a local environment but rather with running node/yarn/npm on a remote virtual machine/ci. This is my hypothesis, I have no proof that's what they meant.
    - dspillett 5y ago
      I'm wondering if there is more happening in-memory, even if the project files and modules themselves are on-disk (accessed via FileSystemAPI) the vscode/node/other bits including temporary files may be held in RAM once initially loaded and never swapped out. If that is the reason, then if your machine becomes memory constrained, the performance will drop through the floor quicker than with full-local installs. It could be a mix of this and your suggestion (lower network latency related bottlenecks than experienced with non-local deployment).
- supermatt 5y ago
  You mention being able to use the debugger. How do I do this? The docs are very poor. I dont see any way to set breakpoints. When i use a debugger statement and open inspector it breaks on transpiled/packaged code (its different to the actual file). This is a deal breaker for me at present. Am I doing something wrong? (Using the http server template)
- imvetri 5y ago
  Hi, Can you share how it is working under the hood ?
- Scottttttt 5y ago
  This pretty cool stuff. I am wondering about another use case for this type of thing. We have a CLI tool built with node.js, could we build one of these containers with with the CLI tool setup and expose just a terminal with access to the local file system?
sigmonsays 5y ago
Are any demo applications created? What is memory usage like for a simple application?
- ericmsimons 5y ago
  Yep- if you go to https://stackblitz.com https://stackblitz.com you can start a Next.js, GraphQL, etc dev environment in one click.
  - waheoo 5y ago
    ... in chrome.
    - wongarsu 5y ago
      You are right. In Firefox I get "StackBlitz v2 Beta currently works in Chrome and Chromium-based browsers. We’re hoping to add support for more browsers as they implement the necessary Web Platform features."
    - holtalanm 5y ago
      I'm not sure what the complaint is here. Isn't it something like 90% of the browser market is chromium-based, now that edge is on the bandwagon? Supporting chrome/chromium doesn't seem like a bad place to start with a prototype with that kind of potential adoption.
arodyginc 5y ago
Isn't it awful? Now each smart ass web developer will start sending down scripts with nodejs to enable 'rich' user experience
- nyadesu 5y ago
  I think that wouldn't be a problem, as long as people get used to containerize what they write
  - beebeepka 5y ago
    Well, it's called WebContainers. One would hope everything is containerised
- educaysean 5y ago
  Oh no! The user experience must surely not be enriched! Damn those smart ass web developers who aren't like the rest of us that care about code quality and engineering principles!
lucasmullens 5y ago
> Faster than your local environment. Builds complete up to 20% faster and package installs complete >= 5x faster than yarn/npm. How? Isn't this using npm?
- ericmsimons 5y ago
  It's using a custom npm client we've built called Turbo. You can read more about the v1 version of Turbo here: https://medium.com/stackblitz-blog/introducing-turbo-5x-faster-than-yarn-npm-and-runs-natively-in-browser-cc2c39715403 https://medium.com/stackblitz-blog/introducing-turbo-5x-fast... We haven't released any more info on Turbo v2 yet but will soon.
- schlotzisk 5y ago
  r/murderedbywords
huggyfee 5y ago
I'm trying to get my head around how the networking of it works. Is local.webcontainer.io being overridden somehow on the browser like a hosts file might do? Trying to figure out how I'm hitting that URL from another tab
- 1023bytes 5y ago
  Must be some sort of tunneling, because it works outside the browser too
  - NoInkling 5y ago
    If by "works" you mean "serves up an error page". It's a standard domain, not real localhost, and it needs the service worker from the editor page running to work properly.
- goatcheese13 5y ago
  There is a service worker registered on the domain name, for example https://nextjs-agaw8i--3000.local.webcontainer.io/ https://nextjs-agaw8i--3000.local.webcontainer.io/, then when you visit this URL in another tab it basically shares the service worker from the stackblitz tab.
waheoo 5y ago
Title needs fixing. This is chrome only.
- ericmsimons 5y ago
  For now. It works in Firefox today (minor issues keeping it feature flagged for now) and Safari is close to shipping WASM Threads, so this will likely work on all major browsers by EOY.
ttt0 5y ago
I was kinda hoping it was something crazy like nodejs with v8 engine compiled to wasm lol
- ericmsimons 5y ago
  Did you read the post? You might be pleasantly surprised :)
  - ridiculous_fish 5y ago
    Can you please go into more detail as to what exactly is being compiled to wasm? The post does not describe it. In particular there seems to be a lot of confusion about whether the JS engine itself is running in wasm or not.
    - azakai 5y ago
      The largest wasm file I see downloaded on the website is 440K. Disassembling it, it seems to contain a bunch of libc-like filesystem code, and was built using the rust toolchain. So it doesn't look like v8 has been compiled to wasm here. Rather, I assume they compiled a library or two, but otherwise they use the JS VM in the browser, and they've ported the Node.js runtime scripts to that environment. That doesn't take anything away from the achievement here - it's really impressive! It's better to use the VM in the browser, if you can get those runtime scripts portable enough, which from other comments it seems like the answer is (or will be) yes.
beebeepka 5y ago
I am definitely going to try this first thing tomorrow
mywittyname 5y ago
Alright, so you can create an IDE in the browser, but, what else? I'm just not seeing the value in running servers in your browser. Presumably, most sites will still need to connect to a remote back-end services to get at data and whatnot, and that back-end isn't going to be running locally on a customer's web browser.
- chrisco255 5y ago
  I don't know about your dev environment, but in mine we run server code separate from web code. So you could toggle your local WebContainer to access either localhost:3001 or a remote branch, staging or prod environment for whatever server you wanted to test against.
nynx 5y ago
Someday, I'd like to see Wasi-based webassembly containers. It'd be awesome to spin up a sandboxed shell with file access in a webpage.
- gameswithgo 5y ago
  why do you want to spin up a shell with file access in a webpage?
  - Spivak 5y ago
    So you can open up your local project directory in your browser-based IDE and have it work like you expect.
    - nynx 5y ago
      My wish was actually to be able to spin up a shell locally on a github repo that pulls stuff over lazily.
- ericmsimons 5y ago
  You can actually do this with WebContainers today :) Try it out here: https://stackblitz.com/fork/node https://stackblitz.com/fork/node Full WASI support in WebContainer is landing in the next 1-2 months.
SahAssar 5y ago
What about this is "native"? The page says it is "running natively" but also says "All code execution happens inside the browser's security sandbox". Is wasm in a browser somehow considered native now?
- deleted 5y ago
  [deleted]
- easton 5y ago
  I interpreted it as “native to the browser”, which is a bit silly when you think about it, but makes sense when opposed to “running remotely”.
  - wongarsu 5y ago
    Isn't the opposite to "running remotely" "running locally"? Meanwhile if pressed for the opposite of "running native" I would answer "running virtualized".
- hn8788 5y ago
  The web devs where I work have started calling pretty much everything "native" as long as it interacts with the host in some way since people assume it means fast.
- ThomasBHickey 5y ago
  WASM can be compiled to native code.
chadlavi 5y ago
"You want it to be a mini operating system" I don't think this is universally true.
philipyoungg 5y ago
Does this mean we can use sqlite natively on the browser now?
- ericmsimons 5y ago
  Yes. One of our engineers has gotten sqlite to run natively in WebContainer. Will be releasing as OSS in the next few weeks!
  - philipyoungg 5y ago
    That's pure orgasm. Thank you for this!
  - egeozcan 5y ago
    Great! Are there any tickets on this we can follow?
- chx 5y ago
  note https://news.ycombinator.com/item?id=27016630 https://news.ycombinator.com/item?id=27016630
- azakai 5y ago
  SQLite has been ported to JS (and wasm) for some time, https://sql.js.org/#/ https://sql.js.org/#/ https://github.com/sql-js/sql.js/ https://github.com/sql-js/sql.js/
lxe 5y ago
Wow. How? Node.JS needs a "full-blown" OS to compile and run... right? And that's not something you could emulate efficiently using wasm? Right?...?
- bellyfullofbac 5y ago
  People have made Linux run on the browser, so... Although I don't think this is what they did here. Man, the yet another layer they've made between code and the CPU makes me uncomfortable. Imagine finding a bug and going through 20 layers to troubleshoot it. Also: https://www.theregister.com/2017/03/23/cursor_devours_cpu_cycles_ms_code_editor/ https://www.theregister.com/2017/03/23/cursor_devours_cpu_cy...
- ericmsimons 5y ago
  Great question :) We have some additional technical info in our core WG repo: https://github.com/stackblitz/webcontainer-core https://github.com/stackblitz/webcontainer-core We also did an hour long podcast a few months back that goes into pretty deep detail: https://www.youtube.com/watch?v=5F9qH-ea5Qk https://www.youtube.com/watch?v=5F9qH-ea5Qk
- brabel 5y ago
  node.js, as any other native Linux/Windows/Mac application, talks to the OS via a system API. You can emulate that API using WASM, mapping I/O to browser APIs, which is why they mention network is implemented via service workers, for example. File I/O can be mapped to IndexDB... Threads can also be mapped to service workers, I guess... and so on. emscripten[1] did this a long time ago for C, which is how a bunch of native applications have already been ported to run on the browser. webcontainers[2] seem to do a similar thing but focused on exposing the browser API to the native apps in a way that integrates well with the JS environment. [1] https://emscripten.org/ https://emscripten.org/ [2] https://github.com/stackblitz/webcontainer-core https://github.com/stackblitz/webcontainer-core
oolonthegreat 5y ago
totally lost newbie here: but what is the difference between running javascript on the browser and running node.js on the browser?
- asmos7 5y ago
  basically node exposes all these other APIs like reading a file from disk. Browser also has APIs like detecting when the page is fully loaded that wouldn't be available on Node. What JavaScript syntax is supported can also vary between Node and browsers.
  - des1nderlase 5y ago
    WASM cannot magically load from disk, there is browser protection, right?
    - Ajedi32 5y ago
      It can't access the file system, but it could implement an API that emulates a file system inside the browser sandbox. Presumably that's what they're doing here.
      - kllrnohj 5y ago
        But you can do that same API emulation in regular browser JavaScript, too. What's the WASM intermediate buying here?
        maple3142 5y ago
        I think it is more complicated to emulate those api in normal browser environment compared to emulating some OS api for running node.js.
        kllrnohj 5y ago
        Why? It's literally JavaScript on both sides - what's complicated here?
benatkin 5y ago
Yawn. It isn't open source. It has a name, WebContainers, that implies it's based on the web, but it's designed around Node.js which isn't built on browser technologies as much as something like Skypack or Deno. It also seems like it's going to be a memory, disk, and CPU hog, and that it's going to be pretty complex. I like where Skypack is headed and this seems like the opposite direction. It's pretty cool but it seems like they're trying to create a lot of hype around it.
- testingm 5y ago
  Soothe your heart
- holtalanm 5y ago
  > I like where Skypack is headed and this seems like the opposite direction. I did a quick google search because I had never heard of Skypack. Skypack seems to be a far cry away from what WebContainers is claiming to do. Like, they're completely different products. I guess I don't understand why you're even comparing the two.
  - NotEvil 5y ago
    I think he means deno+skypack
Spivak 5y ago
The future is going to be wild. You could bundle V8 compiled to WASM with a graphics toolkit that uses a syscall like interface to access a canvas backed by WebGPU? At that point you could replace the browser with ZINE (Zine is not Electron) and run webapps natively just how WINE works.
syrusakbary 5y ago
I think very few people will realize the systemic effects that a demo like this entails. Very, very good work StackBlitz team!
- anton96 5y ago
  If their base is node, that implies we could start to see many electron.js app being ported to the browser
  - devoutsalsa 5y ago
    ELI5... why would you want to run an Electon app in the browser? Isn't that just a website at that point? EDIT: Upon closer inspection, it looks like this is an online IDE meant to mimic a desktop environment. I don't know if there's any demand for that, but sure, why not. I'm sure someone will come up w/ a reason to run WebAssembly in a jQuery plugin, too.
    - mlok 5y ago
      I guess that running in the browser it doesn't need to be installed on the machine. Or a desktop-only Electron App would be usable from a mobile phone browser etc.
    - Ajedi32 5y ago
      Backwards compatibility with existing Electron apps I guess? Otherwise yeah, a native PWA would be better.
- hagg3n 5y ago
  Funny you say that. I'm usually really skeptical of the next big thing but I felt differently about this, just can't put my finger on it.
  - ericmsimons 5y ago
    This really means a lot. I'm glad our work & writing came across genuine.
apignotti 5y ago
As far as I understand JS code is being run natively in the browser. Node has been hooked to the native engine, so V8 is not involved. At LeaningTech we have since several months been able to run nodejs, but also python and ruby using our Wasm based x86 VM (CheerpX), the demo is available here: https://repl.leaningtech.com/?nodejs https://repl.leaningtech.com/?nodejs With our solution the full Linux x86 binary of nodejs is running including the whole of V8 and its JIT engine. Of course fully client side.
- lsb 5y ago
  > We are working on CheerpX, but it’s not yet available generally. If you are curious and want to know more, stay tuned, or get in touch! How close is CheerpX to getting (for example) an app that uses a PyTorch model running in the browser? :)
  - apignotti 5y ago
    Not an expert on PyTorch in particular, the python + native (if any) components would work right now. If GPU acceleration is required some way to bridge into WebGL or (much better) WebGPU would need to be engineered, certainly doable but not existing right now.
    - lsb 5y ago
      Except for figuring out Pytorch's blas, the rest should be pretty straightforward to use CPU-only, I'd love to use that to (even pay to) compile some side projects to wasm apps in the browser :)
- ampeter 5y ago
  > As far as I understand JS code is being run natively in the browser. Node has been hooked to the native engine, so V8 is not involved. What is the "native engine" if not v8?
- zamadatix 5y ago
  It looks like the difference is you went for full x86 system call level emulation to handle existing binaries whereas stackblitz decided to build a container for things like Node compiled directly to WASM with no static assumptions of a base system. The latter approach with 1 less level of indirection should be much more efficient, as is evident by startup times of the 2 demos. Not to mention the ability to hook into things above the syscall level.
throwaway284534 5y ago
I used to teach web development and was always frustrated with just how much effort went into setting up a machine. It would be really nice if a developer could just include a script tag in their project that setup a TypeScript compiler inside service worker. I managed to get the basics down, even fixing relative import statements. Requests like localhost:3000/main.tsx would compile and cache on the fly. There were a few native file system issues I encountered that this would be perfect for!
- tesnirnat 5y ago
  How did you end up doing this? Do you mind sharing?
  - throwaway284534 5y ago
    Excuse my mess but feel free to poke around: https://github.com/nirrius/my-server https://github.com/nirrius/my-server
- Tommek 5y ago
  Yes web developing is so hard... sudo apt install apache2 php libapache2-mod-php; vim /var/www/html/index.php
  - wmichelin 5y ago
    I see you haven't done anything in 10 years
    - seanp2k2 5y ago
      PHP is actually pretty great these days, you should have a look at what modern PHP has become if you’ve been out of the loop for a while. Have a look at https://phptherightway.com/ https://phptherightway.com/ if you’re interested.
  - phist_mcgee 5y ago
    That's like saying that driving a car is easy. Foot on gas. Hands on wheel. Drive to destination. Most things can be simplified to the raw essentials, doesn't mean you're going to achieve a result that people want or need.
sakekasi 5y ago
This is super cool! I think pairing this with the upcoming native support for modules and a CDN like skypack could lead to a truly powerful browser development experience. No bundlers and a full IDE? Maybe this could even mean that there's a chance for a some of the 'just fiddle with the page' experience to come back to the web! (/rainbows and unicorns)
_pdp_ 5y ago
I dig Web IDEs. I have been using Cloud9 (AWS) for the past 5-6 years.
namelosw 5y ago
Mind-blowing. The env spins fast. Maybe one day, smartphones and tablets are just browsers in hand.
skilesare 5y ago
I'd be super interested in seeing how much of this is really wasmified. I'd love to see if this could get running in a DFINITY Canister.
Ajedi32 5y ago
Wow, the PWA is really impressive. Honestly it's starting to get hard to tell the difference between this and Electron-based editors like VS Code. I'm really excited for integration with the File System Access API; that's the final puzzle piece I'd need to use something like this for serious work.
- aberger 5y ago
  You can checkout www.StackBlitz.com/local and give it a try! Still in Alpha, but should generally work for you :)
  - rodolphoarruda 5y ago
    So it's 8 dollars for the astronaut plan. That's what I pay for robux to my kids, per week. It's jaw dropping to me how such advanced tech is made available at a single digit price. Thanks for sharing.
- codazoda 5y ago
  Me too and I was surprised to find that Chrome lists this as "ready" or "released" (I don't recall the exact term). I tried the example web based editor and found that the file system access API worked in Firefox too. I'm working on a note taking project right now that I think would be great as a web app, but I'd like to store the result in a flat text file and the file system access API looks like it will let me do exactly that.
  - lioeters 5y ago
    > ..found that the file system access API worked in Firefox too For now, File System Access API seems to be available only in desktop Chromium browsers: Edge, Chrome, Opera. I believe Firefox has not implemented it yet. https://caniuse.com/native-filesystem-api https://caniuse.com/native-filesystem-api --- Mozilla's current position on the specs: > The ability to read and write from the filesystem is potentially very dangerous. We will need to carefully consider any solution in light of the security and privacy implications. We recognize that the spec authors take this issue seriously, but we are concerned that any solution will increase the risk of security incidents more than we are willing to tolerate. > Right now, there isn't enough detail in the specification to make an assessment of these risks, so we will defer our decision until we have more information. https://mozilla.github.io/standards-positions/#native-file-system https://mozilla.github.io/standards-positions/#native-file-s...
dheera 5y ago
Can we please call it NodeJS and stop calling it Node.js? It's not a .js file, and it's not written in JavaScript.
- emteycz 5y ago
  Names don't have any such requirements - but we should use them correctly. You don't rename Windows even though it's not a hole in the wall stuffed with glass.
  - dheera 5y ago
    It's just irksome. I don't think Windows is a good analogy. More like if I called the OS "Windows.jpg". If you're going to use something that looks like a filename as a product name, then make sure that file actually exists and is in the expected format. D3.js --> good Angular.js --> good Node.js --> bad python3.py --> bad Windows.jpg --> bad Windows.exe --> okay (I don't use windows but I assume there's something of the sort)
    - emteycz 5y ago
      I agree it's not a great name - but IMHO using names incorrectly is even worse than bad naming.
    - codingdave 5y ago
      If you are going to get this pedantic, then why not also include *.com as bad, because that was a file type in DOS.
- throwawaycuriou 5y ago
  JavaScript is not a scripting language for Java.
- tasogare 5y ago
  My personal pet peeve is golang. No language is named like that. The language name is Go. Calling it golang because of the domain name of the project is like saying typescriptlang instead of Typescript.
e12e 5y ago
So... Two thoughts: this probably means we can run node in deno? Second: looks like js is catching up with smalltalk. JJust a shame the debugger is still rather crappy, and the browser/inspector only applies to a subset of widgets/controls (the html/css stuff, not the tab bar, address line, bookmarks menu etc..).
frankenst1 5y ago
I assume you still can't use UDP or bind to TCP sockets that are accessible outside of the browser?
- bestest 5y ago
  Quoting https://github.com/stackblitz/webcontainer-core https://github.com/stackblitz/webcontainer-core: > 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
- truth_seeker 5y ago
  TCP socket to Websocket :- https://stackoverflow.com/questions/14928222/tcp-socket-to-websocket https://stackoverflow.com/questions/14928222/tcp-socket-to-w...
brabel 5y ago
Everyone thought WASM would enable developers to write code in any language they wanted (with type checking and higher performance) and deploy it on the web. JS Developers come in: so we can compile node.js to WASM and run that in the browser?! Yay!! Now we can have backend JS running in the browser alongside browser JS! Jokes aside: this is actually quite interesting, the demo is very impressive (except for the "only works in Chromium-based browser" message on the next.js demo, where the preview should be - despite Mozzila being one of the main WASM backers and Firefox having arguably the best WASM engine).
- kevingadd 5y ago
  Typically when you see stuff like this be Chromium-only, it's because Chromium has a bunch of non-standard/one-vendor-only stuff enabled in production builds and neither Firefox or Safari have it enabled (or implemented at all). A few examples include Bluetooth, MIDI and USB.
  - pantelisk 5y ago
    I don't understand why you are downvoted. Filesystem access is another big one! Chrome has the technological advantage and sports an enormous kitchen sink of features. One has to make the hard decision, work on a concept that will work only on one browser, try to cut corners with graceful (or crippling) degradation, or wait potentially a long time until a spec is standardized and implemented. The latter may result in others hitting the market sooner, so it is understandable why we end up with web-apps that function in a single browser only. Hopefully this improves in the future.
    - mr_toad 5y ago
      The down side is that some of these technologies never get standardised and eventually get dropped. Like NaCl and PNaCl.
      - WorldMaker 5y ago
        Or for an example that caused a lot more havoc comparatively: WebSQL.
atc 5y ago
No.
jeroenhd 5y ago
"StackBlitz v2 Beta currently works in Chrome and Chromium-based browsers. We’re hoping to add support for more browsers as they implement the necessary Web Platform features." Pretty useless, then. What features are missing? As far as I know Firefox was one of the major contributors to pushing WebASM to the web and has a superior WASM engine in many aspects. I'd be more interested in a post about what WebASM features are missing than an announcement that someone hacked Javascript into a browser.
- dfabulich 5y ago
  It looks like the problem isn't WASM features, but web I/O APIs, like the File System Access API.
  - dmitriid 5y ago
    Many of the more "advanced APIs" are unlikely to be shipped in either Firefox or Safari because of security and privacy concerns. For example, Chrome released File System Access by defaul tin Chrome 86, on October 6, 2020. And yet, as late as August 2020 they were saying that they'd just got the spec in shape: https://github.com/mozilla/standards-positions/issues/154#issuecomment-668757669 https://github.com/mozilla/standards-positions/issues/154#is.... And there are still unresolved issues around actual security of the thing (that Chrome happily ignores). The "spec" itself lists 13 issues: https://wicg.github.io/file-system-access/ https://wicg.github.io/file-system-access/ And Safari won't implement it: https://lists.webkit.org/pipermail/webkit-dev/2020-August/031362.html https://lists.webkit.org/pipermail/webkit-dev/2020-August/03...
    - atatatat 5y ago
      If business PCs are running Microsoft Teams + Outlook PWAs on Edge (Chromium based), personal PCs as a majority are running Chrome/Chromium...I can't see why Apple wouldn't come to a compromise to treat PWAs with respect. It's not just about privacy of web APIs...it's about Apple's chokehold on iPhone users.
      - 5y ago
brundolf 5y ago
"Your scientists", etc
worik 5y ago
This is a really bad idea. Building on the really good work of the WASM folks, running Node.js, with all its design problems, over the top of it. I am forever astounded anew by the hubris and naivety of the Node.js crew. It is a example of "It is easier to write than read, easier to talk than listen, easier to build than design"
- dfabulich 5y ago
  You didn't say anything substantial here about why it's a bad idea. "Design problems." What design problems do you have in mind?
nightowl_games 5y ago
John Blow is going to lose his mind at this.
k__ 5y ago
I will certainly try this, but besides the debugger connection it seems more like a PR stunt, to be honest.
theflyinghorse 5y ago
Does this mean we can now have a SOA in the browser? True separation of concerns: Render code deal with writing to DOM, when data is needed it calls a node API proxy server which in tern interfaces with REST/grpc/graphql servers, then there's also auth service, and also a local (literally local) cache service. All in the browser. Damn.
pixel_tracing 5y ago
Web development is a big gigantic shit storm. Why can’t we use a real statically typed language without this JS shitty overhead, generate compiled binary and send that to users? I personally hate writing javascript
- mssundaram 5y ago
  Have you not heard of WASM? And while it's not exactly what you're asking for, what about Typescript?
TrispusAttucks 5y ago
Far out! But. Is there no end to our collective madness!
flowerlad 5y ago
To demonstrate the potential this needs a demo of a "middle-tier" service implemented in NodeJS. The service needs to talk to a MySQL database, and expose a Rest API to the web application. If that works that means many intranet applications can be server-less. Both the JavaScript app and the "middle-tier" runs in the browser, and the middle-tier talks to MySQL server which is also on the intranet. All you need is a file server to serve the static JS files.
- dane-pgp 5y ago
  If the middle-tier and the app are both written in JavaScript, and you're developing them both simultaneously in the browser, does it make sense for them to be communicating via REST any more? Wouldn't it make more sense for the app to send SQL prepared statements to the database (via a tiny standardised wrapper on the server to enforce per-user permissions based on the authenticated session)? It probably depends on whether other apps are requesting data from the same database, in which case it might make sense to convert from the relational model to JSON objects in a tier which exposes the objects over REST.
  - flowerlad 5y ago
    > via a tiny standardised wrapper on the server That defeats the point of not having a server. The middle-tier should be written in Nodejs because it has drivers for relational databases such as MySQL.
ngcc_hk 5y ago
Server to server code instead of client to server code, expose db Api to “client” ... lots of think about.
sebastialonso 5y ago
Do I, as a user, have any possibility of protection against things like ads, or, cookie/tracking abuse with this? I'm really ignorant about this, so I don't known even if I'm doing the correct questions. It looks just like a canvas, there's "no" DOM.
Xavdidtheshadow 5y ago
This is a very cool project! I noticed that outgoing http requests don't seem to work (there's no `curl` and after installing a CLI tool I work on via npm (which worked like a charm!), the outgoing API calls it makes were blocked. I assume that's intentional at this stage. Is that changing in the future?
- NoInkling 5y ago
  Their repo implies that network requests are subject to the same-origin policy, since it's in a browser after all. If you open up devtools you will probably see complaints along those lines. In short: the endpoints you request need CORS enabled.
cookiengineer 5y ago
If it really runs inside the Browser: How did they implement adapters for networking and crypto/tls? I mean, a console is nice and all. But I'm highly sceptic as to how the filesystem and networking works, because fetch cannot be used to have dgram or tls/net sockets. And that is literally the primary reason nodejs exists.
- scoopertrooper 5y ago
  Part of the answer to your question: > WebContainers include a virtualized TCP network stack that's mapped to your browser's ServiceWorker API, enabling you to instantly create live Node.js servers on-demand that continue to work even when you go offline.
  - cookiengineer 5y ago
    I was trying to refer to the simulated iframe that's the live preview...and probably uses the service worker's responses to emulate the behaviour rather than say, a real end-to-end http server pipeline. This sounds very likely like http module injection, so that the nodejs module isn't really doing what it thinks it does, but is using an injected API behind the scenes. Raw TCP is only available for Chrome Extensions, on Chrome OS, iirc. (Setting aside the lack of TLS or a real crypto module that isn't using the Browser's Web Crypto API approach)
inb4_cancelled 5y ago
This makes me want to quit webdev and never look back. Why the fuck are we recreating operating systems in the browser? We already have operating systems. We already have containers. We already have native code execution.
- vijaybritto 5y ago
  Why is this a problem? Why can't they try out new things?!
  - inb4_cancelled 5y ago
    My problem with it is that most of the new stuff ends up in production and widely used for cargo-culting reasons.
- ranguna 5y ago
  For fun? Dude you live on such a black and white world
- fauigerzigerk 5y ago
  Because operating systems don‘t support seamless and secure distribution of cross platform software. Web browsers are currently the only secure sandbox we have.
  - croes 5y ago
    Secure sandbox? Are you kidding?
    - WickyNilliams 5y ago
      What other platform allows arbitrary code execution like the Web does? We have billions of Internet users yet actual security issues are few and far between. It's remarkably safe and secure given the scale
      - 5y ago
akmittal 5y ago
it is working for me, stuck on "Running start command" Anyone having same issue?
al2o3cr 5y ago
Tried this out with a basic set of React deps in package.json Reloading now spends 10+s "installing dependencies" - pretty quick, and the UI is still interactive. Also, Chrome has two "Google Chrome helper" processes each sitting at 550MB+ RSS. I'm not sure if "no node_modules black hole on disk" is quite as compelling if the black hole has merely been relocated to RAM.

387 points by bpierre 5y ago

Hi all- CEO of StackBlitz/author of this blog post here. Happy to answer any questions! (Also, thanks for posting this bpierre!)

simonw 5y ago
Is this all open source? I'm fascinated in learning more about how you run a web server with this - the article says "WebContainers include a virtualized TCP network stack that's mapped to your browser's ServiceWorker API" but I'd love to understand a bit more about how that works. Since this is all done with WebAssembly are you planning on targeting other stacks such as Python? The amount of time I lose helping other people getting their Python development environments to work remains horrifying.
- ericmsimons 5y ago
  We'll be open sourcing core parts of WebContainer as we move towards GA. We have some additional technical info in our core WG repo: https://github.com/stackblitz/webcontainer-core https://github.com/stackblitz/webcontainer-core We also did an hour long podcast a few months back that goes into pretty deep detail: https://www.youtube.com/watch?v=5F9qH-ea5Qk https://www.youtube.com/watch?v=5F9qH-ea5Qk
bpierre 5y ago
You’re welcome :) Any plan to work towards supporting Firefox & other browsers?
- ob1gman 5y ago
  Yes definitely! Firefox compatibility is close to done and will ship soon. Waiting on Safari to ship some additional features. They don’t share timelines so it’s unclear at this point.
  - bpierre 5y ago
    That’s great to hear! Looking forward to it.
waheoo 5y ago
That isn't a blog post. That's an ad. Can you link to the blog post where you actually discuss literally any of the technical stack in any depth further than one sentence of wow more pizzaz much fast.
skybrian 5y ago
Could you point us to an introduction to how operating system concepts get mapped to browser concepts? It sounds like each native binary gets compiled to a WebAssembly binary, but how do they communicate? How are the network and file system implemented? Are parts of the file system persistent? How does a system call work?
- ericmsimons 5y ago
  Great questions- we have some additional technical info in our core WG repo: https://github.com/stackblitz/webcontainer-core https://github.com/stackblitz/webcontainer-core We also did an hour long podcast a few months back that goes into pretty deep detail: https://www.youtube.com/watch?v=5F9qH-ea5Qk https://www.youtube.com/watch?v=5F9qH-ea5Qk
yuri91 5y ago
Is node/v8 compiled to Wasm entirely, or are you using the browser's JS engine with polyfills for node's APIs? Or something in between?
stephenbuilds 5y ago
First, congratulations! This is an astonishing advancement. I found this on the GH repo: "Is this open source? Today no, but the API will be open source to developers at GA." I'm confused by what "the API" is, exactly. Is WebContainers a technology you plan to make available for others to use node, in the browser, in their own apps?
- nailer 5y ago
  > "Is this open source? Today no, but the API will be open source to developers at GA." If they make it Open Source, Microsoft will add it to VScode and eat their lunch. If they don't, developers might be afraid of lock in. Best exit for them is to just grow users and not make a decision either way until they get acquired by Github (aka Microsoft) and folded into VScode.
  - crazypython 5y ago
    > If they make it Open Source, Microsoft will add it to VScode and eat their lunch. Put the code under the GPL so no one can use it to build proprietary software. Visual Studio Code contains proprietary components, so this would prevent that.
apignotti 5y ago
Hi, CTO of LeaningTech here. Congratulations for the highly polished demo. I think you might find interesting this one we did months ago: https://repl.leaningtech.com/?nodejs https://repl.leaningtech.com/?nodejs
bouh 5y ago
hey very nice work ! do you think that a docker.js running containers in the browser is something that could become a reality soon if we follow you line of work ?
drew-y 5y ago
Can you expand on the capabilities of the terminal? What sort of operations can be done from the terminal? It looks like the shell is JSH. Is this an in house shell? Is there any more information on it?
worik 5y ago
Why do this at all? With all the security and design problems of Node.js, when there are actually secure and reliable ways (harder ways, yes. Security and reliability are hard) to do all of this. Why?
miohtama 5y ago
How much of this is JavaScript specific and how much could be expanded to “any” programming language?
Galaco 5y ago
> Faster than your local environment. Builds complete up to 20% faster and package installs complete >= 5x faster than yarn/npm. Above is a quote from the post. I feel like this is a stupid question, but how can running yarn/npm in a browser on my machine be faster than running yarn/npm on my machine? Particularly when each page load runs a fresh npm/yarn install? Nonetheless, this is a incredible piece of software that i'll be following closely
- altano 5y ago
  I was wondering the same thing
- grassthehopper 5y ago
  I'm also curious about this
- giorgioz 5y ago
  I've also asked myself this question. I think the comparison is not with a local environment but rather with running node/yarn/npm on a remote virtual machine/ci. This is my hypothesis, I have no proof that's what they meant.
  - dspillett 5y ago
    I'm wondering if there is more happening in-memory, even if the project files and modules themselves are on-disk (accessed via FileSystemAPI) the vscode/node/other bits including temporary files may be held in RAM once initially loaded and never swapped out. If that is the reason, then if your machine becomes memory constrained, the performance will drop through the floor quicker than with full-local installs. It could be a mix of this and your suggestion (lower network latency related bottlenecks than experienced with non-local deployment).
supermatt 5y ago
You mention being able to use the debugger. How do I do this? The docs are very poor. I dont see any way to set breakpoints. When i use a debugger statement and open inspector it breaks on transpiled/packaged code (its different to the actual file). This is a deal breaker for me at present. Am I doing something wrong? (Using the http server template)
imvetri 5y ago
Hi, Can you share how it is working under the hood ?
Scottttttt 5y ago
This pretty cool stuff. I am wondering about another use case for this type of thing. We have a CLI tool built with node.js, could we build one of these containers with with the CLI tool setup and expose just a terminal with access to the local file system?

sigmonsays 5y ago

Are any demo applications created? What is memory usage like for a simple application?

ericmsimons 5y ago
Yep- if you go to https://stackblitz.com https://stackblitz.com you can start a Next.js, GraphQL, etc dev environment in one click.
- waheoo 5y ago
  ... in chrome.
  - wongarsu 5y ago
    You are right. In Firefox I get "StackBlitz v2 Beta currently works in Chrome and Chromium-based browsers. We’re hoping to add support for more browsers as they implement the necessary Web Platform features."
  - holtalanm 5y ago
    I'm not sure what the complaint is here. Isn't it something like 90% of the browser market is chromium-based, now that edge is on the bandwagon? Supporting chrome/chromium doesn't seem like a bad place to start with a prototype with that kind of potential adoption.

arodyginc 5y ago

Isn't it awful? Now each smart ass web developer will start sending down scripts with nodejs to enable 'rich' user experience

nyadesu 5y ago
I think that wouldn't be a problem, as long as people get used to containerize what they write
- beebeepka 5y ago
  Well, it's called WebContainers. One would hope everything is containerised
educaysean 5y ago
Oh no! The user experience must surely not be enriched! Damn those smart ass web developers who aren't like the rest of us that care about code quality and engineering principles!

lucasmullens 5y ago

> Faster than your local environment. Builds complete up to 20% faster and package installs complete >= 5x faster than yarn/npm. How? Isn't this using npm?

ericmsimons 5y ago
It's using a custom npm client we've built called Turbo. You can read more about the v1 version of Turbo here: https://medium.com/stackblitz-blog/introducing-turbo-5x-faster-than-yarn-npm-and-runs-natively-in-browser-cc2c39715403 https://medium.com/stackblitz-blog/introducing-turbo-5x-fast... We haven't released any more info on Turbo v2 yet but will soon.
schlotzisk 5y ago
r/murderedbywords

huggyfee 5y ago

I'm trying to get my head around how the networking of it works. Is local.webcontainer.io being overridden somehow on the browser like a hosts file might do? Trying to figure out how I'm hitting that URL from another tab

1023bytes 5y ago
Must be some sort of tunneling, because it works outside the browser too
- NoInkling 5y ago
  If by "works" you mean "serves up an error page". It's a standard domain, not real localhost, and it needs the service worker from the editor page running to work properly.
goatcheese13 5y ago
There is a service worker registered on the domain name, for example https://nextjs-agaw8i--3000.local.webcontainer.io/ https://nextjs-agaw8i--3000.local.webcontainer.io/, then when you visit this URL in another tab it basically shares the service worker from the stackblitz tab.

waheoo 5y ago

Title needs fixing. This is chrome only.

ericmsimons 5y ago
For now. It works in Firefox today (minor issues keeping it feature flagged for now) and Safari is close to shipping WASM Threads, so this will likely work on all major browsers by EOY.

ttt0 5y ago

I was kinda hoping it was something crazy like nodejs with v8 engine compiled to wasm lol

ericmsimons 5y ago
Did you read the post? You might be pleasantly surprised :)
- ridiculous_fish 5y ago
  Can you please go into more detail as to what exactly is being compiled to wasm? The post does not describe it. In particular there seems to be a lot of confusion about whether the JS engine itself is running in wasm or not.
  - azakai 5y ago
    The largest wasm file I see downloaded on the website is 440K. Disassembling it, it seems to contain a bunch of libc-like filesystem code, and was built using the rust toolchain. So it doesn't look like v8 has been compiled to wasm here. Rather, I assume they compiled a library or two, but otherwise they use the JS VM in the browser, and they've ported the Node.js runtime scripts to that environment. That doesn't take anything away from the achievement here - it's really impressive! It's better to use the VM in the browser, if you can get those runtime scripts portable enough, which from other comments it seems like the answer is (or will be) yes.

beebeepka 5y ago

I am definitely going to try this first thing tomorrow

mywittyname 5y ago

Alright, so you can create an IDE in the browser, but, what else? I'm just not seeing the value in running servers in your browser. Presumably, most sites will still need to connect to a remote back-end services to get at data and whatnot, and that back-end isn't going to be running locally on a customer's web browser.

chrisco255 5y ago
I don't know about your dev environment, but in mine we run server code separate from web code. So you could toggle your local WebContainer to access either localhost:3001 or a remote branch, staging or prod environment for whatever server you wanted to test against.

nynx 5y ago

Someday, I'd like to see Wasi-based webassembly containers. It'd be awesome to spin up a sandboxed shell with file access in a webpage.

gameswithgo 5y ago
why do you want to spin up a shell with file access in a webpage?
- Spivak 5y ago
  So you can open up your local project directory in your browser-based IDE and have it work like you expect.
  - nynx 5y ago
    My wish was actually to be able to spin up a shell locally on a github repo that pulls stuff over lazily.
ericmsimons 5y ago
You can actually do this with WebContainers today :) Try it out here: https://stackblitz.com/fork/node https://stackblitz.com/fork/node Full WASI support in WebContainer is landing in the next 1-2 months.

SahAssar 5y ago

What about this is "native"? The page says it is "running natively" but also says "All code execution happens inside the browser's security sandbox". Is wasm in a browser somehow considered native now?

deleted 5y ago
[deleted]
easton 5y ago
I interpreted it as “native to the browser”, which is a bit silly when you think about it, but makes sense when opposed to “running remotely”.
- wongarsu 5y ago
  Isn't the opposite to "running remotely" "running locally"? Meanwhile if pressed for the opposite of "running native" I would answer "running virtualized".
hn8788 5y ago
The web devs where I work have started calling pretty much everything "native" as long as it interacts with the host in some way since people assume it means fast.
ThomasBHickey 5y ago
WASM can be compiled to native code.

chadlavi 5y ago

"You want it to be a mini operating system" I don't think this is universally true.

philipyoungg 5y ago

Does this mean we can use sqlite natively on the browser now?

ericmsimons 5y ago
Yes. One of our engineers has gotten sqlite to run natively in WebContainer. Will be releasing as OSS in the next few weeks!
- philipyoungg 5y ago
  That's pure orgasm. Thank you for this!
- egeozcan 5y ago
  Great! Are there any tickets on this we can follow?
chx 5y ago
note https://news.ycombinator.com/item?id=27016630 https://news.ycombinator.com/item?id=27016630
azakai 5y ago
SQLite has been ported to JS (and wasm) for some time, https://sql.js.org/#/ https://sql.js.org/#/ https://github.com/sql-js/sql.js/ https://github.com/sql-js/sql.js/

lxe 5y ago

Wow. How? Node.JS needs a "full-blown" OS to compile and run... right? And that's not something you could emulate efficiently using wasm? Right?...?

bellyfullofbac 5y ago
People have made Linux run on the browser, so... Although I don't think this is what they did here. Man, the yet another layer they've made between code and the CPU makes me uncomfortable. Imagine finding a bug and going through 20 layers to troubleshoot it. Also: https://www.theregister.com/2017/03/23/cursor_devours_cpu_cycles_ms_code_editor/ https://www.theregister.com/2017/03/23/cursor_devours_cpu_cy...
ericmsimons 5y ago
Great question :) We have some additional technical info in our core WG repo: https://github.com/stackblitz/webcontainer-core https://github.com/stackblitz/webcontainer-core We also did an hour long podcast a few months back that goes into pretty deep detail: https://www.youtube.com/watch?v=5F9qH-ea5Qk https://www.youtube.com/watch?v=5F9qH-ea5Qk
brabel 5y ago
node.js, as any other native Linux/Windows/Mac application, talks to the OS via a system API. You can emulate that API using WASM, mapping I/O to browser APIs, which is why they mention network is implemented via service workers, for example. File I/O can be mapped to IndexDB... Threads can also be mapped to service workers, I guess... and so on. emscripten[1] did this a long time ago for C, which is how a bunch of native applications have already been ported to run on the browser. webcontainers[2] seem to do a similar thing but focused on exposing the browser API to the native apps in a way that integrates well with the JS environment. [1] https://emscripten.org/ https://emscripten.org/ [2] https://github.com/stackblitz/webcontainer-core https://github.com/stackblitz/webcontainer-core

oolonthegreat 5y ago

totally lost newbie here: but what is the difference between running javascript on the browser and running node.js on the browser?

asmos7 5y ago
basically node exposes all these other APIs like reading a file from disk. Browser also has APIs like detecting when the page is fully loaded that wouldn't be available on Node. What JavaScript syntax is supported can also vary between Node and browsers.
- des1nderlase 5y ago
  WASM cannot magically load from disk, there is browser protection, right?
  - Ajedi32 5y ago
    It can't access the file system, but it could implement an API that emulates a file system inside the browser sandbox. Presumably that's what they're doing here.
    - kllrnohj 5y ago
      But you can do that same API emulation in regular browser JavaScript, too. What's the WASM intermediate buying here?
      - maple3142 5y ago
        I think it is more complicated to emulate those api in normal browser environment compared to emulating some OS api for running node.js.
        kllrnohj 5y ago
        Why? It's literally JavaScript on both sides - what's complicated here?

benatkin 5y ago

Yawn. It isn't open source. It has a name, WebContainers, that implies it's based on the web, but it's designed around Node.js which isn't built on browser technologies as much as something like Skypack or Deno. It also seems like it's going to be a memory, disk, and CPU hog, and that it's going to be pretty complex. I like where Skypack is headed and this seems like the opposite direction. It's pretty cool but it seems like they're trying to create a lot of hype around it.

testingm 5y ago
Soothe your heart
holtalanm 5y ago
> I like where Skypack is headed and this seems like the opposite direction. I did a quick google search because I had never heard of Skypack. Skypack seems to be a far cry away from what WebContainers is claiming to do. Like, they're completely different products. I guess I don't understand why you're even comparing the two.
- NotEvil 5y ago
  I think he means deno+skypack

Spivak 5y ago

The future is going to be wild. You could bundle V8 compiled to WASM with a graphics toolkit that uses a syscall like interface to access a canvas backed by WebGPU? At that point you could replace the browser with ZINE (Zine is not Electron) and run webapps natively just how WINE works.

syrusakbary 5y ago

I think very few people will realize the systemic effects that a demo like this entails. Very, very good work StackBlitz team!

anton96 5y ago
If their base is node, that implies we could start to see many electron.js app being ported to the browser
- devoutsalsa 5y ago
  ELI5... why would you want to run an Electon app in the browser? Isn't that just a website at that point? EDIT: Upon closer inspection, it looks like this is an online IDE meant to mimic a desktop environment. I don't know if there's any demand for that, but sure, why not. I'm sure someone will come up w/ a reason to run WebAssembly in a jQuery plugin, too.
  - mlok 5y ago
    I guess that running in the browser it doesn't need to be installed on the machine. Or a desktop-only Electron App would be usable from a mobile phone browser etc.
  - Ajedi32 5y ago
    Backwards compatibility with existing Electron apps I guess? Otherwise yeah, a native PWA would be better.
hagg3n 5y ago
Funny you say that. I'm usually really skeptical of the next big thing but I felt differently about this, just can't put my finger on it.
- ericmsimons 5y ago
  This really means a lot. I'm glad our work & writing came across genuine.

apignotti 5y ago

As far as I understand JS code is being run natively in the browser. Node has been hooked to the native engine, so V8 is not involved. At LeaningTech we have since several months been able to run nodejs, but also python and ruby using our Wasm based x86 VM (CheerpX), the demo is available here: https://repl.leaningtech.com/?nodejs https://repl.leaningtech.com/?nodejs With our solution the full Linux x86 binary of nodejs is running including the whole of V8 and its JIT engine. Of course fully client side.

lsb 5y ago
> We are working on CheerpX, but it’s not yet available generally. If you are curious and want to know more, stay tuned, or get in touch! How close is CheerpX to getting (for example) an app that uses a PyTorch model running in the browser? :)
- apignotti 5y ago
  Not an expert on PyTorch in particular, the python + native (if any) components would work right now. If GPU acceleration is required some way to bridge into WebGL or (much better) WebGPU would need to be engineered, certainly doable but not existing right now.
  - lsb 5y ago
    Except for figuring out Pytorch's blas, the rest should be pretty straightforward to use CPU-only, I'd love to use that to (even pay to) compile some side projects to wasm apps in the browser :)
ampeter 5y ago
> As far as I understand JS code is being run natively in the browser. Node has been hooked to the native engine, so V8 is not involved. What is the "native engine" if not v8?
zamadatix 5y ago
It looks like the difference is you went for full x86 system call level emulation to handle existing binaries whereas stackblitz decided to build a container for things like Node compiled directly to WASM with no static assumptions of a base system. The latter approach with 1 less level of indirection should be much more efficient, as is evident by startup times of the 2 demos. Not to mention the ability to hook into things above the syscall level.

throwaway284534 5y ago

I used to teach web development and was always frustrated with just how much effort went into setting up a machine. It would be really nice if a developer could just include a script tag in their project that setup a TypeScript compiler inside service worker. I managed to get the basics down, even fixing relative import statements. Requests like localhost:3000/main.tsx would compile and cache on the fly. There were a few native file system issues I encountered that this would be perfect for!

tesnirnat 5y ago
How did you end up doing this? Do you mind sharing?
- throwaway284534 5y ago
  Excuse my mess but feel free to poke around: https://github.com/nirrius/my-server https://github.com/nirrius/my-server
Tommek 5y ago
Yes web developing is so hard... sudo apt install apache2 php libapache2-mod-php; vim /var/www/html/index.php
- wmichelin 5y ago
  I see you haven't done anything in 10 years
  - seanp2k2 5y ago
    PHP is actually pretty great these days, you should have a look at what modern PHP has become if you’ve been out of the loop for a while. Have a look at https://phptherightway.com/ https://phptherightway.com/ if you’re interested.
- phist_mcgee 5y ago
  That's like saying that driving a car is easy. Foot on gas. Hands on wheel. Drive to destination. Most things can be simplified to the raw essentials, doesn't mean you're going to achieve a result that people want or need.

sakekasi 5y ago

This is super cool! I think pairing this with the upcoming native support for modules and a CDN like skypack could lead to a truly powerful browser development experience. No bundlers and a full IDE? Maybe this could even mean that there's a chance for a some of the 'just fiddle with the page' experience to come back to the web! (/rainbows and unicorns)

_pdp_ 5y ago

I dig Web IDEs. I have been using Cloud9 (AWS) for the past 5-6 years.

namelosw 5y ago

Mind-blowing. The env spins fast. Maybe one day, smartphones and tablets are just browsers in hand.

skilesare 5y ago

I'd be super interested in seeing how much of this is really wasmified. I'd love to see if this could get running in a DFINITY Canister.

Ajedi32 5y ago

Wow, the PWA is really impressive. Honestly it's starting to get hard to tell the difference between this and Electron-based editors like VS Code. I'm really excited for integration with the File System Access API; that's the final puzzle piece I'd need to use something like this for serious work.

aberger 5y ago
You can checkout www.StackBlitz.com/local and give it a try! Still in Alpha, but should generally work for you :)
- rodolphoarruda 5y ago
  So it's 8 dollars for the astronaut plan. That's what I pay for robux to my kids, per week. It's jaw dropping to me how such advanced tech is made available at a single digit price. Thanks for sharing.
codazoda 5y ago
Me too and I was surprised to find that Chrome lists this as "ready" or "released" (I don't recall the exact term). I tried the example web based editor and found that the file system access API worked in Firefox too. I'm working on a note taking project right now that I think would be great as a web app, but I'd like to store the result in a flat text file and the file system access API looks like it will let me do exactly that.
- lioeters 5y ago
  > ..found that the file system access API worked in Firefox too For now, File System Access API seems to be available only in desktop Chromium browsers: Edge, Chrome, Opera. I believe Firefox has not implemented it yet. https://caniuse.com/native-filesystem-api https://caniuse.com/native-filesystem-api --- Mozilla's current position on the specs: > The ability to read and write from the filesystem is potentially very dangerous. We will need to carefully consider any solution in light of the security and privacy implications. We recognize that the spec authors take this issue seriously, but we are concerned that any solution will increase the risk of security incidents more than we are willing to tolerate. > Right now, there isn't enough detail in the specification to make an assessment of these risks, so we will defer our decision until we have more information. https://mozilla.github.io/standards-positions/#native-file-system https://mozilla.github.io/standards-positions/#native-file-s...

dheera 5y ago

Can we please call it NodeJS and stop calling it Node.js? It's not a .js file, and it's not written in JavaScript.

emteycz 5y ago
Names don't have any such requirements - but we should use them correctly. You don't rename Windows even though it's not a hole in the wall stuffed with glass.
- dheera 5y ago
  It's just irksome. I don't think Windows is a good analogy. More like if I called the OS "Windows.jpg". If you're going to use something that looks like a filename as a product name, then make sure that file actually exists and is in the expected format. D3.js --> good Angular.js --> good Node.js --> bad python3.py --> bad Windows.jpg --> bad Windows.exe --> okay (I don't use windows but I assume there's something of the sort)
  - emteycz 5y ago
    I agree it's not a great name - but IMHO using names incorrectly is even worse than bad naming.
  - codingdave 5y ago
    If you are going to get this pedantic, then why not also include *.com as bad, because that was a file type in DOS.
throwawaycuriou 5y ago
JavaScript is not a scripting language for Java.
tasogare 5y ago
My personal pet peeve is golang. No language is named like that. The language name is Go. Calling it golang because of the domain name of the project is like saying typescriptlang instead of Typescript.

e12e 5y ago

So... Two thoughts: this probably means we can run node in deno? Second: looks like js is catching up with smalltalk. JJust a shame the debugger is still rather crappy, and the browser/inspector only applies to a subset of widgets/controls (the html/css stuff, not the tab bar, address line, bookmarks menu etc..).

frankenst1 5y ago

I assume you still can't use UDP or bind to TCP sockets that are accessible outside of the browser?

bestest 5y ago
Quoting https://github.com/stackblitz/webcontainer-core https://github.com/stackblitz/webcontainer-core: > 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
truth_seeker 5y ago
TCP socket to Websocket :- https://stackoverflow.com/questions/14928222/tcp-socket-to-websocket https://stackoverflow.com/questions/14928222/tcp-socket-to-w...

brabel 5y ago

Everyone thought WASM would enable developers to write code in any language they wanted (with type checking and higher performance) and deploy it on the web. JS Developers come in: so we can compile node.js to WASM and run that in the browser?! Yay!! Now we can have backend JS running in the browser alongside browser JS! Jokes aside: this is actually quite interesting, the demo is very impressive (except for the "only works in Chromium-based browser" message on the next.js demo, where the preview should be - despite Mozzila being one of the main WASM backers and Firefox having arguably the best WASM engine).

kevingadd 5y ago
Typically when you see stuff like this be Chromium-only, it's because Chromium has a bunch of non-standard/one-vendor-only stuff enabled in production builds and neither Firefox or Safari have it enabled (or implemented at all). A few examples include Bluetooth, MIDI and USB.
- pantelisk 5y ago
  I don't understand why you are downvoted. Filesystem access is another big one! Chrome has the technological advantage and sports an enormous kitchen sink of features. One has to make the hard decision, work on a concept that will work only on one browser, try to cut corners with graceful (or crippling) degradation, or wait potentially a long time until a spec is standardized and implemented. The latter may result in others hitting the market sooner, so it is understandable why we end up with web-apps that function in a single browser only. Hopefully this improves in the future.
  - mr_toad 5y ago
    The down side is that some of these technologies never get standardised and eventually get dropped. Like NaCl and PNaCl.
    - WorldMaker 5y ago
      Or for an example that caused a lot more havoc comparatively: WebSQL.

atc 5y ago

No.

jeroenhd 5y ago

"StackBlitz v2 Beta currently works in Chrome and Chromium-based browsers. We’re hoping to add support for more browsers as they implement the necessary Web Platform features." Pretty useless, then. What features are missing? As far as I know Firefox was one of the major contributors to pushing WebASM to the web and has a superior WASM engine in many aspects. I'd be more interested in a post about what WebASM features are missing than an announcement that someone hacked Javascript into a browser.

dfabulich 5y ago
It looks like the problem isn't WASM features, but web I/O APIs, like the File System Access API.
- dmitriid 5y ago
  Many of the more "advanced APIs" are unlikely to be shipped in either Firefox or Safari because of security and privacy concerns. For example, Chrome released File System Access by defaul tin Chrome 86, on October 6, 2020. And yet, as late as August 2020 they were saying that they'd just got the spec in shape: https://github.com/mozilla/standards-positions/issues/154#issuecomment-668757669 https://github.com/mozilla/standards-positions/issues/154#is.... And there are still unresolved issues around actual security of the thing (that Chrome happily ignores). The "spec" itself lists 13 issues: https://wicg.github.io/file-system-access/ https://wicg.github.io/file-system-access/ And Safari won't implement it: https://lists.webkit.org/pipermail/webkit-dev/2020-August/031362.html https://lists.webkit.org/pipermail/webkit-dev/2020-August/03...
  - atatatat 5y ago
    If business PCs are running Microsoft Teams + Outlook PWAs on Edge (Chromium based), personal PCs as a majority are running Chrome/Chromium...I can't see why Apple wouldn't come to a compromise to treat PWAs with respect. It's not just about privacy of web APIs...it's about Apple's chokehold on iPhone users.
    - 5y ago

brundolf 5y ago

"Your scientists", etc

worik 5y ago

This is a really bad idea. Building on the really good work of the WASM folks, running Node.js, with all its design problems, over the top of it. I am forever astounded anew by the hubris and naivety of the Node.js crew. It is a example of "It is easier to write than read, easier to talk than listen, easier to build than design"

dfabulich 5y ago
You didn't say anything substantial here about why it's a bad idea. "Design problems." What design problems do you have in mind?

nightowl_games 5y ago

John Blow is going to lose his mind at this.

k__ 5y ago

I will certainly try this, but besides the debugger connection it seems more like a PR stunt, to be honest.

theflyinghorse 5y ago

Does this mean we can now have a SOA in the browser? True separation of concerns: Render code deal with writing to DOM, when data is needed it calls a node API proxy server which in tern interfaces with REST/grpc/graphql servers, then there's also auth service, and also a local (literally local) cache service. All in the browser. Damn.

pixel_tracing 5y ago

Web development is a big gigantic shit storm. Why can’t we use a real statically typed language without this JS shitty overhead, generate compiled binary and send that to users? I personally hate writing javascript

mssundaram 5y ago
Have you not heard of WASM? And while it's not exactly what you're asking for, what about Typescript?

TrispusAttucks 5y ago

Far out! But. Is there no end to our collective madness!

flowerlad 5y ago

To demonstrate the potential this needs a demo of a "middle-tier" service implemented in NodeJS. The service needs to talk to a MySQL database, and expose a Rest API to the web application. If that works that means many intranet applications can be server-less. Both the JavaScript app and the "middle-tier" runs in the browser, and the middle-tier talks to MySQL server which is also on the intranet. All you need is a file server to serve the static JS files.

dane-pgp 5y ago
If the middle-tier and the app are both written in JavaScript, and you're developing them both simultaneously in the browser, does it make sense for them to be communicating via REST any more? Wouldn't it make more sense for the app to send SQL prepared statements to the database (via a tiny standardised wrapper on the server to enforce per-user permissions based on the authenticated session)? It probably depends on whether other apps are requesting data from the same database, in which case it might make sense to convert from the relational model to JSON objects in a tier which exposes the objects over REST.
- flowerlad 5y ago
  > via a tiny standardised wrapper on the server That defeats the point of not having a server. The middle-tier should be written in Nodejs because it has drivers for relational databases such as MySQL.

ngcc_hk 5y ago

Server to server code instead of client to server code, expose db Api to “client” ... lots of think about.

sebastialonso 5y ago

Do I, as a user, have any possibility of protection against things like ads, or, cookie/tracking abuse with this? I'm really ignorant about this, so I don't known even if I'm doing the correct questions. It looks just like a canvas, there's "no" DOM.

Xavdidtheshadow 5y ago

This is a very cool project! I noticed that outgoing http requests don't seem to work (there's no `curl` and after installing a CLI tool I work on via npm (which worked like a charm!), the outgoing API calls it makes were blocked. I assume that's intentional at this stage. Is that changing in the future?

NoInkling 5y ago
Their repo implies that network requests are subject to the same-origin policy, since it's in a browser after all. If you open up devtools you will probably see complaints along those lines. In short: the endpoints you request need CORS enabled.

cookiengineer 5y ago

If it really runs inside the Browser: How did they implement adapters for networking and crypto/tls? I mean, a console is nice and all. But I'm highly sceptic as to how the filesystem and networking works, because fetch cannot be used to have dgram or tls/net sockets. And that is literally the primary reason nodejs exists.

scoopertrooper 5y ago
Part of the answer to your question: > WebContainers include a virtualized TCP network stack that's mapped to your browser's ServiceWorker API, enabling you to instantly create live Node.js servers on-demand that continue to work even when you go offline.
- cookiengineer 5y ago
  I was trying to refer to the simulated iframe that's the live preview...and probably uses the service worker's responses to emulate the behaviour rather than say, a real end-to-end http server pipeline. This sounds very likely like http module injection, so that the nodejs module isn't really doing what it thinks it does, but is using an injected API behind the scenes. Raw TCP is only available for Chrome Extensions, on Chrome OS, iirc. (Setting aside the lack of TLS or a real crypto module that isn't using the Browser's Web Crypto API approach)

inb4_cancelled 5y ago

This makes me want to quit webdev and never look back. Why the fuck are we recreating operating systems in the browser? We already have operating systems. We already have containers. We already have native code execution.

vijaybritto 5y ago
Why is this a problem? Why can't they try out new things?!
- inb4_cancelled 5y ago
  My problem with it is that most of the new stuff ends up in production and widely used for cargo-culting reasons.
ranguna 5y ago
For fun? Dude you live on such a black and white world
fauigerzigerk 5y ago
Because operating systems don‘t support seamless and secure distribution of cross platform software. Web browsers are currently the only secure sandbox we have.
- croes 5y ago
  Secure sandbox? Are you kidding?
  - WickyNilliams 5y ago
    What other platform allows arbitrary code execution like the Web does? We have billions of Internet users yet actual security issues are few and far between. It's remarkably safe and secure given the scale
    - 5y ago

akmittal 5y ago

it is working for me, stuck on "Running start command" Anyone having same issue?

al2o3cr 5y ago

Tried this out with a basic set of React deps in package.json Reloading now spends 10+s "installing dependencies" - pretty quick, and the UI is still interactive. Also, Chrome has two "Google Chrome helper" processes each sitting at 550MB+ RSS. I'm not sure if "no node_modules black hole on disk" is quite as compelling if the black hole has merely been relocated to RAM.