Use of Shopify Hydrogen components with "island architecture"?

[kevin-mitchell]

I'm wondering if there is a world where Hydrogen components might be usable in a island architecture.

Basically I'm in a situation where I want to add some commerce capability via Shopify to a statically generated site. I essentially have no ability to modify the rendered HTML from the server. There is no "backend" essentially. For this reason I need to separately build my application components (e.g. Hydrogen components / React / TS) and then bootstrap whatever more advanced FE functionality after the page loads.

Taking a look at the Hydrogen project it seems (corrections very welcome!) that it is more focused on creating a complete solution, vs being a good choice for cherry-picking specific functionality. Is this a correct assessment?

What I'd like to be able to do, for example, is say "ok, after this static HTML from the server is rendered, bootstrap the mini-cart as well as the PDP Hydrogen components / functionality" - So static, basic HTML comes from the server then completely client-side the Hydrogen components would make their respective graphql requests to fetch the appropriate data and render themselves.

It would be amazing to be able to use this amazing library, but at this point it seems like for my use case I might need to implement my own simplified / standalone components (possibly in Preact is my current thought) to be better suited for ad-hoc usage?

Any thoughts / advice / tips would be much appreciated :)

[frandiox]

You should be able to use the components and utilities in @shopify/hydrogen-react without a server. You can make queries directly from the browser to Shopify's Storefront API, and pass the result to Hydrogen React components.

[kevin-mitchell]

@frandiox thanks a ton for the reply and for your help!

I'm struggling mainly because I'm working outside the context of React. In fact I'm working with a fully static HTML / CSS / JS site, no build system, nothing. So I need to be able to somehow bundle / build the hydrogen-react components by themselves and distribute a deployment artifact via a CDN and then somehow bootstrap these components using "old school" JS, e.g. document.getElementById('product-details-div').append(somehowBootstrapHydrogenReactComponents) - any chance you're aware of any examples of this type of usage, e.g. usage outside of the React context?

I could see examples with like a Wordpress site perhaps, where I just want to display (again, just an example) a customers cart contents but everything else is owned by / rendered on the backend with PHP as static HTML without any React functionality.

Thanks again, sorry if my question is a bit weird or all over the place!

[frandiox]

I'm not aware of any existing example but here are some guidelines that should work:

First, try running React itself without a build step: https://github.com/sonyarianto/react-without-buildsteps/blob/main/index.html

That uses @babel/standalone to process JSX at runtime. If you don't want that (the package is heavy), you can try using React without JSX, although the syntax gets a bit harder: https://react.dev/reference/react/createElement#creating-an-element-without-jsx
There's an interesting approach here to make this syntax a bit better: https://dev.to/dperrymorrow/using-react-without-jsx-no-build-14gg

Once you get that working, try adding hydrogen-react with <script crossorigin src="https://unpkg.com/@shopify/hydrogen-react@2023.10.1"></script>. All the components should be available under the hydrogenreact global variable (example: hydrogenreact.ShopifyProvider).

---

Or you could do it with a separate build process: create a normal React app using hydrogen-react components. Then export all the custom components you want and make a UMD build with any bundler (like Rollup). Later, you can import the resulting file in your HTML using script tags and inject the components with React.createRoot(...).

[kevin-mitchell]

This is so incredibly helpful, thank you soo soo much for taking the time to go through all of this. It really is a great way for me to get into more of the details here. Thank you x 100 @frandiox ! <3 (and happy NY :))