My local Hydrogen site is loading the Test Page, but the page builder fails to preview

Technical Questions
1

Builder content link

Builder public api key

2c78369997004eb0aec540d4775072dc

What are you trying to accomplish

I’m working on connecting my local Hydrogen site to the page builder, following the Using your app with Builder section of the Integrate Pages tutorial.

My local site is running as http://localhost:3000. And, it is loading the “Test Page” I created on my builder.io space.

This is the screenshot of http://localhost:3000/test-page

Screenshot 2025-03-08 at 6.08.03 PM
Screenshot 2025-03-08 at 6.08.03 PM1510×622 18.4 KB

Now, I am trying to preview the content in the page builder.

  • I installed the SDK with npm install @builder.io/sdk-react
  • I published the “Test Page” content in builder.io
  • I set the Preview URL of “Page” model as http://localhost:3000

But, I get the Your site is not loading as expected screen when I open the “Test Page” in the page builder.

Screenshot 2025-03-08 at 6.07.39 PM
Screenshot 2025-03-08 at 6.07.39 PM2962×1918 463 KB

  • Clicking the [Refresh] button or the [I still can’t connect] button did not fix the problem.
  • I followed the Troubleshoot Guide link and created the “Test Page”. But the issue still persists.

I’d really appreciate any insights anyone might have on this integration issue. Is there a recommended way to debug this situation?

Code stack you are integrating Builder with

Machine setup:

  • Device: MacBook Pro (2019)
  • OS: macOS, Sequoia 15.3
  • Build tools: Xcode 16.2
  • Node: Using nvm. Version: v20.12.2

Code stack:

  • Hydrogen 2025.1.2
  • React
  • Shopify

Reproducible code example

I copied the below code from the integration tutorial and replaced the apiKey value.

// ($slug)._index.tsx
import {
  Content,
  fetchOneEntry,
  getBuilderSearchParams,
  isPreviewing,
} from '@builder.io/sdk-react';
import type { LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { fetch as webFetch } from '@remix-run/web-fetch';

const apiKey = '2c78369997004eb0aec540d4775072dc';

export const loader = async ({ params, request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const urlPath = `/${params['slug'] || ''}`;

  const page = await fetchOneEntry({
    model: 'page',
    apiKey,
    options: getBuilderSearchParams(url.searchParams),
    userAttributes: { urlPath },
    fetch: webFetch,
  });

  if (!page && !isPreviewing(url.search)) {
    throw new Response('Page Not Found', {
      status: 404,
      statusText: 'Page not found in Builder.io',
    });
  }

  return { page };
};

// Define and render the page.
export default function Page() {
  // Use the useLoaderData hook to get the Page data from `loader` above.
  const { page } = useLoaderData<typeof loader>();

  // Render the page content from Builder.io
  return <Content model="page" apiKey={apiKey} content={page as any} />;
}