Hydrogen boilerplate code (homepage) doesn't load in builder

I followed the steps mentioned in Integrating Builder Pages. The server runs locally without any issues, and localhost renders the correct webpage. But the same URL does not render inside builder.

The integrating pages doc does not work out of the box, so I’m writing down the steps I followed exactly for better clarification:

  1. Created boilerplate hydrogen app with npm create @shopify/hydrogen@latest
  2. Added react builder sdk npm install @builder.io/sdk-react
  3. Added builder component as mentioned here. The docs asks to add the code in ($slug)._index.tsx but that file does not exist. After googling and reading the code a bit, I realized it should be in $.tsx file. I think this is the right way, if not please correct me.
  4. Run the server
  5. Created a “Page” model in builder. Set the Preview URL to http://localhost:3000/
  6. Next, created content named “Home” in builder. Set the page url path to “/”

After this, when I open localhost:3000 on my browser, the home page renders correctly.

But inside builder’s visual editor the page doesn’t get rendered and I see “Preview Load Error”. I checked the browser’s console, and saw “Refused to frame ‘http://localhost:3000/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘none’”” error. In server logs, I see 200 success response.

After some more searching on builder forum, I saw someone had commented out responseHeaders.set('Content-Security-Policy', header); line in entry.server.tsx. I did the same.
Now, the page loads in the visual editor, but I still see the “Preview Load Error” and in browser console, this warning appears - No src or data.url provided to Image component.

I’m not sure what’s happening, but it has not been easy to setup builder with Hydrogen so far. Can someone please help fix this?

Few resources that might be of help:

@manish-sharma Any chance you got the Hydrogen setup working?

Hey @shreyas707 I was able to get your repo working. I am sharing a loom for your reference. I could see your repo is missing the .env file. Please add that file and you could add the mock SESSION_SECRET.
Please add the below lines in your .env file SESSION_SECRET="foobar" PUBLIC_STORE_DOMAIN="mock.shop"

Let me know if you need more assistance.

Hi @sheema, thanks for taking the time to test and record a video.

I didn’t commit the .env file for security reasons. I had added all these env variables and it still didn’t work.


I removed all the env variables and tried with just SESSION_SECRET=foobar and PUBLIC_STORE_DOMAIN=mock.shop, but still getting the same error as you’re getting in the video at 2:05. I don’t know how it suddenly worked for you. What version of node are you using?

Hey @shreyas707 the error on my site was because it wasn’t properly updated yet and after a hard refresh it did work. I am using v20.8.0.

@sheema Still doesn’t work. I get this error in my console

Do you think it has anything to do with settings in Builder? Any help is appreciated.

Hey @shreyas707 I was able to setup my pages in your space as well. But I see the same issue your were facing on the “Home” page you have setup. This is happening because of how the page urls are routed. Please change your code in your _index.tsx to this-

// ($slug)._index.tsx
import {
} 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 = "34490c3c59c34f3db7d5529a389a155c";

export const loader = async ({ params, request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const urlPath = `/`; // the url path should be set to /

  const page = await fetchOneEntry({
    model: 'page',
    apiKey: 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} />;

Let me know if this resolves the issue for you.

@sheema Do you mean change the code in $.tsx file? I did it, and still facing the same issue.

Getting this log in my terminal if it helps

   GET  200  render  /?builder.space=34490c3c59c34f3db7d5529a389a155c&builder.user.permissions=read%2Ccreate%2Cpublish%2CeditCode%2CeditDesigns%2Cadmin%2CeditLayouts%2CeditLayers&builder.user.role.name=Admin&builder.user.role.id=admin&builder.cachebust=true&builder.preview=page&builder.noCache=true&builder.allowTextEdit=true&__builder_editing__=true&builder.overrides.page=4898d08c4ba24a3fb2a1f1caa96b736d&builder.overrides.4898d08c4ba24a3fb2a1f1caa96b736d=4898d08c4ba24a3fb2a1f1caa96b736d&builder.overrides.page:/=4898d08c4ba24a3fb2a1f1caa96b736d&builder.frameEditing=page  31ms

I mean your _index.tsx file. Your $.tsx file doesn’t need any changes. Please revert any changes made to it.

@sheema You asked me not to touch $.tsx, so I’ve left it exactly as it is. Now, $.tsx and _index.tsx has the same code except for this line - const urlPath = /;

And it still doesn’t work. Facing the same issue again

Hey could you test out if any of these pages work for you:

Please share the error from your vs code for the page that is not working.

Also, make sure your localhost is up and running.