local dev build works, but presentation view does not

codercatdev · codercatdev · commit 277661cf0d57 · 2026-03-17T15:34:07.000-04:00
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,62 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Astro: Dev (debug server + sanity.ts)",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "node",
+      "runtimeArgs": ["--inspect"],
+      "program": "${workspaceFolder}/apps/web/node_modules/astro/bin/astro.mjs",
+      "args": ["dev"],
+      "cwd": "${workspaceFolder}/apps/web",
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"]
+    },
+    {
+      "name": "Astro: Attach to running dev server",
+      "type": "node",
+      "request": "attach",
+      "port": 9229,
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "sourceMaps": true,
+      "restart": true
+    },
+    {
+      "name": "Astro: Chrome (client-side)",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:4321",
+      "webRoot": "${workspaceFolder}/apps/web",
+      "sourceMapPathOverrides": {
+        "webpack:///./*": "${webRoot}/*",
+        "webpack:///src/*": "${webRoot}/src/*",
+        "webpack:///*": "*"
+      }
+    },
+    {
+      "name": "Astro: Dev + Chrome",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "node",
+      "runtimeArgs": ["--inspect"],
+      "program": "${workspaceFolder}/apps/web/node_modules/astro/bin/astro.mjs",
+      "args": ["dev"],
+      "cwd": "${workspaceFolder}/apps/web",
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "serverReadyAction": {
+        "pattern": "Local:.*(https?://[^\\s]+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Astro: Full (server + browser)",
+      "configurations": ["Astro: Dev (debug server + sanity.ts)", "Astro: Chrome (client-side)"],
+      "stopAll": true
+    }
+  ]
+}
diff --git a/apps/sanity/sanity.config.ts b/apps/sanity/sanity.config.ts
@@ -58,6 +58,10 @@ const apiVersion = process.env.SANITY_STUDIO_API_VERSION || "2025-09-30";
 const presentationEnabled =
 	process.env.SANITY_STUDIO_DISABLE_PRESENTATION !== "true";
 
