From edde0d0f908f9118ea6790857a48a4419222b2c8 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 7 Jan 2026 15:50:34 +0200
Subject: [PATCH] fix(client-standalone): get it to start in prod

---
 apps/client-standalone/package.json   |   1 +
 apps/client-standalone/src/index.html | 100 +-------------------------
 apps/client-standalone/src/main.ts    |  92 ++++++++++++++++++++++++
 3 files changed, 94 insertions(+), 99 deletions(-)
 create mode 100644 apps/client-standalone/src/main.ts

diff --git a/apps/client-standalone/package.json b/apps/client-standalone/package.json
index 747a05f3d..dd16561cf 100644
--- a/apps/client-standalone/package.json
+++ b/apps/client-standalone/package.json
@@ -8,6 +8,7 @@
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build",
     "dev": "vite dev",
     "test": "vitest",
+    "start-prod": "pnpm build && pnpm http-server dist -p 8888",
     "coverage": "vitest --coverage"
   },
   "dependencies": {
diff --git a/apps/client-standalone/src/index.html b/apps/client-standalone/src/index.html
index bb0300eda..e8a89912e 100644
--- a/apps/client-standalone/src/index.html
+++ b/apps/client-standalone/src/index.html
@@ -24,106 +24,8 @@
         <!-- This works even when the user directly changes --root-background in CSS -->
         <div id="background-color-tracker" style="position: absolute; visibility: hidden; color: var(--root-background); transition: color 1ms;"></div>
 
-        <!-- Inject service worker -->
-        <script type="module">
-            import { attachServiceWorkerBridge, startLocalServerWorker } from "./local-bridge.js";
-
-            // 1) Start local worker ASAP (so /bootstrap is fast)
-            startLocalServerWorker();
-
-            // 2) Bridge SW -> local worker
-            attachServiceWorkerBridge();
-
-            // 3) Register SW
-            if ("serviceWorker" in navigator) {
-                const reg = await navigator.serviceWorker.register("./sw.js", { scope: "/" });
-                // Optionally wait for activation
-                await navigator.serviceWorker.ready;
-            }
-        </script>
-
         <!-- Bootstrap (request server for required information) -->
-        <script>
-            async function bootstrap() {
-                await setupGlob();
-                loadStylesheets();
-                loadIcons();
-                setBodyAttributes();
-                await loadScripts();
-            }
-
-            async function setupGlob() {
-                const response = await fetch("/bootstrap");
-                console.log("Service worker state", navigator.serviceWorker.controller);
-                console.log("Resp", response);
-                const json = await response.json();
-                console.log("Bootstrap", json);
-                
-                global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
-                window.glob = {
-                    ...json,
-                    activeDialog: null
-                };
-            }
-
-            function loadStylesheets() {
-                const { assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
-                const cssToLoad = [];
-                cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
-                if (themeCssUrl) {
-                    cssToLoad.push(themeCssUrl);
-                }
-                if (themeUseNextAsBase === "next") {
-                    cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`)
-                } else if (themeUseNextAsBase === "next-dark") {
-                    cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`)
-                } else if (themeUseNextAsBase === "next-light") {
-                    cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`)
-                }
-                cssToLoad.push(`${assetPath}/stylesheets/style.css`);
-
-                for (const href of cssToLoad) {
-                    const linkEl = document.createElement("link");
-                    linkEl.href = href;
-                    linkEl.rel = "stylesheet";
-                    document.body.appendChild(linkEl);
-                }
-            }
-
-            function loadIcons() {
-                const styleEl = document.createElement("style");
-                styleEl.innerText = window.glob.iconPackCss;
-                document.head.appendChild(styleEl);
-            }
-
-            function setBodyAttributes() {
-                const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
-                const classesToSet = [
-                    device,
-                    `heading-style-${headingStyle}`,
-                    `layout-${layoutOrientation}`,
-                    `platform-${platform}`,
-                    isElectron && "isElectron",
-                    hasNativeTitleBar && "native-titlebar",
-                    hasBackgroundEffects && "background-effects"
-                ].filter(Boolean);
-
-                for (const classToSet of classesToSet) {
-                    document.body.classList.add(classToSet);
-                }
-
-                document.body.lang = currentLocale.id;
-                document.body.dir = currentLocale.rtl ? "rtl" : "ltr";
-            }
-
-            async function loadScripts() {
-                // Import from local re-export files that reference client source
-                await import("./runtime.ts");
-                await import("./desktop.ts");
-            }
-            
-            bootstrap();
-        </script>
+        <script src="./main.ts" type="module"></script>
 
         <!-- Required for correct loading of scripts in Electron -->
         <script>
diff --git a/apps/client-standalone/src/main.ts b/apps/client-standalone/src/main.ts
new file mode 100644
index 000000000..733997d26
--- /dev/null
+++ b/apps/client-standalone/src/main.ts
@@ -0,0 +1,92 @@
+import { attachServiceWorkerBridge, startLocalServerWorker } from "./local-bridge.js";
+
+async function bootstrap() {
+    // 1) Start local worker ASAP (so /bootstrap is fast)
+    startLocalServerWorker();
+
+    // 2) Bridge SW -> local worker
+    attachServiceWorkerBridge();
+
+    // 3) Register SW
+    if ("serviceWorker" in navigator) {
+        const reg = await navigator.serviceWorker.register("./sw.js", { scope: "/" });
+        // Optionally wait for activation
+        await navigator.serviceWorker.ready;
+    }
+
+    await setupGlob();
+    loadStylesheets();
+    loadIcons();
+    setBodyAttributes();
+    await loadScripts();
+}
+
+async function setupGlob() {
+    const response = await fetch("/bootstrap");
+    console.log("Service worker state", navigator.serviceWorker.controller);
+    console.log("Resp", response);
+    const json = await response.json();
+    console.log("Bootstrap", json);
+
+    window.glob = {
+        ...json,
+        activeDialog: null
+    };
+}
+
+function loadStylesheets() {
+    const { assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
+    const cssToLoad = [];
+    cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
+    if (themeCssUrl) {
+        cssToLoad.push(themeCssUrl);
+    }
+    if (themeUseNextAsBase === "next") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`)
+    } else if (themeUseNextAsBase === "next-dark") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`)
+    } else if (themeUseNextAsBase === "next-light") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`)
+    }
+    cssToLoad.push(`${assetPath}/stylesheets/style.css`);
+
+    for (const href of cssToLoad) {
+        const linkEl = document.createElement("link");
+        linkEl.href = href;
+        linkEl.rel = "stylesheet";
+        document.body.appendChild(linkEl);
+    }
+}
+
+function loadIcons() {
+    const styleEl = document.createElement("style");
+    styleEl.innerText = window.glob.iconPackCss;
+    document.head.appendChild(styleEl);
+}
+
+function setBodyAttributes() {
+    const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
+    const classesToSet = [
+        device,
+        `heading-style-${headingStyle}`,
+        `layout-${layoutOrientation}`,
+        `platform-${platform}`,
+        isElectron && "isElectron",
+        hasNativeTitleBar && "native-titlebar",
+        hasBackgroundEffects && "background-effects"
+    ].filter(Boolean);
+
+    for (const classToSet of classesToSet) {
+        document.body.classList.add(classToSet);
+    }
+
+    document.body.lang = currentLocale.id;
+    document.body.dir = currentLocale.rtl ? "rtl" : "ltr";
+}
+
+async function loadScripts() {
+    await import("./runtime.js");
+    await import("./desktop.js");
+}
+
+bootstrap();