Deploying to Cloudflare Workers #573

svrnhdl · 2023-02-23T14:13:33Z

svrnhdl
Feb 23, 2023

I've spent a considerable amount of time trying to deploy a basic demo store to Cloudflare Workers this week, to no avail. I'm certainly no workers expert, so I'm afraid I won't be able to figure it out on my own. The documentation is helpful, but not sufficient for me to get this done successfully. Here are the steps I did:

Setting up demo store

npm create @shopify/hydrogen@latest

'Demo Store'
'TypeScript'
'hydrogen-storefront'
'Yes'

cd hydrogen-storefront

Update .env

npm run dev

This works fine.

Cloudflare deployment

npm install @remix-run/cloudflare-workers
npm uninstall @remix-run/remix-oxygen

The docs tell me to adjust to the template code here.

./app/entry.server.jsx

import type { EntryContext } from "@remix-run/cloudflare";
import { RemixServer } from "@remix-run/react";
import { renderToString } from "react-dom/server";

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const markup = renderToString(
    <RemixServer context={remixContext} url={request.url} />
  );

  responseHeaders.set("Content-Type", "text/html");

  return new Response("<!DOCTYPE html>" + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}

./remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  devServerBroadcastDelay: 1000,
  ignoredRouteFiles: ["**/.*"],
  server: "./server.ts",
  serverConditions: ["worker"],
  serverDependenciesToBundle: "all",
  serverMainFields: ["browser", "module", "main"],
  serverMinify: true,
  serverModuleFormat: "esm",
  serverPlatform: "neutral",
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "build/index.js",
  // publicPath: "/build/",
};

./server.ts

export default {
  async fetch(request) {
    return new Response('Hello worker!', { status: 200 });
  },
};

.wrangler.toml (account_id deleted)

name = "remix-cloudflare-workers"
account_id = ""
workers_dev = true
main = "./build/index.js"
# https://developers.cloudflare.com/workers/platform/compatibility-dates
compatibility_date = "2022-04-05"

[site]
  bucket = "./public"

[build]
  command = "npm run build"

wrangler publish

------------------------------------------------------
Running custom build: npm run build

> demo-store@0.0.0 build
> npm run build:css && shopify hydrogen build


> demo-store@0.0.0 build:css
> postcss styles --base styles --dir app/styles --env production


╭─ error ──────────────────────────────────────────────────────────────────╮│                                                                          ││  The serverBuildPath in remix.config.js must be "dist\worker\index.js".  ││                                                                          │╰──────────────────────────────────────────────────────────────────────────╯

X [ERROR] Command failed with exit code 1: npm run build

Updating package.json

{
  "name": "demo-store",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "build": "remix build",
    "deploy": "wrangler publish",
    "dev:remix": "remix watch",
    "dev:miniflare": "cross-env NODE_ENV=development miniflare ./build/index.js --watch",
    "dev": "npm-run-all build --parallel \"dev:*\"",
    "start": "cross-env NODE_ENV=production miniflare ./build/index.js",
    "typecheck": "tsc"
  },
  "prettier": "@shopify/prettier-config",
  "dependencies": {
    "@headlessui/react": "^1.7.2",
    "@remix-run/cloudflare": "*",
    "@remix-run/cloudflare-workers": "*",
    "@remix-run/react": "1.12.0",
    "@shopify/cli": "3.29.0",
    "@shopify/cli-hydrogen": "^4.0.8",
    "@shopify/hydrogen": "^2023.1.5",
    "clsx": "^1.2.1",
    "concurrently": "^7.5.0",
    "cross-env": "^7.0.3",
    "graphql": "^16.6.0",
    "graphql-tag": "^2.12.6",
    "isbot": "^3.6.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-intersection-observer": "^9.4.1",
    "react-use": "^17.4.0",
    "schema-dts": "^1.1.0",
    "tiny-invariant": "^1.2.0",
    "typographic-base": "^1.0.4"
  },
  "devDependencies": {
    "@remix-run/dev": "1.12.0",
    "@remix-run/eslint-config": "1.12.0",
    "@shopify/eslint-plugin": "^42.0.1",
    "@shopify/oxygen-workers-types": "^3.17.2",
    "@shopify/prettier-config": "^1.1.2",
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.7",
    "@types/eslint": "^8.4.10",
    "@types/react": "^18.0.20",
    "@types/react-dom": "^18.0.6",
    "concurrently": "^7.4.0",
    "cross-env": "^7.0.3",
    "eslint": "^8.20.0",
    "eslint-plugin-hydrogen": "0.12.2",
    "miniflare": "^2.11.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.16",
    "postcss-cli": "^10.0.0",
    "postcss-import": "^15.0.0",
    "postcss-preset-env": "^7.8.2",
    "prettier": "^2.8.4",
    "rimraf": "^3.0.2",
    "tailwindcss": "^3.1.8",
    "typescript": "^4.9.5",
    "wrangler": "^2.2.1"
  },
  "engines": {
    "node": ">=16.13"
  }
}

