Announcing WebContainers Astro support! 🛰

Today we are proud to share that our amazing engineering team have made all the necessary updates to the WebContainers platform – and the StackBlitz editor itself – needed to support Astro! 🚀 You can try it now!

Why are we hyped about Astro?

This minimalistic bundler provides a pretty unique approach to building websites. It’s focused on static HTML, striping all the JavaScript from your final build by default – and hence the fastest site loading experience possible! Great for your users, and SEO ❤️ (it will in fact even generate a sitemap and RSS feeds out of the box for you!)

But what if you do need some interactive features on your page? Instead of sending down all of the JavaScript that went into generated each page, Astro will only deliver and hydrate the components that actually are dynamic.

This approach is called Partial Hydration, and you can use it to design your website as a series of lightweight pages (with interactivity sprinkled in where needed) instead of a heavier JavaScript application.

For these interactive parts you can use React, Preact, Vue, Svelte, Web Components (in fact, you can use multiple at the same time!) – in JavaScript or TypeScript. And you can style it with Scoped CSS, CSS Modules, Sass, and others too!

And that’s not even all, so if you’re excited to learn more, visit the Astro Documentation.

The fact that StackBlitz runs Node.js entirely in your browser is mind-blowing.

Our users can now spin up any Astro starter project or example with StackBlitz in seconds!

Fred K. Schott Creator of Astro

How can you start?

• As in a local environment, you can run npm init astro command in any WebContainer project
• But the fastest way is to use this starter with all the files already prepared for you: https://stackblitz.com/fork/astro
• You can also visit the official Astro examples repository, choose one of the setups and click ”Open in StackBlitz” link in the example’s readme for a more specific starting point.

So what has changed on StackBlitz?

In order to support Astro, we needed to make several updates to WebContainers, including:

• An opt-in support for dynamic imports in CommonJS via ENABLE_CJS_IMPORTS. You can set it up in your .stackblitzrc file like this:

  {
    "env": {
      "ENABLE_CJS_IMPORTS": true
    }
  }

  We’ve decided to make it an opt-in since it’s not a very common feature, but can introduce a performance penalty. The good news is, it’s only a temporary workaround, and the need for it will be removed by the Astro team in the next few weeks.

• The possibility for ESBuild to work with synchronous compilation by turning off worker threads (The synchronous message passing is not supported by WebContainer as browsers don’t implement the necessary APIs for this. By turning worker threads off, it uses child processes)

• Fixing an encoding issue when passing data between processes (Data was encoded incorrectly when it came back from the ESBuild child process and then it was interpreted incorrectly)

We’ve also honed the editor to handle .astro files by adding the textmate grammar support and a dedicated file icon.

We also want to give a huge shout out and thank you to the Astro team for all their help in making this happen!

If you’re an OSS maintainer and want to enable WebContainer support for your framework, my DMs are open!