In this post, we're going to walk you through deploying a Shopify Hydrogen site with Cloudflare Workers. If you haven't heard of Shopify Hydrogen before, it's a new way of building Shopify stores that allows for quicker load times, better storefront performance, and an overall improved user experience.

With Cloudflare Workers we can take this to the next level. It is a serverless platform that lets you run JavaScript code at the edge of the network, which means your site will load faster and be more secure. By combining these two technologies, you can create a lightning-fast Shopify store that's both easy to use and highly secure.

Before we get started, we expect you to have setup an Hydrogen storefront which is ready to be deployed. If you need some help, the official Shopify is a great resource. Now that’s all ready, lets get started with deploying with Cloudflare Workers.

Currently, your application uses the Oxygen adapter for seamless deployment on Oxygen, which is Shopify's own deployment solution. However, we want to switch to adapters suited for Cloudflare Workers.

Here are the steps to make the switch:

1. Install the new adapters by running:

npm i @remix-run/cloudflare-workers

2. Remove the old Shopify Oxygen adapters with:

npm remove @shopify/remix-oxygen

3. Replace all instances of @shopify/remix-oxygen with the new Cloudflare adapter: @remix-run/cloudflare.

4. If you're using TypeScript, declare the new module in remix.env.d.ts by replacing declare module "@shopify/remix-oxygen" with declare module "@remix-run/cloudflare".

5. De benodigde headers in server.ts, you must do so manually, as getStorefrontHeaders is as of yet not supported by Cloudflare adapters. Since these headers can vary from one project to another, here's an example of how to replace the requestGroupId and buyerIp headers:

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

6. Since you cannot pass .env variables with service workers, define a .dev.vars file and define the variables there. In remix.env.d.ts, define the environment variables globally instead of putting them under Env.

7. For building and deploying, you will now have to use remix build and wrangler instead of the Shopify CLI.

Hopefully, this guide has been helpful in showing you how to deploy a Hydrogen site with Cloudflare Workers. By taking advantage of these powerful technologies, you can create a fast, secure, and user-friendly Shopify store that will help grow your business.