Astro Support

🌈 Feature

👋🏻 Hey, thanks for all your work on CodeSandbox—it is a great platform!

I'm a core maintainer of Astro and while it's still very early for our tool, we'd love to be able to use CodeSandbox to speed up our development cycle! Hosted issue reproductions and forkable documentation examples would be invaluable for our team.

The good news is, Astro mostly works in our template! There are a few features that would make this even better.

• Support for .astro files. Obviously this is a new format, but we have syntax highlighting and Intellisense with the official Astro extension. It would be great to at least pull in the syntax highlighting, if possible.
• Mapping .astro files to Current Module View. We have file-based routing based on the contents of the src/pages/**/* directory.
• HMR doesn't seem to work. Is there something we need to update on our end? I'm having trouble tracking it down, but our main server runs on port 3000 while our HMR websocket runs on 12321. I see this message in the browser console, but I know we're not sending any postMessage requests so I'm not sure where those are coming from.

​ Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://hugb3-12321.sse.codesandbox.io') does not match the recipient window's origin ('https://hugb3.sse.codesandbox.io').
C @ codesandbox.io/stati…39463744f3b89f84a:1

Please let me know if there's anything you need from our end—we'd love to be able to integrate CodeSanbox into our onboarding experience and documentation as much as possible.

Start with the linked Astro template and compare its behavior in CodeSandbox. Investigate support for .astro files, mapping src/pages/**/* to Current Module View, and HMR when the server uses port 3000 and the websocket uses port 12321. Done means syntax highlighting, module mapping, and HMR work for the described Astro setup.