wrangler publish

Next, updated the server.js file to try and pass the storefront to the loader context, as stated in Step 5 of the docs.

import {createStorefrontClient} from '@shopify/hydrogen';
import * as build from "@remix-run/dev/server-build";
import { createEventHandler } from "@remix-run/cloudflare-workers";

export default {
  async fetch(request: Request, env: Env, executionContext: ExecutionContext) {
    /* Create a Storefront client with your credentials and options */
    const {storefront} = createStorefrontClient({
      /* Cache API instance */
      cache: await caches.open('hydrogen'),
      /* Runtime utility in serverless environments */
      waitUntil: (p: Promise) => executionContext.waitUntil(p),
      /* Buyer IP address to avoid Storefront API rate limit */
      buyerIp: getBuyerIp(request),
      /* Private Storefront API token for your store */
      privateStorefrontToken: env.PRIVATE_STOREFRONT_API_TOKEN,
      /* Public Storefront API token for your store */
      publicStorefrontToken: env.PUBLIC_STOREFRONT_API_TOKEN,
      /* Desired Storefront API version to use */
      storefrontApiVersion: env.PUBLIC_STOREFRONT_API_VERSION,
      /* Your store domain: "https://{shop}.myshopify.com" */
      storeDomain: `https://${env.PUBLIC_STORE_DOMAIN}`,
    });

    const handleRequest = createEventHandler({
      build: build,
      mode: process.env.NODE_ENV,
      /* Inject the Storefront client in the Remix context */
      getLoadContext: () => ({storefront}),
    });

    return handleRequest(request);
  },
};

  "outcome": "exception",
  "scriptName": "remix-cloudflare-workers",
  "exceptions": [
    {
      "name": "TypeError",
      "message": "event.respondWith is not a function",
      "timestamp": 1677157909975
    }
  ],
...

I've tried with service worker code too.

import { createEventHandler } from "@remix-run/cloudflare-workers";
import * as build from "@remix-run/dev/server-build";

addEventListener(
  "fetch",
  createEventHandler({ build, mode: process.env.NODE_ENV })
);

Worker logs:

{
  "outcome": "exception",
  "scriptName": "remix-cloudflare-workers",
  "exceptions": [
    {
      "name": "TypeError",
      "message": "event.respondWith is not a function",
      "timestamp": 1677161388434
    }
  ],

Like I said before, I'm not super familiar with either Workers or Remix, but it would be useful to have a template for this, so anyone could get started. Appreciate any input...

paul-phan · 2023-02-23T14:35:11Z

paul-phan
Feb 23, 2023

I see you uninstalled the @shopify/remix-oxygen package but still using getBuyerIp from it; you can try to remove the buyerIp or implement it yourself.

0 replies

lordofthecactus · 2023-04-03T11:27:17Z

lordofthecactus
Apr 3, 2023

You could try some personal examples I did:
https://github.com/lordofthecactus/hydrogen-v2-cloudflare-pages
https://github.com/lordofthecactus/hydrogen-v2-cloudflare-edge

Try to run the server locally first should show any errors you might have in your config, and hopefully you will then have better understanding on where it is failing.

In the case of getBuyerIp basically each worker host (vercel, cloudflare, netlify) have their own set of headers for getting the current the client ip making requests.Providing this Ip to shopify is good for IP traffic bot limiting. Read more about this here.

For example X-Forwarded-For could be used with cloudflare as an IP.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Deploying to Cloudflare Workers #573

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Deploying to Cloudflare Workers #573

Uh oh!

svrnhdl Feb 23, 2023

Setting up demo store

Cloudflare deployment

Replies: 2 comments

Uh oh!

paul-phan Feb 23, 2023

Uh oh!

lordofthecactus Apr 3, 2023

svrnhdl
Feb 23, 2023

paul-phan
Feb 23, 2023

lordofthecactus
Apr 3, 2023