From edd96f50bd770c14fe03f21324b58fa2eb9aacf5 Mon Sep 17 00:00:00 2001
From: Chris Zetter <253059100+zetter-rpf@users.noreply.github.com>
Date: Tue, 24 Feb 2026 16:14:48 +0000
Subject: [PATCH 1/7] Make naming of api call handler arguments clearer

Before it call the third argument 'headers' when they are not headers, but a config object that may have a headers key.
---
 src/utils/apiCallHandler.js | 42 +++++++++++++++++--------------------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/utils/apiCallHandler.js b/src/utils/apiCallHandler.js
index 5b1dab933..7c7c09c11 100644
--- a/src/utils/apiCallHandler.js
+++ b/src/utils/apiCallHandler.js
@@ -4,26 +4,24 @@ import omit from "lodash/omit";
 const ApiCallHandler = ({ reactAppApiEndpoint }) => {
   const host = reactAppApiEndpoint;
 
-  const get = async (url, headers) => {
-    return await axios.get(url, headers);
+  const get = async (url, config) => {
+    return await axios.get(url, config);
   };
 
-  const post = async (url, body, headers) => {
-    return await axios.post(url, body, headers);
+  const post = async (url, body, config) => {
+    return await axios.post(url, body, config);
   };
 
-  const put = async (url, body, headers) => {
-    return await axios.put(url, body, headers);
+  const put = async (url, body, config) => {
+    return await axios.put(url, body, config);
   };
 
   const headers = (accessToken) => {
-    let headersHash;
     if (accessToken) {
-      headersHash = { Accept: "application/json", Authorization: accessToken };
+      return { Accept: "application/json", Authorization: accessToken };
     } else {
-      headersHash = { Accept: "application/json" };
+      return { Accept: "application/json" };
     }
-    return { headers: headersHash };
   };
 
   const createOrUpdateProject = async (projectWithUserId, accessToken) => {
@@ -32,36 +30,34 @@ const ApiCallHandler = ({ reactAppApiEndpoint }) => {
       return await post(
         `${host}/api/projects`,
         { project },
-        headers(accessToken),
+        { headers: headers(accessToken) },
       );
     } else {
       return await put(
         `${host}/api/projects/${project.identifier}`,
         { project },
-        headers(accessToken),
+        { headers: headers(accessToken) },
       );
     }
   };
 
   const deleteProject = async (identifier, accessToken) => {
-    return await axios.delete(
-      `${host}/api/projects/${identifier}`,
-      headers(accessToken),
-    );
+    return await axios.delete(`${host}/api/projects/${identifier}`, {
+      headers: headers(accessToken),
+    });
   };
 
   const loadRemix = async (projectIdentifier, accessToken) => {
-    return await get(
-      `${host}/api/projects/${projectIdentifier}/remix`,
-      headers(accessToken),
-    );
+    return await get(`${host}/api/projects/${projectIdentifier}/remix`, {
+      headers: headers(accessToken),
+    });
   };
 
   const createRemix = async (project, accessToken) => {
     return await post(
       `${host}/api/projects/${project.identifier}/remix`,
       { project },
-      headers(accessToken),
+      { headers: headers(accessToken) },
     );
   };
 
@@ -69,7 +65,7 @@ const ApiCallHandler = ({ reactAppApiEndpoint }) => {
     const queryString = locale ? `?locale=${locale}` : "";
     return await get(
       `${host}/api/projects/${projectIdentifier}${queryString}`,
-      headers(accessToken),
+      { headers: headers(accessToken) },
     );
   };
 
@@ -77,7 +73,7 @@ const ApiCallHandler = ({ reactAppApiEndpoint }) => {
     const queryString = locale ? `?locale=${locale}` : "";
     return await get(
       `${host}/api/projects/${assetsIdentifier}/images${queryString}`,
-      headers(accessToken),
+      { headers: headers(accessToken) },
     );
   };
 

From 1d86e0fc22df0ba92f918591b791ee1caa3d10d4 Mon Sep 17 00:00:00 2001
From: Chris Zetter <253059100+zetter-rpf@users.noreply.github.com>
Date: Thu, 26 Feb 2026 16:10:35 +0000
Subject: [PATCH 2/7] Allow the setting of cookies when loading projects

This is to allow us to drop a cookie that can be used to authorize requests made by Scratch.

Using withCredentials allows cookies to be set in the request response.
---
 src/utils/apiCallHandler.js      | 2 +-
 src/utils/apiCallHandler.test.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/utils/apiCallHandler.js b/src/utils/apiCallHandler.js
index 7c7c09c11..550978f7b 100644
--- a/src/utils/apiCallHandler.js
+++ b/src/utils/apiCallHandler.js
@@ -65,7 +65,7 @@ const ApiCallHandler = ({ reactAppApiEndpoint }) => {
     const queryString = locale ? `?locale=${locale}` : "";
     return await get(
       `${host}/api/projects/${projectIdentifier}${queryString}`,
-      { headers: headers(accessToken) },
+      { headers: headers(accessToken), withCredentials: true },
     );
   };
 
diff --git a/src/utils/apiCallHandler.test.js b/src/utils/apiCallHandler.test.js
index aff8cf0c7..d478e73fa 100644
--- a/src/utils/apiCallHandler.test.js
+++ b/src/utils/apiCallHandler.test.js
@@ -105,7 +105,7 @@ describe("Testing project API calls", () => {
     await readProject(projectIdentifier);
     expect(axios.get).toHaveBeenCalledWith(
       `${host}/api/projects/${projectIdentifier}`,
-      defaultHeaders,
+      { ...defaultHeaders, withCredentials: true },
     );
   });
 
@@ -117,7 +117,7 @@ describe("Testing project API calls", () => {
     await readProject(projectIdentifier, locale);
     expect(axios.get).toHaveBeenCalledWith(
       `${host}/api/projects/${projectIdentifier}?locale=${locale}`,
-      defaultHeaders,
+      { ...defaultHeaders, withCredentials: true },
     );
   });
 
@@ -128,7 +128,7 @@ describe("Testing project API calls", () => {
     await readProject(projectIdentifier, null, accessToken);
     expect(axios.get).toHaveBeenCalledWith(
       `${host}/api/projects/${projectIdentifier}`,
-      authHeaders,
+      { ...authHeaders, withCredentials: true },
     );
   });
 

From 8cc8625fce1146d841833f90bf51d76a9f0df41c Mon Sep 17 00:00:00 2001
From: Chris Zetter <253059100+zetter-rpf@users.noreply.github.com>
Date: Thu, 26 Feb 2026 16:32:08 +0000
Subject: [PATCH 3/7] Make the test page work whatever the host

I made set up my projects locally to be served from *.rpfdev.com and this was a small thing that caused me some confusing by sending me back to the wrong host.
---
 public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 1dbfdf1f4..af22667d6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,4 +1,4 @@
 <h1>You may be looking for...</h1>
 <ul>
-  <li>Web Component test page <a href="http://localhost:3011/web-component.html">http://localhost:3011/web-component.html</a></li>
+  <li>Web Component test page <a href="/web-component.html">/web-component.html</a></li>
 </ul>

From 97334e2125c5dc53d8111df3da7a02367846aa40 Mon Sep 17 00:00:00 2001
From: Chris Zetter <253059100+zetter-rpf@users.noreply.github.com>
Date: Thu, 26 Feb 2026 17:05:43 +0000
Subject: [PATCH 4/7] Set up scratch to use the new API routes

As part of this I've passed the project id and api url as params into the iframe.

I've used a seperate param to the existing api endpoint so it can be configured independently. This is useful for testing scratch locally in the editor UI without a dependency on the api project.
---
 .../Editor/Project/ScratchContainer.jsx       | 18 +++++++-
 .../Editor/Project/ScratchContainer.test.js   | 44 +++++++++++++++++++
 src/containers/WebComponentLoader.jsx         |  6 +++
 src/containers/WebComponentLoader.test.js     | 40 +++++++++++++++++
 src/redux/EditorSlice.js                      |  4 ++
 src/scratch.jsx                               |  9 ++--
 src/web-component.js                          |  1 +
 webpack.config.js                             |  4 +-
 8 files changed, 119 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Editor/Project/ScratchContainer.test.js

diff --git a/src/components/Editor/Project/ScratchContainer.jsx b/src/components/Editor/Project/ScratchContainer.jsx
index bf6f5f2d9..4b3f909ef 100644
--- a/src/components/Editor/Project/ScratchContainer.jsx
+++ b/src/components/Editor/Project/ScratchContainer.jsx
@@ -1,9 +1,25 @@
 import React from "react";
+import { useSelector } from "react-redux";
 
 export default function ScratchContainer() {
+  const projectIdentifier = useSelector(
+    (state) => state.editor.project.identifier,
+  );
+  const scratchApiEndpoint = useSelector(
+    (state) => state.editor.scratchApiEndpoint,
+  );
+
+  const queryParams = new URLSearchParams();
+  queryParams.set("project_id", projectIdentifier);
+  queryParams.set("api_url", scratchApiEndpoint);
+
+  const iframeSrcUrl = `${
+    process.env.ASSETS_URL
+  }/scratch.html?${queryParams.toString()}`;
+
   return (
     <iframe
-      src={`${process.env.ASSETS_URL}/scratch.html`}
+      src={iframeSrcUrl}
       title={"Scratch"}
       style={{
         width: "100%",
diff --git a/src/components/Editor/Project/ScratchContainer.test.js b/src/components/Editor/Project/ScratchContainer.test.js
new file mode 100644
index 000000000..065c664eb
--- /dev/null
+++ b/src/components/Editor/Project/ScratchContainer.test.js
@@ -0,0 +1,44 @@
+import configureStore from "redux-mock-store";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { Provider } from "react-redux";
+import ScratchContainer from "./ScratchContainer";
+
+describe("ScratchContainer", () => {
+  let originalAssetsUrl;
+
+  beforeEach(() => {
+    originalAssetsUrl = process.env.ASSETS_URL;
+    process.env.ASSETS_URL = "https://example.com";
+  });
+
+  afterEach(() => {
+    process.env.ASSETS_URL = originalAssetsUrl;
+  });
+
+  test("renders iframe with src built from project_id and api_url", () => {
+    const mockStore = configureStore([]);
+    const store = mockStore({
+      editor: {
+        project: {
+          identifier: "project-123",
+        },
+        scratchApiEndpoint: "https://api.example.com/v1",
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <ScratchContainer />
+      </Provider>,
+    );
+
+    const iframe = screen.getByTitle("Scratch");
+    expect(iframe).toBeInTheDocument();
+
+    const url = new URL(iframe.getAttribute("src"));
+    expect(url.pathname).toBe("/scratch.html");
+    expect(url.searchParams.get("project_id")).toBe("project-123");
+    expect(url.searchParams.get("api_url")).toBe("https://api.example.com/v1");
+  });
+});
diff --git a/src/containers/WebComponentLoader.jsx b/src/containers/WebComponentLoader.jsx
index 1235aa6c1..9d8a3450e 100644
--- a/src/containers/WebComponentLoader.jsx
+++ b/src/containers/WebComponentLoader.jsx
@@ -5,6 +5,7 @@ import {
   setSenseHatAlwaysEnabled,
   setLoadRemixDisabled,
   setReactAppApiEndpoint,
+  setScratchApiEndpoint,
   setReadOnly,
 } from "../redux/EditorSlice";
 import WebComponentProject from "../components/WebComponentProject/WebComponentProject";
@@ -50,6 +51,7 @@ const WebComponentLoader = (props) => {
     sidebarPlugins = [],
     projectNameEditable = false,
     reactAppApiEndpoint = process.env.REACT_APP_API_ENDPOINT,
+    scratchApiEndpoint = process.env.REACT_APP_API_ENDPOINT,
     readOnly = false,
     senseHatAlwaysEnabled = false,
     showSavePrompt = false,
@@ -164,6 +166,10 @@ const WebComponentLoader = (props) => {
     dispatch(setReactAppApiEndpoint(reactAppApiEndpoint));
   }, [reactAppApiEndpoint, dispatch]);
 
+  useEffect(() => {
+    dispatch(setScratchApiEndpoint(scratchApiEndpoint));
+  }, [scratchApiEndpoint, dispatch]);
+
   useEffect(() => {
     dispatch(setSenseHatAlwaysEnabled(senseHatAlwaysEnabled));
   }, [senseHatAlwaysEnabled, dispatch]);
diff --git a/src/containers/WebComponentLoader.test.js b/src/containers/WebComponentLoader.test.js
index 74e4cd850..39741b023 100644
--- a/src/containers/WebComponentLoader.test.js
+++ b/src/containers/WebComponentLoader.test.js
@@ -8,6 +8,7 @@ import {
   setReadOnly,
   setSenseHatAlwaysEnabled,
   setReactAppApiEndpoint,
+  setScratchApiEndpoint,
 } from "../redux/EditorSlice";
 import { setInstructions } from "../redux/InstructionsSlice";
 import { setUser } from "../redux/WebComponentAuthSlice";
@@ -108,6 +109,45 @@ describe("When initially rendered", () => {
     expect(mockedChangeLanguage).toHaveBeenCalledWith("es-LA");
   });
 
+  describe("scratch API endpoint", () => {
+    describe("when scratch API endpoint isn't set", () => {
+      beforeEach(() => {
+        render(
+          <Provider store={store}>
+            <WebComponentLoader />
+          </Provider>,
+        );
+      });
+
+      test("it defaults to env", () => {
+        expect(store.getActions()).toEqual(
+          expect.arrayContaining([
+            setScratchApiEndpoint("http://localhost:3009"),
+          ]),
+        );
+      });
+    });
+
+    describe("when scratch API endpoint is set", () => {
+      beforeEach(() => {
+        render(
+          <Provider store={store}>
+            <WebComponentLoader
+              scratchApiEndpoint="http://local.dev"
+              theme="light"
+            />
+          </Provider>,
+        );
+      });
+
+      test("it uses the specified prop", () => {
+        expect(store.getActions()).toEqual(
+          expect.arrayContaining([setScratchApiEndpoint("http://local.dev")]),
+        );
+      });
+    });
+  });
+
   describe("react app API endpoint", () => {
     describe("when react app API endpoint isn't set", () => {
       beforeEach(() => {
diff --git a/src/redux/EditorSlice.js b/src/redux/EditorSlice.js
index fddffcd2b..738635d1e 100644
--- a/src/redux/EditorSlice.js
+++ b/src/redux/EditorSlice.js
@@ -238,6 +238,9 @@ export const EditorSlice = createSlice({
     setReactAppApiEndpoint: (state, action) => {
       state.reactAppApiEndpoint = action.payload;
     },
+    setScratchApiEndpoint: (state, action) => {
+      state.scratchApiEndpoint = action.payload;
+    },
     triggerDraw: (state) => {
       state.drawTriggered = true;
     },
@@ -442,6 +445,7 @@ export const {
   setSenseHatEnabled,
   setLoadRemixDisabled,
   setReactAppApiEndpoint,
+  setScratchApiEndpoint,
   stopCodeRun,
   stopDraw,
   triggerCodeRun,
diff --git a/src/scratch.jsx b/src/scratch.jsx
index 5aa7ee243..6adbe3a56 100644
--- a/src/scratch.jsx
+++ b/src/scratch.jsx
@@ -19,8 +19,9 @@ if (process.env.NODE_ENV === "production" && typeof window === "object") {
   window.onbeforeunload = () => true;
 }
 
-const defaultProjectId = "cool-id.json";
-const projectId = appTarget.dataset.projectId || defaultProjectId;
+const searchParams = new URLSearchParams(window.location.search);
+const projectId = searchParams.get("project_id");
+const apiUrl = searchParams.get("api_url");
 
 const defaultLocale = "en";
 const locale = appTarget.dataset.locale || defaultLocale;
@@ -56,8 +57,8 @@ root.render(
       projectId={projectId}
       locale={locale}
       menuBarHidden={true}
-      projectHost={`${process.env.ASSETS_URL}/api/projects`}
-      assetHost={`${process.env.ASSETS_URL}/api/assets`}
+      projectHost={`${apiUrl}/api/scratch/projects`}
+      assetHost={`${apiUrl}/api/scratch/assets`}
       basePath={`${process.env.ASSETS_URL}/scratch-gui/`}
       onUpdateProjectId={handleUpdateProjectId}
       onShowCreatingRemixAlert={handleRemixingStarted}
diff --git a/src/web-component.js b/src/web-component.js
index b95d94798..3977cb123 100644
--- a/src/web-component.js
+++ b/src/web-component.js
@@ -65,6 +65,7 @@ class WebComponent extends HTMLElement {
       "output_split_view",
       "project_name_editable",
       "react_app_api_endpoint",
+      "scratch_api_endpoint",
       "read_only",
       "sense_hat_always_enabled",
       "show_save_prompt",
diff --git a/webpack.config.js b/webpack.config.js
index 2a6be26d5..258a159d7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -151,8 +151,8 @@ module.exports = {
             "/pyodide/shims/_internal_sense_hat.js",
             "/pyodide/shims/pygal.js",
             "/PyodideWorker.js",
-            "/scratch.html",
-          ].includes(req.url)
+          ].includes(req.url) ||
+          req.url.startsWith("/scratch.html")
         ) {
           res.setHeader("Cross-Origin-Resource-Policy", "cross-origin");
         }

From a59aff49d66d82c671133e25779e8c33614c94d9 Mon Sep 17 00:00:00 2001
From: Chris Zetter <253059100+zetter-rpf@users.noreply.github.com>
Date: Thu, 26 Feb 2026 17:09:21 +0000
Subject: [PATCH 5/7] Make the local scratch test work again

This moves the assets around to where they are expected.
---
 cypress/e2e/spec-scratch.cy.js                              | 2 +-
 .../asset/8a9dadf4eea61892ec6908b1c99e4961.svg/get          | 0
 .../cool-id.json => scratch/projects/cool-scratch.json}     | 0
 src/projects/{blank-scratch.json => cool-scratch.json}      | 4 ++--
 src/web-component.html                                      | 6 +++++-
 5 files changed, 8 insertions(+), 4 deletions(-)
 rename public/api/{ => scratch}/assets/internalapi/asset/8a9dadf4eea61892ec6908b1c99e4961.svg/get (100%)
 rename public/api/{projects/cool-id.json => scratch/projects/cool-scratch.json} (100%)
 rename src/projects/{blank-scratch.json => cool-scratch.json} (76%)

diff --git a/cypress/e2e/spec-scratch.cy.js b/cypress/e2e/spec-scratch.cy.js
index b2bc8b403..35f833a8a 100644
--- a/cypress/e2e/spec-scratch.cy.js
+++ b/cypress/e2e/spec-scratch.cy.js
@@ -21,7 +21,7 @@ const getIframeBody = () => {
 describe("Scratch", () => {
   beforeEach(() => {
     cy.visit(origin);
-    cy.findByText("blank-scratch").click();
+    cy.findByText("cool-scratch").click();
   });
 
   it("loads Scratch in an iframe", () => {
diff --git a/public/api/assets/internalapi/asset/8a9dadf4eea61892ec6908b1c99e4961.svg/get b/public/api/scratch/assets/internalapi/asset/8a9dadf4eea61892ec6908b1c99e4961.svg/get
similarity index 100%
rename from public/api/assets/internalapi/asset/8a9dadf4eea61892ec6908b1c99e4961.svg/get
rename to public/api/scratch/assets/internalapi/asset/8a9dadf4eea61892ec6908b1c99e4961.svg/get
diff --git a/public/api/projects/cool-id.json b/public/api/scratch/projects/cool-scratch.json
similarity index 100%
rename from public/api/projects/cool-id.json
rename to public/api/scratch/projects/cool-scratch.json
diff --git a/src/projects/blank-scratch.json b/src/projects/cool-scratch.json
similarity index 76%
rename from src/projects/blank-scratch.json
rename to src/projects/cool-scratch.json
index 64243b4cc..4d8993733 100644
--- a/src/projects/blank-scratch.json
+++ b/src/projects/cool-scratch.json
@@ -1,8 +1,8 @@
 {
-  "identifier": "blank-scratch",
+  "identifier": "cool-scratch.json",
   "project_type": "code_editor_scratch",
   "locale": "en",
-  "name": "Blank Scratch Project",
+  "name": "Sample Scratch Project",
   "user_id": null,
   "instructions": {
     "content": "instructions go here",
diff --git a/src/web-component.html b/src/web-component.html
index 18ae7cab7..f65c1414b 100644
--- a/src/web-component.html
+++ b/src/web-component.html
@@ -60,7 +60,7 @@
       <a href="#" data-project="blank-python-starter">blank-python-starter</a>
       <a href="#" data-project="cool-python">cool-python</a>
       <a href="#" data-project="python-plotly">python-plotly</a>
-      <a href="#" data-project="blank-scratch">blank-scratch</a>
+      <a href="#" data-project="cool-scratch">cool-scratch</a>
     </div>
     <div id="editor-component"></div>
     <p id="results"></p>
@@ -114,6 +114,10 @@
         newWebComp.setAttribute("code", "");
         newWebComp.setAttribute("class", "editor-wc");
         newWebComp.setAttribute("host_styles", JSON.stringify([]));
+        const scratchApiEndpoint = new URL(".", window.location.href)
+          .href
+          .replace(/\/$/, "");
+        newWebComp.setAttribute("scratch_api_endpoint", scratchApiEndpoint);
         
         queryParams.forEach((value, key) => {
           newWebComp.setAttribute(key, value);

From b0d2d0a0c9a9f14dbd1f6bc9d0a236ac4a16c3dc Mon Sep 17 00:00:00 2001
From: Chris Zetter <253059100+zetter-rpf@users.noreply.github.com>
Date: Thu, 26 Feb 2026 17:10:31 +0000
Subject: [PATCH 6/7] Add in a button to save scratch projects

This is a quick way to add it so we can that the save urls are configured correctly in different environment, we've written a separate issue to implement a save button
---
 src/components/ProjectBar/ProjectBar.jsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/components/ProjectBar/ProjectBar.jsx b/src/components/ProjectBar/ProjectBar.jsx
index 037e2aa6f..01b3df5a1 100644
--- a/src/components/ProjectBar/ProjectBar.jsx
+++ b/src/components/ProjectBar/ProjectBar.jsx
@@ -21,6 +21,16 @@ const ProjectBar = ({ nameEditable = true }) => {
   const projectOwner = isOwner(user, project);
   const readOnly = useSelector((state) => state.editor.readOnly);
 
+  const saveScratchProject = () => {
+    const webComponent = document.querySelector("editor-wc");
+    webComponent.shadowRoot
+      .querySelector("iframe[title='Scratch']")
+      .contentWindow.postMessage(
+        { type: "scratch-gui-save" },
+        process.env.ASSETS_URL,
+      );
+  };
+
   return (
     loading === "success" && (
       <div className="project-bar">
@@ -43,6 +53,14 @@ const ProjectBar = ({ nameEditable = true }) => {
               <SaveButton className="project-bar__btn btn--save" />
             </div>
           )}
+          {project.project_type === "code_editor_scratch" && (
+            <button
+              className="project-bar__btn btn--save"
+              onClick={saveScratchProject}
+            >
+              Save
+            </button>
+          )}
           {lastSavedTime && user && !readOnly && (
             <SaveStatus saving={saving} lastSavedTime={lastSavedTime} />
           )}

From 6e4e756d9cb89d9086cabfc99425a3ec6d4a24b2 Mon Sep 17 00:00:00 2001
From: Chris Zetter <253059100+zetter-rpf@users.noreply.github.com>
Date: Fri, 27 Feb 2026 10:57:26 +0000
Subject: [PATCH 7/7] Error when require attributes are not set

These are required for scratch to work and should always be set.
---
 src/scratch.jsx | 44 +++++++++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/scratch.jsx b/src/scratch.jsx
index 6adbe3a56..3fff72782 100644
--- a/src/scratch.jsx
+++ b/src/scratch.jsx
@@ -49,22 +49,28 @@ const handleSavingSucceeded = () => {
   window.top.postMessage({ type: "scratch-gui-saving-succeeded" }, "*");
 };
 
-const root = createRoot(appTarget);
-root.render(
-  <>
-    <style>{ScratchStyles}</style>
-    <WrappedGui
-      projectId={projectId}
-      locale={locale}
-      menuBarHidden={true}
-      projectHost={`${apiUrl}/api/scratch/projects`}
-      assetHost={`${apiUrl}/api/scratch/assets`}
-      basePath={`${process.env.ASSETS_URL}/scratch-gui/`}
-      onUpdateProjectId={handleUpdateProjectId}
-      onShowCreatingRemixAlert={handleRemixingStarted}
-      onShowRemixSuccessAlert={handleRemixingSucceeded}
-      onShowSavingAlert={handleSavingStarted}
-      onShowSaveSuccessAlert={handleSavingSucceeded}
-    />
-  </>,
-);
+if (!projectId) {
+  console.error("project_id is required but not set");
+} else if (!apiUrl) {
+  console.error("api_url is required but not set");
+} else {
+  const root = createRoot(appTarget);
+  root.render(
+    <>
+      <style>{ScratchStyles}</style>
+      <WrappedGui
+        projectId={projectId}
+        locale={locale}
+        menuBarHidden={true}
+        projectHost={`${apiUrl}/api/scratch/projects`}
+        assetHost={`${apiUrl}/api/scratch/assets`}
+        basePath={`${process.env.ASSETS_URL}/scratch-gui/`}
+        onUpdateProjectId={handleUpdateProjectId}
+        onShowCreatingRemixAlert={handleRemixingStarted}
+        onShowRemixSuccessAlert={handleRemixingSucceeded}
+        onShowSavingAlert={handleSavingStarted}
+        onShowSaveSuccessAlert={handleSavingSucceeded}
+      />
+    </>,
+  );
+}