create-brainerce-store 1.67.0 → 1.68.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.67.0",
+      version: "1.68.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.67.0",
+  "version": "1.68.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/.env.local.ejs

@@ -38,6 +38,13 @@ NEXT_PUBLIC_BRAINERCE_API_URL=<%- apiBaseUrlEnv %>
 # Set it in your hosting provider's environment variables, not in this file:
 # .env.local is gitignored and never travels with a deploy.
 # `NEXT_PUBLIC_SITE_URL` is still read as a backwards-compatible alias.
+#
+# On some hosts SITE_URL is NOT optional. Platforms whose proxy forwards
+# requests to the app as `Host: localhost:<port>` (OpenAI Sites /
+# *.chatgpt.site, among others) hide the real hostname from the server, so
+# nothing can be resolved from the request. Set SITE_URL there, or server-side
+# API calls send `Origin: http://localhost:3000` and a sales channel with a
+# configured Domain rejects them with 403.
 
 # Optional: floating WhatsApp contact button (used by some designs, e.g.
 # passepartout). Digits only, international format without "+"

package/templates/nextjs/base/AGENTS.md.ejs

@@ -81,6 +81,13 @@ development and on any host with nothing configured.
   `getRequestOrigin()` (for the `Origin` header sent to Brainerce). Hand-rolled
   versions have shipped `http://` on HTTPS hosts and internal container
   hostnames.
+- **Some hosts hide the real hostname from the app.** Platforms whose proxy
+  forwards requests as `Host: localhost:<port>` with no `x-forwarded-host`
+  (OpenAI Sites / `*.chatgpt.site` does this) leave the resolver blind — the
+  request looks like it arrived on localhost. On such platforms `SITE_URL` is
+  not optional: set it, and the resolver prefers it over any internal host it
+  sees. Without it, server-side API calls send `Origin: http://localhost:3000`
+  and a channel with a configured Domain rejects them with 403.
 - **When the merchant gives you a real domain**, set `SITE_URL` in the hosting
   provider's environment variables — not in `.env.local`, which is gitignored
   and never travels with a deploy.

package/templates/nextjs/base/CLAUDE.md.ejs

@@ -92,6 +92,13 @@ development and on any host with nothing configured.
   `getRequestOrigin()` (for the `Origin` header sent to Brainerce). Hand-rolled
   versions have shipped `http://` on HTTPS hosts and internal container
   hostnames.
+- **Some hosts hide the real hostname from the app.** Platforms whose proxy
+  forwards requests as `Host: localhost:<port>` with no `x-forwarded-host`
+  (OpenAI Sites / `*.chatgpt.site` does this) leave the resolver blind — the
+  request looks like it arrived on localhost. On such platforms `SITE_URL` is
+  not optional: set it, and the resolver prefers it over any internal host it
+  sees. Without it, server-side API calls send `Origin: http://localhost:3000`
+  and a channel with a configured Domain rejects them with 403.
 - **When the merchant gives you a real domain**, set `SITE_URL` in the hosting
   provider's environment variables — not in `.env.local`, which is gitignored
   and never travels with a deploy.

package/templates/nextjs/base/src/app/blog/[slug]/page.tsx.ejs

@@ -83,7 +83,10 @@ export default async function BlogPostPage({ params }: PageProps) {
   const slug = decodeSlug(rawSlug);
   const client = await getServerClient(locale);
   const [post, storeInfo] = await Promise.all([
-    client.blog.getPost(slug).catch(() => null),
+    // getPost returns null only on a genuine 404; any other API failure (a
+    // 403 from the channel's origin check, a network error) throws and
+    // surfaces as the error it is instead of masquerading as a missing post.
+    client.blog.getPost(slug),
     client.getStoreInfo().catch(() => null),
   ]);
   if (!post) {
@@ -220,7 +223,10 @@ export default async function BlogPostPage({ params }: PageProps) {
   const slug = decodeSlug(rawSlug);
   const client = await getServerClient();
   const [post, storeInfo] = await Promise.all([
-    client.blog.getPost(slug).catch(() => null),
+    // getPost returns null only on a genuine 404; any other API failure (a
+    // 403 from the channel's origin check, a network error) throws and
+    // surfaces as the error it is instead of masquerading as a missing post.
+    client.blog.getPost(slug),
     client.getStoreInfo().catch(() => null),
   ]);
   if (!post) {

package/templates/nextjs/base/src/app/category/[slug]/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import type { Product } from 'brainerce';
+import { BrainerceError } from 'brainerce';
 import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
 import { buildMetaDescription } from '@/core/lib/seo';
 import { sanitizeHtml } from '@/core/lib/sanitize';
@@ -77,8 +77,13 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
         images: category.image ? [category.image] : [],
       },
     };
-  } catch {
-    return { title: 'Category not found' };
+  } catch (err) {
+    if (err instanceof BrainerceError && err.statusCode === 404) {
+      return { title: 'Category not found' };
+    }
+    // Anything else (channel origin rejection, network failure) hits the page
+    // render below too and surfaces there — don't stamp a misleading title.
+    return {};
   }
 }
 
