alabjs 0.2.6 → 0.4.0

package/dist/server/app.js

@@ -1,7 +1,7 @@
 import { createApp as createH3App, createRouter, defineEventHandler, getQuery, readBody } from "h3";
 import { createServer } from "node:http";
 import { resolve, dirname, join, extname } from "node:path";
-import { existsSync, createReadStream, statSync, readFileSync } from "node:fs";
+import { existsSync, createReadStream, statSync, readFileSync, readdirSync } from "node:fs";
 import { createGzip, createBrotliCompress } from "node:zlib";
 import { toNodeListener } from "h3";
 import { renderToResponse } from "../ssr/render.js";
@@ -14,20 +14,88 @@ import { applyCdnHeaders } from "./cdn.js";
 import { getPPRShell, injectBuildIdIntoPPRShell, PPR_CACHE_SUBDIR } from "../ssr/ppr.js";
 import { handleVitalsBeacon, handleAnalyticsDashboard } from "../analytics/handler.js";
 import { buildImportMap } from "../config.js";
+import { registerLiveComponent } from "../live/registry.js";
+import { renderLiveFragment, hashFragment } from "../live/renderer.js";
+import { subscribeToTag } from "../live/broadcaster.js";
+/** Walk dist/server recursively and collect all *.server.js paths (compiled server functions). */
+function findDistServerFiles(distDir) {
+    const serverDir = join(distDir, "server");
+    const results = [];
+    function walk(dir) {
+        try {
+            for (const entry of readdirSync(dir, { withFileTypes: true })) {
+                const fullPath = join(dir, entry.name);
+                if (entry.isDirectory()) {
+                    walk(fullPath);
+                }
+                else if (entry.isFile() && entry.name.endsWith(".server.js")) {
+                    results.push(fullPath);
+                }
+            }
+        }
+        catch { /* not readable */ }
+    }
+    walk(serverDir);
+    return results;
+}
+/** Walk dist/server recursively and register all *.live.js modules. */
+async function registerAllLiveComponents(distDir) {
+    const serverDir = join(distDir, "server");
+    const files = [];
+    function walk(dir) {
+        try {
+            for (const entry of readdirSync(dir, { withFileTypes: true })) {
+                const fullPath = join(dir, entry.name);
+                if (entry.isDirectory()) {
+                    walk(fullPath);
+                }
+                else if (entry.isFile() && entry.name.endsWith(".live.js")) {
+                    files.push(fullPath);
+                }
+            }
+        }
+        catch { /* not readable */ }
+    }
+    walk(serverDir);
+    for (const filePath of files) {
+        try {
+            const mod = await import(filePath);
+            // liveId is stamped by the Vite plugin (hash of source path).
+            // Fall back to a hash of the file path itself.
+            const id = mod.liveId ?? filePath.replace(/[^a-z0-9]/gi, "").slice(-16);
+            registerLiveComponent({
+                id,
+                modulePath: filePath,
+                ...(typeof mod.liveInterval === "number" ? { liveInterval: mod.liveInterval } : {}),
+                ...(typeof mod.liveTags === "function" ? { liveTags: mod.liveTags } : {}),
+            });
+        }
+        catch (err) {
+            console.warn(`[alabjs] live: failed to register ${filePath}:`, err);
+        }
+    }
+}
 /**
  * Find layout file paths (relative to cwd root) for a given route.file, ordered outermost→innermost.
  * Checks the compiled dist directory for the existence of each layout.
  */