+// Use local Astro dev server for presentation preview when running Studio locally
+const isLocal = typeof import.meta !== "undefined" && import.meta.env?.DEV;
+const localPreviewOrigin = "http://localhost:4321";
+
 // ── Shared helpers ───────────────────────────────────────────────────
 function resolveHref(type: string, slug?: string): string | undefined {
   switch (type) {
@@ -258,7 +262,9 @@ export default defineConfig([
     basePath: "/production",
     schema: { types: schemaTypes },
     document: { actions: documentActions },
-    plugins: buildPlugins("https://codingcat.dev"),
+    plugins: buildPlugins(
+      isLocal ? localPreviewOrigin : "https://codingcat.dev",
+    ),
   },
   {
     name: "dev",
@@ -268,6 +274,8 @@ export default defineConfig([
     basePath: "/dev",
     schema: { types: schemaTypes },
     document: { actions: documentActions },
-    plugins: buildPlugins("https://dev.codingcat.dev"),
+    plugins: buildPlugins(
+      isLocal ? localPreviewOrigin : "https://dev.codingcat.dev",
+    ),
   },
 ]);
diff --git a/apps/web/.dev.vars.example b/apps/web/.dev.vars.example
@@ -9,6 +9,5 @@ BETTER_AUTH_URL=http://localhost:4321
 GOOGLE_CLIENT_ID=your-google-client-id
 GOOGLE_CLIENT_SECRET=your-google-client-secret
 
-# Sanity (for preview/draft mode — read queries use public API)
-SANITY_API_TOKEN=your-sanity-api-token
-SANITY_PREVIEW_SECRET=your-preview-secret
+# Sanity (viewer token for draft mode / Visual Editing — Presentation tool validates via API)
+SANITY_API_READ_TOKEN=your-sanity-viewer-token
diff --git a/apps/web/.env.example b/apps/web/.env.example
@@ -2,9 +2,7 @@
 SANITY_PROJECT_ID=hfh83o0w
 SANITY_DATASET=production
 SANITY_API_TOKEN=
-
-# Preview
-SANITY_PREVIEW_SECRET=
+# SANITY_API_READ_TOKEN = viewer token for draft mode / Visual Editing (optional; required for Presentation tool)
 
 # Auth (better-auth)
 BETTER_AUTH_SECRET=
diff --git a/apps/web/astro.config.mjs b/apps/web/astro.config.mjs
@@ -6,8 +6,31 @@ import tailwindcss from "@tailwindcss/vite";
 import fs from "node:fs";
 import path from "node:path";
 
-// Sanity config — dataset comes from env var (set by wrangler vars or .env)
-// In astro.config.mjs, .env files are NOT loaded — use process.env
+// Load .env and .env.local into process.env before config runs.
+// (Using a function config with loadEnv broke virtual module resolution.)
+function loadEnvIntoProcess(dir) {
+  for (const name of [".env", ".env.local"]) {
+    const file = path.join(dir, name);
+    try {
+      const raw = fs.readFileSync(file, "utf8");
+      for (const line of raw.split("\n")) {
+        const trimmed = line.trim();
+        if (!trimmed || trimmed.startsWith("#")) continue;
+        const eq = trimmed.indexOf("=");
+        if (eq === -1) continue;
+        const key = trimmed.slice(0, eq).trim();
+        let value = trimmed.slice(eq + 1).trim();
+        if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'")))
+          value = value.slice(1, -1).replace(/\\(.)/g, "$1");
+        if (!Object.prototype.hasOwnProperty.call(process.env, key)) process.env[key] = value;
+      }
+    } catch {
+      // ignore missing file
+    }
+  }
+}
+loadEnvIntoProcess(process.cwd());
+
 const sanityProjectId = process.env.SANITY_PROJECT_ID || "hfh83o0w";
 const sanityDataset = process.env.SANITY_DATASET || "production";
 
@@ -48,7 +71,7 @@ export default defineConfig({
       projectId: sanityProjectId,
       dataset: sanityDataset,
       useCdn: false,
-      apiVersion: "2024-01-01",
+      apiVersion: "2026-03-17",
       // Visual Editing: stega encodes edit markers in strings
       // Studio is standalone (apps/sanity), not embedded — no studioBasePath
       stega: {
@@ -61,6 +84,23 @@ export default defineConfig({
     plugins: [tailwindcss(), rawFonts([".ttf", ".otf"])],
     assetsInclude: ["**/*.wasm"],
     assetsExclude: ["**/*.ttf", "**/*.otf"],
+    resolve: {
+      alias: {
+        // Sanity/visual-editing deps pull Node built-ins into client bundle; polyfill for browser
+        stream: "stream-browserify",
+        timers: "timers-browserify",
+      },
+      dedupe: ["react", "react-dom", "react-is", "react-compiler-runtime"],
+    },
+    optimizeDeps: {
+      // Force pre-bundle CJS deps so ESM default/named exports work in client (Sanity visual-editing chain)
+      include: [
+        "react-is",
+        "react-compiler-runtime",
+        "lodash",
+        "lodash/isObject",
+      ],
+    },
     ssr: {
       external: ["buffer", "path", "fs"].map((i) => `node:${i}`),
     },
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -15,6 +15,7 @@
     "@sanity/astro": "^3.3.1",
     "@sanity/client": "^7.17.0",
     "@sanity/image-url": "^2.0.3",
+    "@sanity/preview-url-secret": "^4.0.3",
     "@tailwindcss/vite": "^4.2.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
@@ -24,11 +25,15 @@
     "drizzle-orm": "^0.45.1",
     "groq": "^5.16.0",
     "react": "^19.2.4",
+    "react-compiler-runtime": "^1.0.0",
     "react-dom": "^19.2.4",
+    "react-is": "^19.2.4",
     "tailwindcss": "^4.2.1",
     "workers-og": "^0.0.27"
   },
   "devDependencies": {
-    "drizzle-kit": "^0.31.9"
+    "drizzle-kit": "^0.31.9",
+    "stream-browserify": "^3.0.0",
+    "timers-browserify": "^2.0.12"
   }
 }
diff --git a/apps/web/src/pages/api/draft-mode/enable.ts b/apps/web/src/pages/api/draft-mode/enable.ts
@@ -2,43 +2,60 @@
  * Enable draft mode for Sanity Visual Editing.
  *
  * Called by the Studio's Presentation Tool when loading the preview iframe.
- * Validates SANITY_PREVIEW_SECRET, sets a __sanity_preview cookie, and
- * redirects to the requested page.
+ * Validates the request URL with @sanity/preview-url-secret (secrets live in
+ * the Sanity dataset). Sets a __sanity_preview cookie and redirects.
  *
- * Usage: /api/draft-mode/enable?secret=<value>&slug=/post/my-post
+ * Requires SANITY_API_READ_TOKEN (viewer rights). No SANITY_PREVIEW_SECRET needed.
  */
 import type { APIRoute } from "astro";
+import { createClient } from "@sanity/client";
+import { validatePreviewUrl } from "@sanity/preview-url-secret";
 import { env } from "cloudflare:workers";
 
 export const prerender = false;
 
-export const GET: APIRoute = async ({ url, cookies, redirect }) => {
-  const secret = url.searchParams.get("secret");
-  const slug = url.searchParams.get("slug") || "/";
+const PROJECT_ID = "hfh83o0w";
+const DATASETS = ["production", "dev"] as const;
 
-  // Fail-closed: require SANITY_PREVIEW_SECRET to be configured
-  const expectedSecret = (env as Record<string, string>).SANITY_PREVIEW_SECRET;
-  if (!expectedSecret) {
-    return new Response("Draft mode not configured — SANITY_PREVIEW_SECRET is missing", {
-      status: 503,
-    });
+export const GET: APIRoute = async ({ url, cookies, redirect, request }) => {
+  const token = (env as Record<string, string>).SANITY_API_READ_TOKEN;
+  if (!token) {
+    return new Response(
+      "Draft mode not configured — SANITY_API_READ_TOKEN is missing",
+      { status: 503 },
+    );
   }
 
-  // Validate the secret
-  if (!secret || secret !== expectedSecret) {
-    return new Response("Invalid preview secret", { status: 401 });
+  const requestUrl = request.url;
+
+  for (const dataset of DATASETS) {
+    const client = createClient({
+      projectId: (env as Record<string, string>).SANITY_PROJECT_ID || PROJECT_ID,
+      dataset,
+      apiVersion: "2026-03-17",
+      useCdn: false,
+      token,
+    });
+
+    const { isValid, redirectTo = "/" } = await validatePreviewUrl(
+      client,
+      requestUrl,
+    );
+
+    if (isValid) {
+      const isLocal = url.hostname === "localhost";
+
+      cookies.set("__sanity_preview", "1", {
+        path: "/",
+        httpOnly: true,
+        sameSite: isLocal ? "lax" : "none",
+        secure: !isLocal,
+        maxAge: 60 * 60,
+      });
+
+      return redirect(redirectTo, 307);
+    }
   }
 
-  // Set the preview cookie — httpOnly so client JS can't tamper with it
-  cookies.set("__sanity_preview", "1", {
-    path: "/",
-    httpOnly: true,
-    sameSite: "none",
-    secure: true,
-    // 1 hour — long enough for an editing session
-    maxAge: 60 * 60,
-  });
-
-  // Redirect to the requested page
-  return redirect(slug, 307);
+  return new Response("Invalid preview secret", { status: 401 });
 };
diff --git a/apps/web/src/utils/sanity.ts b/apps/web/src/utils/sanity.ts
@@ -17,10 +17,27 @@
  * - No token needed (public API)
  */
 import type { QueryParams } from "sanity";
-import { sanityClient } from "sanity:client";
+import { createClient } from "@sanity/client";
 import imageUrlBuilder from "@sanity/image-url";
 import type { SanityImageSource } from "@sanity/image-url/lib/types/types";
 
+// Studio URL required for stega encoding (click-to-edit overlays in Presentation tool).
+// Set PUBLIC_SANITY_STUDIO_URL to http://localhost:3333 when running Studio locally.
+const studioUrl =
+  import.meta.env.PUBLIC_SANITY_STUDIO_URL || "https://codingcat.dev.sanity.studio";
+
+// Create client explicitly so we don't rely on the "sanity:client" virtual module,
+// which can fail to resolve in some Vite/Astro contexts (e.g. config loading).
+const sanityClient = createClient({
+  projectId: import.meta.env.SANITY_PROJECT_ID || "hfh83o0w",
+  dataset: import.meta.env.SANITY_DATASET || "production",
+  apiVersion: "2026-03-17",
+  useCdn: false,
+  stega: {
+    studioUrl,
+  },
+});
+
 const builder = imageUrlBuilder(sanityClient);
 
 export function urlForImage(source: SanityImageSource) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
