# Impossible to add Builder IO to Hydrogen 4

**URL:** <https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319>\
**Category:** Shopify\
**Tags:** visual-editor, react, shopify\
**Created:** [April 8, 2024, 7:28am UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319 "2024-04-08T07:28:06Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexandre\_D](https://avatars.discourse-cdn.com/v4/letter/a/53a042/32.png) [@Alexandre\_D](https://forum.builder.io/u/Alexandre_D)\
**Post date:** [April 8, 2024, 7:28am UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/1 "2024-04-08T07:28:06Z")

</div>

Hello there !

I followed this documentation : [doc](https://www.builder.io/c/docs/quickstart), to trying to add Builder IO (latest version) to Hydrogen V4.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/ae93c3d2e5baae6a70accfca78b1e8ef1aeb7b39.png)

**→ The issue :**

- The first step i did for my project, is to setting a hydrogen project following this tutorial : [Getting started with Hydrogen and Oxygen](https://shopify.dev/docs/custom-storefronts/hydrogen/getting-started)

- Second step : I tried to add Builder IO to the hydrogen project as following the Builder IO doc I mentionned before.

- Thirdly, I start the project with : ``` npm run dev ````

- When i go to Builder IO, going to the ‘homepage’ page that I created, I have the below errors :  

I looked at the code, searching on the whole Internet for my issue, still found nothing that can help me resolve this.

**→ To know :**

- Before using Hydrogen, I already tried to just install Builder IO with Remix, following the official Builder IO doc, and it worked very well.

- But the documentation seems incomplete when you choose to add Builder IO to hydrogen 4

- I found this boilerplate for Builder IO / Hydrogen, but seems deprecated : [GitHub - BuilderIO/builder-shopify-hydrogen: Builder.io Visual CMS + page builder example with Shopify Hydrogen](https://github.com/BuilderIO/builder-shopify-hydrogen)

- For sure, in builder IO, at page “model”, I put the preview URL on localhost:3000

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/5060b2bdf16898fc00417ae0931057c00777e819.png)

Can someone help please ?

Thank you in advance,

Regards,

Alexandre D

---

<div class="post-metadata">

**Author:** ![Alexandre\_D](https://avatars.discourse-cdn.com/v4/letter/a/53a042/32.png) [@Alexandre\_D](https://forum.builder.io/u/Alexandre_D)\
**Post date:** [April 8, 2024, 7:29am UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/2 "2024-04-08T07:29:54Z")

</div>

As I forget, here the packages and depedencies versions used for the project :

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/7/78537cc17f72a519ac76a5a7abbd0f77611b00b2.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 8, 2024, 12:40pm UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/3 "2024-04-08T12:40:32Z")

</div>

Hello @Alexandre_D,

Welcome to the [Builder.io](http://Builder.io) forum post.

Could you please check the browser console for any errors and share a screenshot with us?

Your cooperation is greatly appreciated.

Best regards,

---

<div class="post-metadata">

**Author:** ![Alexandre\_D](https://avatars.discourse-cdn.com/v4/letter/a/53a042/32.png) [@Alexandre\_D](https://forum.builder.io/u/Alexandre_D)\
**Post date:** [April 10, 2024, 9:04am UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/4 "2024-04-10T09:04:54Z")

</div>

Hello Manish-Sharma

Thank you to take in consideration my issue.  
I found a solution for it.

Delete all Hydrogen routes and add the splat route ‘$.tsx’ in my project for allowing route redirection.

Thank you

---

<div class="post-metadata">

**Author:** ![Jch4nni](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@Jch4nni](https://forum.builder.io/u/Jch4nni)\
**Post date:** [April 10, 2024, 12:14pm UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/5 "2024-04-10T12:14:56Z")

</div>

Hi Aleandre\_D,

did you setup hydrogen with npm create @shopify/hydrogen@latest and used the mock.shop for setup? im trying to setup [builder.io](http://builder.io) too but have been running into some issues.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 10, 2024, 12:53pm UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/6 "2024-04-10T12:53:27Z")

</div>

Hello @Jch4nni,

Welcome to the [builder.io](http://builder.io) forum post.

Yes, we have also tested Hydrogen 4 with the latest version by running the command `@shopify/hydrogen@latest` and using the mock.shop. For detailed instructions, I’ve recorded a Loom video that you can refer to at the following link:

https://www.loom.com/embed/5c48b8a556b845a6a14ff85ef7dacea7?sid=0c381080-ef4e-4518-9ad4-ecd1840f3f93

> **[Developer Quickstart - Builder.io](https://www.builder.io/c/docs/quickstart)**
>
> Quickly integrate Builder.io with your application for streamlined Page building with this developer Quickstart.

---

<div class="post-metadata">

**Author:** ![Jch4nni](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@Jch4nni](https://forum.builder.io/u/Jch4nni)\
**Post date:** [April 10, 2024, 1:51pm UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/7 "2024-04-10T13:51:41Z")

</div>

HI manisch-sharma,

first off thank you so much for the video. I have a few questions regarding the setup:

What node version are you using?  
Which options are you choosing for hydrogen setup?

Did you create $.tsx in routes or did you use the ($Locale).$.tsx?

also i am getting this error in my console while trying to preview the testpage in [builder.io](http://builder.io):

GET 404 render /home?builder.space=be37c110ca864456808e37e9fa1872da&builder.cachebust=true&builder.preview=page&builder.noCache=true&builder.allowTextEdit=true& **builder\_editing** =true&builder.overrides.page=0e34b2f7676b407cbf594dd9985912a9&builder.overrides.0e34b2f7676b407cbf594dd9985912a9=0e34b2f7676b407cbf594dd9985912a9&builder.frameEditing=page

fyi: i am using Ubuntu 22 lts and node 20

and i also noticed that after i created $.tsx and pasted your code i am getting this console error:

✘ [ERROR] Node builtin “vm” (imported by “node\_modules/@builder.io/sdk-react/lib/edge/blocks-fe027bf7.js”) must be polyfilled for the browser. You can enable this polyfill in your Remix config, e.g. `browserNodeBuiltinsPolyfill: { modules: { vm: true } }` [plugin browser-node-builtins-polyfill-plugin]

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 10, 2024, 2:16pm UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/8 "2024-04-10T14:16:50Z")

</div>

Hello @Jch4nni,

To resolve the polyfilled error, you can add the below code in your remix.config.ts

```auto
  browserNodeBuiltinsPolyfill: {
    modules: {
      vm: true,
    },
  },

```

 ![Screenshot 2024-04-10 at 7.45.27 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/6185b76e6c9f76702646fd7d326af5968f372549.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 10, 2024, 2:18pm UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/9 "2024-04-10T14:18:08Z")

</div>

Additionally, I used the $.tsx file located in the routes directory to integrate builder.

---

<div class="post-metadata">

**Author:** ![Jch4nni](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@Jch4nni](https://forum.builder.io/u/Jch4nni)\
**Post date:** [April 11, 2024, 9:40am UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/10 "2024-04-11T09:40:28Z")

</div>

Hi manish-sharma,

i managed to install and connect builder io.

i still get cant connect to localhost in the preview so i cant build the page. BUT i can publish it and access the empty page on my localhost - so the connection works at least.

are there any ports i might need to enable for builder in the firewall or anything?

this is a screenshot of the network for [builder.io](http://builder.io):

 ![builder1](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/7/766f628aa4eb1ade52dd385eb743fdaa7af66024.png)

and the output from my dev console:

 ![builder2](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/fdedeefcfeb4cb855cc0ccaa55b5593f5659f93a.png)

fyi: i am working on a ubuntu vm behind a server firewall

---

<div class="post-metadata">

**Author:** ![Jch4nni](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@Jch4nni](https://forum.builder.io/u/Jch4nni)\
**Post date:** [April 11, 2024, 1:47pm UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/11 "2024-04-11T13:47:00Z")

</div>

Update: I used an ngrok tunnel to project my localhost to an url - which works, i can now access the hydrogen site everywhere. But the preview is still failing.

![builder3](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/d7859fb0819d7ebc35f02592b64555683fc17d1e.png)

Any ideas?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 15, 2024, 8:56am UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/12 "2024-04-15T08:56:40Z")

</div>

Hello @Jch4nni,

You can try enabling the **Proxy Previews** option from Settings → Advanced Settings → Advanced and see if that helps fix the preview

 ![Screenshot 2024-04-15 at 2.25.53 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/8/86f99f2838df4b2536f1f03ba8ad0188f4cf56ef.jpeg)

---

<div class="post-metadata">

**Author:** ![Jch4nni](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@Jch4nni](https://forum.builder.io/u/Jch4nni)\
**Post date:** [April 18, 2024, 1:24pm UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/13 "2024-04-18T13:24:46Z")

</div>

hi @manish-sharma ,

i managed by overriding the headers set by hydrogen. I also tried your solution with advanced settings but it didnt work. One issue remains tho:

I can publish a site “test-page” and access & edit it in the preview once published - so the url would be localhost:3000/test-page, but if i wanna edit the “landing page” meaning localhost:3000/ i can see the preview, but i still get a connect error and can’t edit the page.  
There are no new errors in console or network, so am i missing smt?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 18, 2024, 3:15pm UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/14 "2024-04-18T15:15:05Z")

</div>

Hello @Jch4nni,

I noticed that hydrogen typically uses the `_index.tsx` file for the landing page. Have you tried integrating the Builder code into the `_index.tsx` file? This could potentially resolve the issue you’re experiencing with the landing page.

> **[Route File Naming | Remix](https://remix.run/docs/en/main/file-conventions/routes)**

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 18, 2024, 3:19pm UTC](https://forum.builder.io/t/impossible-to-add-builder-io-to-hydrogen-4/5319/15 "2024-04-18T15:19:11Z")

</div>

Hello @Jch4nni,

I updated the routes → \_index.tsx code to something like below and it worked for me

```auto
import {defer, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
import {Await, useLoaderData, Link, type MetaFunction} from '@remix-run/react';
import {Suspense} from 'react';
import {Image, Money} from '@shopify/hydrogen';
import type {
  FeaturedCollectionFragment,
  RecommendedProductsQuery,
} from 'storefrontapi.generated';
import {
  fetchOneEntry,
  isEditing,
  isPreviewing,
  Content,
} from '@builder.io/sdk-react/edge';

export const meta: MetaFunction = () => {
  return [{title: 'Hydrogen | Home'}];
};

export async function loader({context}: LoaderFunctionArgs) {
  const {storefront} = context;
  const {collections} = await storefront.query(FEATURED_COLLECTION_QUERY);
  const featuredCollection = collections.nodes[0];
  const recommendedProducts = storefront.query(RECOMMENDED_PRODUCTS_QUERY);

  const page = await fetchOneEntry({
    model: 'page',
    apiKey: 'Your API Key',
    userAttributes: {
      urlPath: `/`,
    },
  });

  return defer({featuredCollection, recommendedProducts, page});
}

export default function Homepage() {
  const data = useLoaderData<typeof loader>();
  const {page} = useLoaderData<typeof loader>();
  return (
    <div className="home">
      <FeaturedCollection collection={data.featuredCollection} />
      <RecommendedProducts products={data.recommendedProducts} />
      <Content
        model="page"
        apiKey="Your API Key"
        content={page}
      />
    </div>
  );
}

function FeaturedCollection({
  collection,
}: {
  collection: FeaturedCollectionFragment;
}) {
  if (!collection) return null;
  const image = collection?.image;
  return (
    <Link
      className="featured-collection"
      to={`/collections/${collection.handle}`}
    >
      {image && (
        <div className="featured-collection-image">
          <Image data={image} sizes="100vw" />
        </div>
      )}
      <h1>{collection.title}</h1>
    </Link>
  );
}

function RecommendedProducts({
  products,
}: {
  products: Promise<RecommendedProductsQuery>;
}) {
  return (
    <div className="recommended-products">
      <h2>Recommended Products</h2>
      <Suspense fallback={<div>Loading...</div>}>
        <Await resolve={products}>
          {({products}) => (
            <div className="recommended-products-grid">
              {products.nodes.map((product) => (
                <Link
                  key={product.id}
                  className="recommended-product"
                  to={`/products/${product.handle}`}
                >
                  <Image
                    data={product.images.nodes[0]}
                    aspectRatio="1/1"
                    sizes="(min-width: 45em) 20vw, 50vw"
                  />
                  <h4>{product.title}</h4>
                  <small>
                    <Money data={product.priceRange.minVariantPrice} />
                  </small>
                </Link>
              ))}
            </div>
          )}
        </Await>
      </Suspense>
      <br />
    </div>
  );
}

const FEATURED_COLLECTION_QUERY = `#graphql
  fragment FeaturedCollection on Collection {
    id
    title
    image {
      id
      url
      altText
      width
      height
    }
    handle
  }
  query FeaturedCollection($country: CountryCode, $language: LanguageCode)
    @inContext(country: $country, language: $language) {
    collections(first: 1, sortKey: UPDATED_AT, reverse: true) {
      nodes {
        ...FeaturedCollection
      }
    }
  }
` as const;

const RECOMMENDED_PRODUCTS_QUERY = `#graphql
  fragment RecommendedProduct on Product {
    id
    title
    handle
    priceRange {
      minVariantPrice {
        amount
        currencyCode
      }
    }
    images(first: 1) {
      nodes {
        id
        url
        altText
        width
        height
      }
    }
  }
  query RecommendedProducts ($country: CountryCode, $language: LanguageCode)
    @inContext(country: $country, language: $language) {
    products(first: 4, sortKey: UPDATED_AT, reverse: true) {
      nodes {
        ...RecommendedProduct
      }
    }
  }
` as const;

```