1287 library assets url

[DNR500]

related to issue: 1287

Summary

Configures Scratch library picker assets to load from the RPF CDN and pins editor-ui to the published @RaspberryPiFoundation/scratch-gui build that includes libraryAssetUrlTemplate support (scratch-editor code-classroom / #1287).

Project save/load assets are unchanged — they still use editor-api via assetHost / projectHost.

Changes

• Library asset URLs: REACT_APP_SCRATCH_LIBRARY_ASSET_URL_TEMPLATE (placeholder {assetPath}) wired through ScratchEditor → scratch-gui; CSP img-src derived at webpack build time.
• scratch-gui dependency: Replaced public @scratch/scratch-gui@^13.0.0 with @RaspberryPiFoundation/scratch-gui@13.7.3-code-classroom.20260522151700 from GitHub Packages; updated imports, webpack copy paths, and iframe externals.
• Local GitHub Packages auth: .npmrc, .yarnrc.yml npmScopes, README “Set a personal access token”, Docker Compose passes NPM_AUTH_TOKEN from the host shell.
• CI / deploy: REACT_APP_SCRATCH_LIBRARY_ASSET_URL_TEMPLATE set for yarn build (all deploy environments via deploy.yml default) and for Jest/Cypress in ci-cd.yml.
• Tests: ScratchEditor.test.jsx mocks env resolution so tests are stable; unit tests for resolveScratchLibraryAssetUrlTemplate.
• Docs: .env.example, README local scratch-editor linking updated for @RaspberryPiFoundation/scratch-gui.

Default library URL (all deployed envs)

https://editor-assets.raspberrypi.org/internalapi/asset/{assetPath}/get/

Unset locally → scratch-gui falls back to MIT CDN.

Developer setup

Create a classic personal access token with repo + read:packages (authorize SSO for RPF if required), set as NPM_AUTH_TOKEN in ~/.zshrc, then run yarn install. CI uses GITHUB_TOKEN + existing GPR setup-node config.

image-assets-loaded.mov

[DNR500]

Once merged we need to have something like following posted in a slack channel

For anyone using editor-ui for local development

I’ve just merged some work so that we are now using Scratch editor from our own private registry - it now pulls @RaspberryPiFoundation/scratch-gui from GitHub Packages.

You will need to do the following

1. Update your .env (copy from .env.example if needed) and add: REACT_APP_SCRATCH_LIBRARY_ASSET_URL_TEMPLATE='https://editor-assets.raspberrypi.org/internalapi/asset/{assetPath}/get/'
2. Local setup: you’ll need a GitHub personal access token (read:packages, SSO authorised for RPF) in your shell as NPM_AUTH_TOKEN before yarn install or docker compose up will work. Full steps are in editor-ui README.md → Install dependencies → Set a personal access token: https://github.com/RaspberryPiFoundation/editor-ui/blob/main/README.md#install-dependencies

[Copilot]

Pull request overview

Configures Scratch library picker asset URLs to load from the Raspberry Pi Foundation CDN by wiring a build-time URL template through ScratchEditor into the pinned @RaspberryPiFoundation/scratch-gui build, and updates CI/dev tooling to authenticate against GitHub Packages.

Changes:

• Pin @RaspberryPiFoundation/scratch-gui and update all imports/webpack copy & externals paths accordingly.
• Add REACT_APP_SCRATCH_LIBRARY_ASSET_URL_TEMPLATE support (incl. CSP origin derivation) and pass libraryAssetUrlTemplate into Scratch GUI.
• Add GitHub Packages auth configuration for local dev, Docker, and CI/deploy; add unit tests for env-template resolution.

Reviewed changes

Copilot reviewed 17 out of 18 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
yarn.lock	Locks the new @RaspberryPiFoundation/scratch-gui package and updated transitive Scratch deps.
package.json	Replaces @scratch/scratch-gui with pinned @RaspberryPiFoundation/scratch-gui.
webpack.config.js	Updates scratch-gui dist paths/externals and injects a derived CSP origin for library assets.
src/utils/scratchLibraryAssetUrl.js	Adds helper to resolve the library asset URL template from env (or undefined).
src/utils/scratchLibraryAssetUrl.test.js	Adds unit tests for URL-template resolution behavior.
src/scratch.html	Expands CSP directives to allow the derived library asset origin.
src/components/ScratchEditor/WrappedScratchGui.jsx	Switches Scratch GUI import to the RPF-scoped package.
src/components/ScratchEditor/ScratchIntegrationHOC.jsx	Switches action imports to the RPF-scoped scratch-gui package.
src/components/ScratchEditor/ScratchIntegrationHOC.test.jsx	Updates Jest mock to match the new scratch-gui package name.
src/components/ScratchEditor/ScratchEditor.jsx	Resolves env template and passes libraryAssetUrlTemplate to WrappedScratchGui.
src/components/ScratchEditor/ScratchEditor.test.jsx	Mocks template resolution and asserts the prop is passed (or unset).
README.md	Documents GitHub Packages token setup and local scratch-editor linking workflow.
.env.example	Documents REACT_APP_SCRATCH_LIBRARY_ASSET_URL_TEMPLATE and default behavior.
docker-compose.yml	Passes NPM_AUTH_TOKEN through to support installs from GitHub Packages in-container.
.yarnrc.yml	Configures npm scope registry/auth for GitHub Packages and pre-approves scratch-gui.
.npmrc	Adds npm registry + auth token wiring for the @RaspberryPiFoundation scope.
.github/workflows/deploy.yml	Plumbs the new env var into deploy builds and configures auth env vars for installs.
.github/workflows/ci-cd.yml	Adds packages: read permission and wires auth + template env for tests/Cypress.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[zetter-rpf]

Might be nice to add this to a seperate file and reference here since now the readme is getting very long

[zetter-rpf]

I don't feel strongly about this, but it might be simpler to put this in a constant in JS file rather than using an environment variable.

We don't need to vary this per environment, it's not secret, and we don't need to change it independently of deploys.

Having it as a env var just adds a little more setup that we'll have to do when deploying and locally.

[zetter-rpf]

Great work, and I appreciate the documentation for if we need to make other changes in a couple of months time.

I've added a couple of optional comments.