In deze post zullen we je door het proces van het deployen van een Shopify Hydrogen-site met Cloudflare Workers leiden. Shopify Hydrogen is een nieuwe manier om Shopify storefronts te bouwen die snellere laadtijden, betere prestaties van de winkel en over het algemeen een verbeterde gebruikerservaring mogelijk maken.

Met Cloudflare Workers kunnen we dit naar een hoger niveau tillen. Het is een serverless platform dat je in staat stelt JavaScript-code uit te voeren ‘on the edge’, wat betekent dat je site sneller zal laden en veiliger zal zijn. Door deze twee technologieën te combineren, kun je een super snelle Shopify store maken die zowel gemakkelijk te gebruiken als zeer veilig is.

Voordat we beginnen, verwachten we dat je een Hydrogen store front hebt opgezet die klaar is om gegeployd te worden. Als je hulp nodig hebt, is de officiële Shopify documentatie een goede bron. Als dat allemaal klaar is, kunnen we beginnen met het switchen naar Cloudflare Workers.

Op dit moment gebruikt jouw applicatie de Oxygen-adapter voor naadloze deployment met Oxygen, de eigen implementatieoplossing van Shopify. We willen echter overschakelen naar adapters die geschikt zijn voor Cloudflare Workers.

Hier zijn de stappen om de overstap te maken:

1. Installeer eerst de nieuwe adapters door het volgende uit te voeren in de terminal:

npm i @remix-run/cloudflare-workers

2. Verwijder de oude Shopify Oxygen-adapters met:

npm remove @shopify/remix-oxygen

3. Vervang alle instanties van @shopify/remix-oxygen door de nieuwe Cloudflare-adapter: @remix-run/cloudflare.

4. Als je TypeScript gebruikt, declareer dan de nieuwe module in remix.env.d.ts door declare module "@shopify/remix-oxygen" te vervangen door declare module "@remix-run/cloudflare".

5. De benodigde headers in server.ts moeten handmatig worden geïmplementeerd, aangezien getStorefrontHeaders momenteel niet wordt ondersteund door de Cloudflare-adapters. Aangezien de benodigde headers kunnen verschillen per project, is dit een voorbeeld van hoe je de requestGroupIden buyerIpheaders kunt vervangen:

requestGroupId: event.request.headers.get("request-id"),
buyerIp: event.request.headers.get("CF-Connecting-IP") || "",

6. Aangezien je geen .env variabelen kunt doorgeven met service workers, definieer een .dev.vars bestand en definieer de variabelen daar. Definieer in remix.env.d.ts de environment variabels globally in plaats van ze onder Env te plaatsen.

7. Voor het bouwen en implementeren zul je nu remix build en wrangler moeten gebruiken in plaats van de Shopify CLI.

Hopelijk is deze handleiding nuttig geweest om je te laten zien hoe je een Hydrogen store met Cloudflare Workers kunt deployen. Door gebruik te maken van deze technologieën kun je een snelle, veilige en gebruiksvriendelijke Shopify store maken.