I was trying to replace builder preview and page model URL for my dev website but was unable to do so. I kept on getting errors in the builder playground/editor.
Can you help me resolve this?
Hello @sohail,
Can you give us more context on the issue? Have you deployed your app with builder integration for the development environment?
Till now I was trying to develop and edit in localhost which worked just fine.
Now I was trying to create a development environment (hosted on aws) for my website and wanted to add Builder to it so that we can create/edit pages on live website.
I tried to change the Page model URL and also the preview URL in Builder and set it as my live website URL now but Builder editor shows that error (ss attached above) when I try to create any landing page.
Basically I wish to deploy/use Builder on my live website now.
Can you please guide me on this?
Hello Sohail!
Firstly, you’ll need to deploy your app on your AWS instance. Ensure that the development domain is accessible and has proper DNS records configured. Once the development domain is accessible, update the Builder preview URL with the same.
You can find detailed instructions on deploying a Next.js app on AWS in the following documentation: Deploying a Next.js App on AWS.
This part is already done. The website is live on AWS.
Hello @sohail ,
Can you share your development environment domain?
Hello @sohail,
It seems that there is an issue with the builder integration code you deployed. Could you please share the code with us? Also, please make sure that the builder API key is initialized correctly from the environment variable on aws or code base.
src/components/Builder.ts
// components/builder.tsx
"use client";
import { builder } from "@builder.io/sdk";
import { BuilderComponent, useIsPreviewing } from "@builder.io/react";
import { ComponentProps } from "react";
import "../builder-registry";
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY ?? "");
type BuilderPageProps = ComponentProps<typeof BuilderComponent>;
export function RenderBuilderContent({
content,
model,
}: Readonly<BuilderPageProps>) {
// Call the useIsPreviewing hook to determine if
// the page is being previewed in Builder
const isPreviewing = useIsPreviewing();
// If `content` has a value or the page is being previewed in Builder,
// render the BuilderComponent with the specified content and model props.
if (content || isPreviewing) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
return <BuilderComponent content={content} model={model} />;
}
// If the `content` is falsy and the page is
// not being previewed in Builder, do not render
// the component.
return <></>;
}
src/builder-registry.ts
"use client";
import { builder, Builder } from "@builder.io/react";
import EventCallout from "./components/event-callout/event-callout";
import PullQuote from "./components/pull-quote/pull-quote";
import Subscribe from "./components/subscribe/subscribe";
import { TitleInfo } from "./components/builder/title-info/title-info";
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
Builder.registerComponent(Subscribe, {
name: "Subscribe",
inputs: [
{
name: "bgImageURL",
type: "string",
},
{
name: "fontColor",
type: "string",
},
{
name: "fontFamily",
type: "string",
},
],
});
Builder.registerComponent(EventCallout, {
name: "EventCallout",
inputs: [
{
name: "bgImageColor",
type: "string",
},
{
name: "bgImageURL",
type: "string",
},
{
name: "displayDateTime",
type: "string",
required: true,
},
{
name: "eventDescription",
type: "string",
required: true,
},
{
name: "eventEndDate",
type: "number",
required: true,
},
{
name: "eventLocation",
type: "string",
required: true,
},
{
name: "eventStartDate",
type: "number",
required: true,
},
{
name: "eventTitle",
type: "string",
required: true,
},
{
name: "imageURL",
type: "string",
required: true,
},
],
});
Builder.registerComponent(PullQuote, {
name: "PullQuote",
inputs: [
{
name: "backgroundImage",
type: "string",
},
{
name: "quote",
type: "string",
required: true,
},
{
name: "source",
type: "string",
required: true,
},
{
name: "sourceName",
type: "string",
required: true,
},
],
});
Builder.registerComponent(TitleInfo, {
name: "TitleInfo",
inputs: [
{
name: "entryName",
type: "string",
defaultValue: "Incarnate",
required: false,
},
{
name: "suspense",
type: "boolean",
defaultValue: false,
required: false,
},
],
});
src/app/builder/[…page]/page.tsx
Please note that I have added the /builder prefix to my page data model URLs already as I need this path URL here
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "@/components/builder";
import dynamic from "next/dynamic";
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY ?? "");
type PageProps = {
params: {
page: string[];
};
};
async function Page(props: Readonly<PageProps>) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const content = await builder
.get("page", {
userAttributes: {
// Use the page path specified in the URL to fetch the content
urlPath: "/builder/" + (props?.params?.page?.join("/") || ""),
},
// Set prerender to false to return JSON instead of HTML
prerender: false,
})
// Convert the result to a promise
.toPromise();
return (
<div className="mt-20 justify-center w-full">
{/* Render the Builder page */}
{/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
<RenderBuilderContent content={content} />
</div>
);
}
export default dynamic(() => Promise.resolve(Page), { ssr: false });
{
"name": "pont",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"dev:ssl": "next dev --experimental-https",
"build": "next build",
"start": "next start",
"test": "jest --watchAll=false",
"test:watch": "jest --watchAll",
"test:coverage": "jest --coverage",
"lint": "next lint",
"check-types": "tsc --pretty --noEmit",
"prepare": "husky install",
"cypress:open": "cypress open"
},
"dependencies": {
"@builder.io/dev-tools": "^1.0.1",
"@builder.io/react": "^3.2.6",
"@builder.io/sdk": "^2.2.2",
"@mailchimp/mailchimp_marketing": "^3.0.80",
"@next/third-parties": "^14.2.3",
"@prisma/client": "^5.8.0",
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-popover": "^1.0.7",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-slider": "^1.1.2",
"clsx": "^2.1.0",
"html-react-parser": "^5.1.10",
"moment": "^2.30.1",
"next": "14.0.4",
"next-auth": "^4.24.5",
"next-nprogress-bar": "^2.3.11",
"react": "^18",
"react-dom": "^18",
"remark": "^15.0.1",
"remark-html": "^16.0.1",
"sharp": "^0.33.3",
"tailwind-merge": "^2.2.1"
},
"devDependencies": {
"@next/eslint-plugin-next": "^14.0.4",
"@testing-library/jest-dom": "^6.2.1",
"@testing-library/react": "^14.1.2",
"@types/jest": "^29.5.11",
"@types/lodash": "^4.17.0",
"@types/mailchimp__mailchimp_marketing": "^3.0.20",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"@typescript-eslint/eslint-plugin": "^6.17.0",
"@typescript-eslint/parser": "^6.17.0",
"autoprefixer": "^10.0.1",
"cypress": "^13.6.3",
"eslint": "^8",
"eslint-config-next": "14.0.4",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-cypress": "^2.15.1",
"eslint-plugin-jest": "^27.6.3",
"eslint-plugin-jest-dom": "^5.1.0",
"eslint-plugin-prettier": "^5.1.2",
"eslint-plugin-testing-library": "^6.2.0",
"husky": "^8.0.0",
"jest": "^29.7.0",
"jest-canvas-mock": "^2.5.2",
"jest-environment-jsdom": "^29.7.0",
"jest-mock-extended": "^3.0.5",
"lint-staged": "^15.2.0",
"lodash": "^4.17.21",
"postcss": "^8",
"prettier": "^3.1.1",
"prisma": "^5.7.1",
"tailwindcss": "^3.3.0",
"ts-jest": "^29.1.2",
"ts-node": "^10.9.2",
"typescript": "^5"
}
}
public key
d18ddccf804e4ea8823e9313d4661fbc
My Nextjs is 14.0.4
Node version: v18.19.0
I also added the site URL in builder settings where site URL adding option is given and also updated the site URL in page model.
Hello @sohail,
The integration code looks good. Therefore, we suspect the issue could be with the server headers, which might be blocking the loading of the page within the Builder iframe due to cross-origin or CORS (Cross-Origin Resource Sharing) restrictions. You may need to enable cross-origin requests from Builder.io by configuring CORS settings. You can find guidance on how to do this in the AWS S3 documentation: Configuring CORS on Amazon S3.