Homepage Fix for a Builder.io Migration

PROJECT BRIEF: Fix Blank Homepage After Switching to Builder.io

Context

Running a Node.js + Express backend on AWS (EC2) with S3, DynamoDB, and CloudFront.

The backend is fully functional. All API endpoints and dynamic post pages work as expected.

Previously, the homepage was served using a custom React frontend. Everything worked fine.

The Switch

Recently migrated homepage layout/design to Builder.io for visual editing.

The homepage route (/) now fetches HTML dynamically from Builder’s CDN using:

js
Copy
Edit
const htmlRes = await axios.get("https://cdn.builder.io/api/v1/html/page", {
params: { apiKey: process.env.BUILDER_API_KEY, url: "/" }
});
Injecting Open Graph meta tags and Builder's browser SDK script before </head>.

This HTML is served directly from the Express route.

The Issue

Homepage returns a blank screen on load.

DevTools console shows: Uncaught ReferenceError: builder is not defined.

This points to the Builder browser SDK not being available before builder.init() or similar code runs.

What Needs Fixing

Ensure the Builder.io-rendered homepage loads properly in the browser.

Eliminate the builder is not defined error.

Confirm the injected <script src="https://cdn.builder.io/js/browser" async></script> loads before any inline script that references builder.

Ensure the preview URL in Builder.io matches the correct domain or route (right now it resets unexpectedly).

Make sure no other missing dependencies are causing the white screen.

What's Already Working

All backend logic is production-ready.

Dynamic post pages load perfectly and inject metadata correctly.

Server properly fetches and serves Builder.io content.

Visual editor is rendering content correctly inside Builder.io.

You Do NOT Need To:

Touch API or backend routes.

Build or redesign anything.

Work on post page routing—that’s already working dynamically.