Stackblitz (Cloud IDE) support

[thescientist13]

Overview

In the spirit of #626 / #576 and with the recently announced, and very exciting news of Web Containers, I thought I would give running Greenwood in Stackblitz and well, it's working pretty well already!

Was able to get greenwood-getting-started working!

And was able to start a new repo and commit to it from Stackblitz, all done entirely between stackblitz and github! 😮

Known Issues

Noticing a couple things, some related to Greenwood and some related to Stackblitz

Puppeteer / Prerendering

When Stackblitz runs npm install it shows an error about not being able to install some post install scripts for puppeteer, so for now you have to set prerender: false in greenwood.config.js

❯ npm install
warn preInstall No description field
┌ [1/3] 🔍  Resolving dependencies
└ Completed in 0.581s
┌ [2/3] 🚚  Fetching dependencies
└ Completed in 1.458s
┌ [3/3] 🔗  Linking dependencies
└ Completed in 0.84s
info security We found `install` scripts which turbo skips for security reasons. For more information see
https://turbo.sh/install-scripts.
└─ puppeteer@5.5.0

Seems to be confirmed by this section of the README re: postinstall so definitely a limitation for now, but hopefully #576 or #626 mitigates this. - https://github.com/stackblitz/webcontainer-core#limitations

Live Reload (Resolved *)

Couldn't get it to work reliably so something to keep an eye out for.

---

Seems to be working ok now, added a bunch of these characters in a row and it kept refreshing

Package.json is required

When loading a project via the Stackblitz GitHub URL, a package.json will be prompted for / required.

This can easily be done by just making a simple one in GitHub first, then do all the install commands from Stackblitz.. Maybe a feature request for them to run npm init in the absence of a package.json? 🥺 🙏

Found an issue for this - stackblitz/core#1393

Double Commits (Not Greenwood related)

When stackblitz commits, it commits twice in pairs.

1. One is the actual commit
2. The other one is just empty? 🤔

Looks like there is an issue being tracked for this - stackblitz/core#1466

[thescientist13]

Per this thread related to Astro support in Stackblitz, it looks like Stackblitz doesn't have full ESM support for NodeJS.
stackblitz/webcontainer-core#185 (comment)

So this may something to keep in mind when proceeding with #532

[thescientist13]

OK, so after merging #663 , things are looking a bit more organized / readable (IMO) but there is still the ugly Promise rejection

Would like to get that cleaned up ideally, though I suppose technically nothing to do with Stackblitz per se.

If you want to test, you can test it out here by running npm run build
https://stackblitz.com/github/ProjectEvergreen/greenwood-getting-started

[thescientist13]

Confirmation that indeed Puppeteer / Playright need additional support from the Stackblitz platform - stackblitz/webcontainer-core#247 (comment)

The problem here is that in order to run Playwright, or even Puppeteer, you need a binary that will not just work in the browser. We can't just execute any arbitrary binary in WebContainer as everything still runs in the browser.

[thescientist13]

Found another small issue with Stackblitz when saving / forking a project, the header image in the Getting Started repo breaks - stackblitz/webcontainer-core#493

[thescientist13]

So after the v0.25.0 release, it looks like Stackblitz doesn't support peerDependenciesMeta

Will need to file an issue with them.

[thescientist13]

I think with the work done in the v0.26.0 release, we can officially close this out. Now that Puppeteer is a plugin, I've documented the caveat there but otherwise WCC has no issues running on Stackblitz. 🥳

[thescientist13]

Just a heads up that as of the v0.28.0 release, which made Node 18 the minimum version, Greenwood does not work with Stackblitz anymore since Stackblitz only currently supports Node 16.x.

Added a comment to a tracking issue on their end - stackblitz/webcontainer-core#560 (comment)

[thescientist13]

And we're back!? 🎉
https://stackblitz.com/github/projectevergreen/greenwood-getting-started