Fix local Scratch asset fixtures so the teapot project loads

[jamiebenstead]

Scratch requests assets at /internalapi/asset/./get/ with a trailing slash. Vite treats that as a directory request and 404s, so the local fixtures never loaded and sprites rendered as broken images.

Add a dev/preview middleware that serves the fixture file at the same path without the trailing slash, and set the content type from the md5ext — the fixture file is named get with no extension, so Vite sent it empty.

Also add the Stage backdrop fixture (cd21514d...svg), which was never committed. Copied from scratch-gui's own default-project.

No production impact: the middleware only defines configureServer and configurePreviewServer, so none of it is emitted into the build. The new fixture does ship, since public/ is copied to build/, but that matches the teapot fixture already tracked there. Nothing reads these paths in production — Scratch takes its asset host from REACT_APP_API_ENDPOINT, which points at editor-api on a different origin, and nginx serves no /api route.

[Copilot]

🔵 Needs a closer look

Add coverage confirming the fixture request and image load succeed.

Pull request overview

Fixes local Scratch asset loading by adding Vite dev/preview middleware and the missing stage backdrop fixture.

Changes:

• Serves trailing-slash asset requests with correct MIME types.
• Enables fixture loading in development and preview.
• Adds the default stage backdrop SVG.

File summaries

File	Summary
vite.config.js	Adds Scratch asset fixture middleware.
public/api/scratch/assets/internalapi/asset/cd21514d0531fdffb22204e0ec5ed84a.svg/get	Adds the missing backdrop fixture.

An E2E assertion should verify the trailing-slash asset request and successful image loading.

Review details

Suppressed comments (1)

vite.config.js:103

• This is the behavior being fixed, but the existing Scratch E2E coverage only checks that the teapot UI renders and never verifies that the costume/backdrop asset request succeeds or has a usable image response. A regression in the /get/ matching, fixture lookup, or MIME header would therefore pass CI while returning broken images again; add an E2E assertion for the fixture request (including the trailing slash) and/or the loaded image dimensions.

const scratchAssetFixtureMiddleware = (req, res, next) => {
  const url = decodeURIComponent((req.url || "").split("?")[0]);
  if (!url.startsWith(scratchAssetUrlPrefix) || !url.endsWith("/get/")) {
    return next();
  }

  const assetName = url.slice(scratchAssetUrlPrefix.length, -"/get/".length);
  const filePath = path.resolve(scratchAssetFixtureRoot, assetName, "get");

• Files reviewed: 2/2 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.