+/** Convert a TypeScript source path to its compiled .js equivalent. */
+function toJsPath(p) {
+    return p.replace(/\.(tsx?)$/, ".js");
+}
 function findProdLayoutFiles(routeFile, distDir) {
     // routeFile is like "app/users/[id]/page.tsx"
+    // Returns source paths (e.g. "app/layout.tsx") so the client bootstrap can look
+    // them up in LAYOUT_MODS by their original source key.  The import() call in
+    // app.ts uses toJsPath() to convert back to the compiled .js path.
     const pageDir = dirname(routeFile);
     const parts = pageDir.split("/");
     const layouts = [];
     for (let i = 1; i <= parts.length; i++) {
         const dir = parts.slice(0, i).join("/");
-        const layoutRelPath = `${dir}/layout.tsx`;
-        if (existsSync(join(distDir, "server", layoutRelPath))) {
-            layouts.push(layoutRelPath);
+        const compiledPath = `${dir}/layout.js`;
+        if (existsSync(join(distDir, "server", compiledPath))) {
+            layouts.push(`${dir}/layout.tsx`);
         }
     }
     return layouts;
@@ -38,7 +106,7 @@ function findProdLayoutFiles(routeFile, distDir) {
 function findProdErrorFile(routeFile, distDir) {
     let dir = dirname(routeFile);
     while (dir.length > 0 && dir !== ".") {
-        const candidate = `${dir}/error.tsx`;
+        const candidate = `${dir}/error.js`;
         if (existsSync(join(distDir, "server", candidate)))
             return candidate;
         const parent = dirname(dir);
@@ -51,9 +119,9 @@ function findProdErrorFile(routeFile, distDir) {
 function findProdLoadingFile(routeFile, distDir) {
     let dir = dirname(routeFile);
     while (dir.length > 0 && dir !== ".") {
-        const candidate = `${dir}/loading.tsx`;
-        if (existsSync(join(distDir, "server", candidate)))
-            return candidate;
+        const compiled = `${dir}/loading.js`;
+        if (existsSync(join(distDir, "server", compiled)))
+            return `${dir}/loading.tsx`;
         const parent = dirname(dir);
         if (parent === dir)
             break;
@@ -80,6 +148,18 @@ export function createApp(manifest, distDir) {
         buildId = readFileSync(resolve(distDir, "BUILD_ID"), "utf8").trim() || undefined;
     }
     catch { /* no BUILD_ID file — skew protection disabled */ }
+    // Resolve the compiled client entry file path by reading the Vite manifest.
+    // /@alabjs/client is a virtual module at build time; at runtime the server
+    // must redirect requests for it to the hashed asset file.
+    // The manifest key is a relative path ending in "@alabjs/client" (not "/@alabjs/client").
+    let clientEntryPath = "";
+    try {
+        const viteManifest = JSON.parse(readFileSync(resolve(distDir, "client/.vite/manifest.json"), "utf8"));
+        const entry = Object.values(viteManifest).find((e) => e.isEntry && e.src?.endsWith("@alabjs/client"));
+        if (entry?.file)
+            clientEntryPath = "/" + entry.file;
+    }
+    catch { /* manifest absent — /@alabjs/client will 404 */ }
     // Load federation config written by `alab build`. Used to:
     //  1. Serve `/_alabjs/federation-manifest.json` (remote discovery)
     //  2. Inject `<script type="importmap">` into every page (host → remote routing)
@@ -93,6 +173,10 @@ export function createApp(manifest, distDir) {
     catch { /* no federation config — federation disabled */ }
     // Absolute path to the PPR shell cache directory.
     const pprCacheDir = resolve(distDir, "../../", PPR_CACHE_SUBDIR);
+    // Register live components at startup (non-blocking — failures are warned, not thrown).
+    registerAllLiveComponents(distDir).catch((err) => {
+        console.warn("[alabjs] live: component registration failed:", err);
+    });
     // ─── Global middleware ───────────────────────────────────────────────────────
     app.use(defineEventHandler((event) => {
         const res = event.node.res;
@@ -101,6 +185,40 @@ export function createApp(manifest, distDir) {
         res.setHeader("referrer-policy", "strict-origin-when-cross-origin");
         res.setHeader("permissions-policy", "camera=(), microphone=(), geolocation=()");
         res.setHeader("x-permitted-cross-domain-policies", "none");
+        // NOTE: 'unsafe-inline' is required by React's inline event delegation and
+        // Tailwind's runtime style injection. 'unsafe-eval' is required by some
+        // React dev-mode internals and dynamic import().
+        //
+        // ⚠️  Security implication: these directives weaken XSS protection.
+        // In production, override this header in your middleware with a nonce-based
+        // CSP: `script-src 'self' 'nonce-<random>'` and inject the same nonce into
+        // every <script> tag via renderToResponse's headExtra option. The CSRF
+        // double-submit pattern relies on XSS prevention — using 'unsafe-inline'
+        // without a nonce makes the CSRF token readable by injected scripts.
+        //
+        // NOTE: 'upgrade-insecure-requests' is intentionally omitted from the
+        // default CSP. That directive tells browsers to silently rewrite http://
+        // sub-resource URLs to https://, which breaks any app served over plain
+        // HTTP (local dev, internal tooling, HTTP-only staging servers) because
+        // the browser will refuse to load scripts and stylesheets redirected from
+        // the virtual /@alabjs/client path.
+        //
+        // Add it in your own middleware when you are certain every environment
+        // runs behind HTTPS:
+        //
+        //   // middleware.ts
+        //   export async function middleware(req: Request) {
+        //     const isHttps = req.headers.get("x-forwarded-proto") === "https"
+        //                  || new URL(req.url).protocol === "https:";
+        //     if (isHttps) {
+        //       // Append the directive to whatever CSP the framework already set.
+        //       const existing = res.headers.get("content-security-policy") ?? "";
+        //       res.headers.set(
+        //         "content-security-policy",
+        //         existing + "; upgrade-insecure-requests",
+        //       );
+        //     }
+        //   }
         res.setHeader("content-security-policy", [
             "default-src 'self'",
             "script-src 'self' 'unsafe-inline' 'unsafe-eval'",
@@ -113,16 +231,21 @@ export function createApp(manifest, distDir) {
             "base-uri 'self'",
             "form-action 'self'",
             "frame-ancestors 'self'",
-            "upgrade-insecure-requests",
         ].join("; "));
         // HSTS — only meaningful over HTTPS; set in production only.
         res.setHeader("strict-transport-security", "max-age=31536000; includeSubDomains");
     }));
-    // ─── User middleware (middleware.ts compiled to dist/server/middleware.ts) ───
-    const middlewareModulePath = `${distDir}/server/middleware.ts`;
+    // ─── User middleware (middleware.ts compiled to dist/server/middleware.js) ───
+    const middlewareModulePath = `${distDir}/server/middleware.js`;
     if (existsSync(middlewareModulePath)) {
+        // Cache the module after first import — avoids redundant dynamic import()
+        // overhead on every request (each import() call re-resolves the module graph).
+        let _middlewareCache = null;
         app.use(defineEventHandler(async (event) => {
-            const mod = await import(middlewareModulePath);
+            if (!_middlewareCache) {
+                _middlewareCache = await import(middlewareModulePath);
+            }
+            const mod = _middlewareCache;
             if (typeof mod.middleware !== "function")
                 return;
             const req = event.node.req;
@@ -169,7 +292,7 @@ export function createApp(manifest, distDir) {
         ".xml": "application/xml; charset=utf-8",
         ".map": "application/json; charset=utf-8",
     };
-    app.use(defineEventHandler((event) => {
+    app.use(defineEventHandler(async (event) => {
         const req = event.node.req;
         const res = event.node.res;
         if (req.method !== "GET" && req.method !== "HEAD")
@@ -185,14 +308,34 @@ export function createApp(manifest, distDir) {
         }
         if (relPath.includes(".."))
             return;
+        const acceptEncoding = (req.headers["accept-encoding"] ?? "");
+        const useBrotli = acceptEncoding.includes("br");
+        const useGzip = !useBrotli && acceptEncoding.includes("gzip");
+        // Virtual client entry — redirect to the hashed asset file resolved at startup.
+        // A 302 redirect (not direct serve) is critical: relative imports in the bundle
+        // (e.g. "./components-HASH.js") must resolve against the real asset URL
+        // (/assets/client-HASH.js), not the virtual path (/@alabjs/client).
+        if (relPath === "/@alabjs/client") {
+            if (clientEntryPath) {
+                res.writeHead(302, { Location: clientEntryPath });
+            }
+            else {
+                res.statusCode = 404;
+            }
+            res.end();
+            return;
+        }
         const ext = extname(relPath).toLowerCase();
         const contentType = MIME_TYPES[ext];
         if (!contentType)
             return; // skip extensionless paths (page routes)
-        const acceptEncoding = (req.headers["accept-encoding"] ?? "");
-        const useBrotli = acceptEncoding.includes("br");
-        const useGzip = !useBrotli && acceptEncoding.includes("gzip");
-        /** Stream a file with optional brotli/gzip compression and ETag 304 support. */
+        /** Stream a file with optional brotli/gzip compression and ETag 304 support.
+         *
+         * Returns a Promise that resolves when the response is fully sent. The
+         * h3 handler awaits this promise so h3 knows the response is complete
+         * before considering the next middleware. This avoids h3 passing the
+         * request to the router (which would 404) while the async pipe is running.
+         */
         function serveFile(filePath, fileSize, mtimeMs, cacheControl, mime) {
             // ETag from file size + mtime — both already known from the caller's stat().
             const etag = `"${fileSize.toString(36)}-${mtimeMs.toString(36)}"`;
@@ -201,28 +344,31 @@ export function createApp(manifest, distDir) {
             if (req.headers["if-none-match"] === etag) {
                 res.statusCode = 304;
                 res.end();
-                return null;
+                return Promise.resolve();
             }
             res.setHeader("content-type", mime);
             res.setHeader("cache-control", cacheControl);
             if (req.method === "HEAD") {
                 res.end();
-                return null;
-            }
-            const stream = createReadStream(filePath);
-            if (useBrotli) {
-                res.setHeader("content-encoding", "br");
-                stream.pipe(createBrotliCompress()).pipe(res);
-            }
-            else if (useGzip) {
-                res.setHeader("content-encoding", "gzip");
-                stream.pipe(createGzip()).pipe(res);
-            }
-            else {
-                res.setHeader("content-length", fileSize);
-                stream.pipe(res);
+                return Promise.resolve();
             }
-            return null;
+            return new Promise((resolve, reject) => {
+                const fileStream = createReadStream(filePath);
+                res.on("finish", resolve);
+                res.on("error", reject);
+                if (useBrotli) {
+                    res.setHeader("content-encoding", "br");
+                    fileStream.pipe(createBrotliCompress()).pipe(res);
+                }
+                else if (useGzip) {
+                    res.setHeader("content-encoding", "gzip");
+                    fileStream.pipe(createGzip()).pipe(res);
+                }
+                else {
+                    res.setHeader("content-length", fileSize);
+                    fileStream.pipe(res);
+                }
+            });
         }
         // 1. Built client assets (JS chunks, CSS, source maps)
         const clientCandidate = join(clientDir, relPath);
@@ -230,7 +376,8 @@ export function createApp(manifest, distDir) {
             const stat = statSync(clientCandidate);
             if (stat.isFile()) {
                 const isHashed = /\.[a-f0-9]{8,}\.[a-z]+$/.test(relPath);
-                return serveFile(clientCandidate, stat.size, stat.mtimeMs, isHashed ? "public, max-age=31536000, immutable" : "public, max-age=3600", contentType);
+                await serveFile(clientCandidate, stat.size, stat.mtimeMs, isHashed ? "public, max-age=31536000, immutable" : "public, max-age=3600", contentType);
+                return;
             }
         }
         // 2. Public directory (favicons, fonts, open-graph images, etc.)
@@ -238,10 +385,10 @@ export function createApp(manifest, distDir) {
         if (existsSync(publicCandidate)) {
             const stat = statSync(publicCandidate);
             if (stat.isFile()) {
-                return serveFile(publicCandidate, stat.size, stat.mtimeMs, "public, max-age=3600", contentType);
+                await serveFile(publicCandidate, stat.size, stat.mtimeMs, "public, max-age=3600", contentType);
+                return;
             }
         }
-        return undefined;
     }));
     // ─── Built-in routes ────────────────────────────────────────────────────────
     // Federation manifest — remote apps can advertise what they expose
@@ -287,6 +434,152 @@ export function createApp(manifest, distDir) {
         handleAnalyticsDashboard(event.node.req, event.node.res);
         return null;
     }));
+    // ─── Live component SSE endpoint ────────────────────────────────────────────
+    // GET /_alabjs/live/:id?props=<base64-json>
+    //
+    // Opens a persistent SSE stream for a live component. On connect:
+    //   1. Renders the component immediately and sends the first fragment.
+    //   2. Sets up an interval (if liveInterval is set) to re-render and push.
+    //   3. Subscribes to tag broadcasts (if liveTags is set).
+    //   4. On client disconnect: clears interval + unsubscribes tags.
+    router.get("/_alabjs/live/:id", defineEventHandler(async (event) => {
+        const req = event.node.req;
+        const res = event.node.res;
+        const id = (event.context.params?.["id"] ?? "");
+        const { getLiveComponent } = await import("../live/registry.js");
+        const entry = getLiveComponent(id);
+        if (!entry) {
+            res.statusCode = 404;
+            res.setHeader("content-type", "application/json");
+            res.end(JSON.stringify({ error: `[alabjs] live component not found: ${id}` }));
+            return;
+        }
+        // Parse props from base64-encoded JSON query param.
+        let props = {};
+        try {
+            const url = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+            const raw = url.searchParams.get("props");
+            if (raw)
+                props = JSON.parse(Buffer.from(raw, "base64").toString("utf8"));
+        }
+        catch { /* malformed props — use empty object */ }
+        // SSE headers.
+        res.statusCode = 200;
+        res.setHeader("content-type", "text/event-stream; charset=utf-8");
+        res.setHeader("cache-control", "no-cache, no-transform");
+        res.setHeader("connection", "keep-alive");
+        res.setHeader("x-accel-buffering", "no"); // disable nginx buffering
+        let lastHash = "";
+        let closed = false;
+        async function pushFragment() {
+            if (closed)
+                return;
+            try {
+                const html = await renderLiveFragment(entry.modulePath, props);
+                const hash = hashFragment(html);
+                if (hash === lastHash)
+                    return; // no-op — output unchanged
+                lastHash = hash;
+                res.write(`data: ${html}\n\n`);
+            }
+            catch (err) {
+                console.error(`[alabjs] live render error (${id}):`, err);
+            }
+        }
+        // Send initial fragment immediately.
+        await pushFragment();
+        // Interval-based polling.
+        let intervalHandle = null;
+        if (entry.liveInterval && entry.liveInterval > 0) {
+            intervalHandle = setInterval(() => { void pushFragment(); }, entry.liveInterval);
+        }
+        // Tag-based subscriptions.
+        const unsubFns = [];
+        if (entry.liveTags) {
+            const tags = entry.liveTags(props);
+            for (const tag of tags) {
+                unsubFns.push(subscribeToTag(tag, () => { void pushFragment(); }));
+            }
+        }
+        // Cleanup on disconnect.
+        req.on("close", () => {
+            closed = true;
+            if (intervalHandle)
+                clearInterval(intervalHandle);
+            for (const unsub of unsubFns)
+                unsub();
+        });
+        // Return null so h3 does not try to end the response — SSE keeps it open.
+        return null;
+    }));
+    // ─── Server function endpoints ──────────────────────────────────────────────
+    // GET  /_alabjs/data/:fn  — used by useServerData (query params as input)
+    // POST /_alabjs/fn/:fn    — used by useMutation (JSON body as input)
+    //
+    // Both scan all *.server.js files in dist/server for the named export.
+    // Module results are NOT cached — the module cache is Node's own require cache.
+    async function callServerFn(fnName, ctx, input, res) {
+        const serverFiles = findDistServerFiles(distDir);
+        for (const file of serverFiles) {
+            const mod = await import(file);
+            if (typeof mod[fnName] === "function") {
+                try {
+                    const result = await mod[fnName](ctx, input);
+                    res.statusCode = 200;
+                    res.setHeader("content-type", "application/json");
+                    res.end(JSON.stringify(result));
+                }
+                catch (err) {
+                    const zodError = err?.["zodError"];
+                    if (zodError) {
+                        res.statusCode = 422;
+                        res.setHeader("content-type", "application/json");
+                        res.end(JSON.stringify({ zodError }));
+                    }
+                    else {
+                        const msg = err instanceof Error ? err.message : String(err);
+                        console.error(`[alabjs] server fn "${fnName}" threw:`, err);
+                        res.statusCode = 500;
+                        res.setHeader("content-type", "application/json");
+                        res.end(JSON.stringify({ error: msg }));
+                    }
+                }
+                return;
+            }
+        }
+        res.statusCode = 404;
+        res.setHeader("content-type", "application/json");
+        res.end(JSON.stringify({ error: `[alabjs] server function not found: ${fnName}` }));
+    }
+    router.get("/_alabjs/data/:fn", defineEventHandler(async (event) => {
+        const fnName = event.context.params?.["fn"] ?? "";
+        const req = event.node.req;
+        const url = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+        const query = Object.fromEntries(url.searchParams.entries());
+        const ctx = {
+            params: query,
+            query,
+            headers: req.headers,
+            method: "GET",
+            url: req.url ?? "/",
+        };
+        await callServerFn(fnName, ctx, Object.keys(query).length ? query : undefined, event.node.res);
+    }));
+    router.post("/_alabjs/fn/:fn", defineEventHandler(async (event) => {
+        const fnName = event.context.params?.["fn"] ?? "";
+        const req = event.node.req;
+        const url = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+        const query = Object.fromEntries(url.searchParams.entries());
+        const body = await readBody(event);
+        const ctx = {
+            params: query,
+            query,
+            headers: req.headers,
+            method: "POST",
+            url: req.url ?? "/",
+        };
+        await callServerFn(fnName, ctx, body, event.node.res);
+    }));
     // Auto sitemap.xml from route manifest
     router.get("/sitemap.xml", defineEventHandler((event) => {
         const baseUrl = process.env["PUBLIC_URL"] ??
@@ -301,7 +594,7 @@ export function createApp(manifest, distDir) {
         if (route.kind !== "api")
             continue;
         const h3ApiPath = route.path.replace(/\[([^\]]+)\]/g, ":$1");
-        const apiModulePath = `${distDir}/server/${route.file}`;
+        const apiModulePath = `${distDir}/server/${toJsPath(route.file)}`;
         for (const method of ["get", "post", "put", "patch", "delete", "head"]) {
             router[method](h3ApiPath, defineEventHandler(async (event) => {
                 const apiMod = await import(apiModulePath);
@@ -377,7 +670,7 @@ export function createApp(manifest, distDir) {
                 searchParams[k] = Array.isArray(v) ? v[0] ?? "" : v;
             }
             // Dynamically import the compiled page module from the dist directory.
-            const pageModulePath = `${distDir}/server/${route.file}`;
+            const pageModulePath = `${distDir}/server/${toJsPath(route.file)}`;
             const mod = await import(pageModulePath);
             const Page = mod.default;
             if (typeof Page !== "function") {
@@ -412,12 +705,12 @@ export function createApp(manifest, distDir) {
             }
             // Support both static metadata and dynamic generateMetadata (production fix)
             const metadata = typeof mod.generateMetadata === "function"
-                ? await mod.generateMetadata(params)
+                ? await mod.generateMetadata({ params, searchParams })
                 : (mod.metadata ?? {});
             const ssrEnabled = mod.ssr === true;
             // ── Layouts ──────────────────────────────────────────────────────────
             const layoutRelPaths = findProdLayoutFiles(route.file, distDir);
-            const layoutMods = await Promise.all(layoutRelPaths.map((p) => import(`${distDir}/server/${p}`)));
+            const layoutMods = await Promise.all(layoutRelPaths.map((p) => import(`${distDir}/server/${toJsPath(p)}`)));
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const layouts = layoutMods.map((m) => m.default).filter((c) => typeof c === "function");
             const layoutsJson = JSON.stringify(layoutRelPaths);
@@ -459,7 +752,7 @@ export function createApp(manifest, distDir) {
                 if (errorRelPath) {
                     try {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        const errorMod = await import(`${distDir}/server/${errorRelPath}`);
+                        const errorMod = await import(`${distDir}/server/${toJsPath(errorRelPath)}`);
                         const ErrorPage = errorMod.default;
                         if (typeof ErrorPage === "function") {
                             renderToResponse(res, {
@@ -489,7 +782,7 @@ export function createApp(manifest, distDir) {
     }
     app.use(router);
     // ─── 404 / not-found fallback ────────────────────────────────────────────────
-    const notFoundPath = `${distDir}/server/app/not-found.tsx`;
+    const notFoundPath = `${distDir}/server/app/not-found.js`;
     app.use(defineEventHandler(async (event) => {
         const res = event.node.res;
         res.statusCode = 404;
@@ -521,8 +814,11 @@ export function createApp(manifest, distDir) {
     }));
     return {
         listen(port = 3000) {
+            // Make the server's base URL available to useServerData during SSR so it
+            // can construct an absolute URL for its internal loop-back fetch.
+            process.env["ALAB_ORIGIN"] = `http://127.0.0.1:${port}`;
             const server = createServer(toNodeListener(app));
-            server.listen(port, () => {
+            server.listen(port, "0.0.0.0", () => {
                 console.log(`  alab  ready at http://localhost:${port}`);
             });
         },