@@ -87,14 +92,18 @@ export default async function CategoryPage({ params }: Props) {
   const slug = decodeSlug(rawSlug);
   const client = await getServerClient(locale);
 
-  const category = await client.getCategoryBySlug(slug).catch(() => null);
+  // Only a genuine 404 becomes a storefront 404; a 403 from the channel's
+  // origin check or a network failure must surface as the error it is, not
+  // masquerade as a missing category (or an empty one).
+  const category = await client.getCategoryBySlug(slug).catch((err: unknown) => {
+    if (err instanceof BrainerceError && err.statusCode === 404) return null;
+    throw err;
+  });
   if (!category) notFound();
 
   // The listing endpoint owns pagination/FX/publish gating — reuse it rather
   // than duplicating a product query here.
-  const { data: products } = await client
-    .getProducts({ categories: [category.id], limit: 48 })
-    .catch(() => ({ data: [] as Product[] }));
+  const { data: products } = await client.getProducts({ categories: [category.id], limit: 48 });
 
   const baseUrl = await getCanonicalSiteUrl();
   const url = `${baseUrl}/category/${category.slug || slug}`;

package/templates/nextjs/base/src/app/error.tsx.ejs

@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect } from 'react';
+import Link from 'next/link';
+
+/**
+ * Error page — rendered when a page render throws. Kept deliberately separate
+ * from the 404 page: an API failure (a rejected Origin, a network error, a
+ * 5xx) is NOT "product not found", and dressing it up as a 404 sends the
+ * merchant hunting for a slug bug that isn't there. The full error is in the
+ * server log; this page only needs to say "temporary" and offer a retry.
+ */
+export default function ErrorPage({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // The server log has the full error; the digest printed here links the two.
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="mx-auto flex max-w-2xl flex-col items-center justify-center px-4 py-24 text-center">
+      <p className="text-sm font-medium text-muted-foreground">
+        <%- language === 'he' ? 'שגיאה' : 'Error' %>
+      </p>
+      <h1 className="mt-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+        <%- language === 'he' ? 'משהו השתבש' : 'Something went wrong' %>
+      </h1>
+      <p className="mt-4 text-muted-foreground">
+        <%- language === 'he' ? 'זו תקלה זמנית בטעינת העמוד — לא עמוד חסר. נסו שוב בעוד רגע.' : 'This is a temporary problem loading the page — not a missing page. Please try again in a moment.' %>
+      </p>
+      <div className="mt-8 flex gap-4">
+        <button
+          type="button"
+          onClick={reset}
+          className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90"
+        >
+          <%- language === 'he' ? 'לנסות שוב' : 'Try again' %>
+        </button>
+        <Link
+          href="/"
+          className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-muted"
+        >
+          <%- language === 'he' ? 'לדף הבית' : 'Go home' %>
+        </Link>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/pages/[slug]/page.tsx.ejs

@@ -40,7 +40,10 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
 export default async function StaticPage({ params }: PageProps) {
   const { locale, slug: rawSlug } = await params;
   const slug = decodeSlug(rawSlug);
-  const page = await (await getServerClient(locale)).content.page.getBySlug(slug, locale).catch(() => null);
+  // getBySlug returns null only on a genuine 404; any other API failure (a
+  // 403 from the channel's origin check, a network error) throws and surfaces
+  // as the error it is instead of masquerading as a missing page.
+  const page = await (await getServerClient(locale)).content.page.getBySlug(slug, locale);
   if (!page) notFound();
   return (
     <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
@@ -75,7 +78,10 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
 export default async function StaticPage({ params }: PageProps) {
   const { slug: rawSlug } = await params;
   const slug = decodeSlug(rawSlug);
-  const page = await (await getServerClient()).content.page.getBySlug(slug).catch(() => null);
+  // getBySlug returns null only on a genuine 404; any other API failure (a
+  // 403 from the channel's origin check, a network error) throws and surfaces
+  // as the error it is instead of masquerading as a missing page.
+  const page = await (await getServerClient()).content.page.getBySlug(slug);
   if (!page) notFound();
   return (
     <article className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { notFound, permanentRedirect } from 'next/navigation';
-import { getProductPriceInfo } from 'brainerce';
+import { BrainerceError, getProductPriceInfo } from 'brainerce';
 import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce.server';
 import { resolveCurrency } from '@/core/lib/resolve-currency';
 import { buildMetaDescription } from '@/core/lib/seo';
@@ -123,10 +123,13 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
         ...(brandName ? { 'product:brand': brandName } : {}),
       },
     };
-  } catch {
-    return {
-      title: 'Product not found',
-    };
+  } catch (err) {
+    if (err instanceof BrainerceError && err.statusCode === 404) {
+      return { title: 'Product not found' };
+    }
+    // Anything else (channel origin rejection, network failure) hits the page
+    // render below too and surfaces there — don't stamp a misleading title.
+    return {};
   }
 }
 
@@ -138,7 +141,14 @@ export default async function ProductDetailPage({ params }: Props) {
   let product;
   try {
     product = await client.getProductBySlug(slug);
-  } catch {
+  } catch (err) {
+    // Only a genuine 404 may become a storefront 404. Anything else — a 403
+    // from the channel's origin check, a network failure, a 5xx — is a
+    // configuration or availability problem; disguising it as "product not
+    // found" sends the merchant hunting for a slug bug that isn't there.
+    if (!(err instanceof BrainerceError && err.statusCode === 404)) {
+      throw err;
+    }
     // The slug may have been RENAMED — the platform records every rename.
     // 301 the old URL to the current slug so its ranking and inbound links
     // carry over; genuine unknowns fall through to the 404 page. Default

package/templates/nextjs/base/src/core/lib/site-url.ts

@@ -22,16 +22,37 @@ import { headers } from 'next/headers';
  *     and must not be forgeable by a request header.
  *
  *   {@link getRequestOrigin} — the address a request actually ARRIVED on.
- *     Request headers first, because this is what the backend's origin check
- *     has to match; claiming the production domain from a preview deployment
- *     would pass a check that ought to fail.
+ *     Request headers first — unless they name an internal host (localhost,
+ *     127.0.0.1, a bind address) and an origin is configured, because an
+ *     internal host is how the platform's proxy addresses this server, not
+ *     where the request came from. Claiming the production domain from a
+ *     preview deployment on a real hostname would still pass a check that
+ *     ought to fail, so public hostnames keep winning over the env.
  */
 
 const DEV_FALLBACK = 'http://localhost:3000';
 
-function isLoopback(host: string): boolean {
-  const name = host.split(':')[0].toLowerCase();
-  return name === 'localhost' || name === '127.0.0.1' || name === '[::1]' || name === '::1';
+/**
+ * Hosts that can never be a storefront's public address: loopback names and
+ * the 0.0.0.0 bind address. Some hosting proxies (OpenAI Sites among them)
+ * forward requests to the app with `Host: localhost:<port>` and no
+ * `x-forwarded-host`, so seeing one of these in a request means "the proxy's
+ * internal leg", not "the shopper is on localhost".
+ */
+function isInternalHost(host: string): boolean {
+  const name = host.startsWith('[')
+    ? host.slice(1, host.includes(']') ? host.indexOf(']') : host.length)
+    : host.split(':')[0];
+  const lower = name.toLowerCase();
+  return lower === 'localhost' || lower === '127.0.0.1' || lower === '::1' || lower === '0.0.0.0';
+}
+
+function isInternalOrigin(origin: string): boolean {
+  try {
+    return isInternalHost(new URL(origin).host);
+  } catch {
+    return false;
+  }
 }
 
 /**
@@ -44,7 +65,7 @@ function toOrigin(raw: string | undefined): string | null {
   if (!trimmed) return null;
   const hasProtocol = /^https?:\/\//i.test(trimmed);
   const bare = trimmed.replace(/^\/\//, '');
-  const candidate = hasProtocol ? trimmed : `${isLoopback(bare) ? 'http' : 'https'}://${bare}`;
+  const candidate = hasProtocol ? trimmed : `${isInternalHost(bare) ? 'http' : 'https'}://${bare}`;
   try {
     return new URL(candidate).origin;
   } catch {
@@ -112,7 +133,7 @@ function fromForwardedHeaders(h: Headers): string | null {
   const host = forwardedHost || h.get('host')?.trim();
   if (!host) return null;
   const proto =
-    h.get('x-forwarded-proto')?.split(',')[0]?.trim() || (isLoopback(host) ? 'http' : 'https');
+    h.get('x-forwarded-proto')?.split(',')[0]?.trim() || (isInternalHost(host) ? 'http' : 'https');
   return toOrigin(`${proto}://${host}`);
 }
 
@@ -187,11 +208,23 @@ export async function getRequestOrigin(requestHeaders?: Headers): Promise<string
   // dynamically rather than prerendered against a fallback origin.
   const h = requestHeaders ?? (await headers());
   const fromRequest = fromForwardedHeaders(h);
-  if (fromRequest) return fromRequest;
 
+  // A public hostname from the request wins outright — it is what this
+  // request actually arrived on.
+  if (fromRequest && !isInternalOrigin(fromRequest)) return fromRequest;
+
+  // An internal host here does NOT mean the request arrived on localhost. It
+  // means the platform's proxy addresses this server by its bind address
+  // (`Host: localhost:3000`, no `x-forwarded-host`) — OpenAI Sites does
+  // exactly this — and the request's true origin is invisible to us. A
+  // configured origin is the only correct answer then. In plain local dev
+  // nothing is configured, so the loopback host (with its real port) still
+  // wins below.
   const configured = getSiteUrlFromEnv();
   if (configured) return configured;
 
+  if (fromRequest) return fromRequest;
+
   warnUnresolved();
   return DEV_FALLBACK;
 }