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:
Created boilerplate hydrogen app with npm create @shopify/hydrogen@latest
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.
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?
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"
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 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 {
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 = "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} />;
}
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
@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
