Deploying to Cloudflare Workers or Pages

[almaraz333]

Is there any info on deploying to Cloudflare Workers or Pages? I see what is in the docs and it is not very helpful, there is a lot of info missing. I am able to deploy to Cloudflare but am not able to pass the storefront context in the server.js file.

This is my server file, I got some info from the remix docs but it's not super helpful with Hydrogen specifically.

import {createRequestHandler, handleAsset} from '@remix-run/cloudflare-workers';

import * as build from '@remix-run/dev/server-build';

const handleRequest = createRequestHandler({build});

const handleEvent = async () => {
  let response = await handleAsset(event, build);

  if (!response) {
    response = await handleRequest(event);
  }

  return response;
};

addEventListener('fetch', (event) => {
  try {
    event.respondWith(handleEvent(event));
  } catch (e) {
    if (process.env.NODE_ENV === 'development') {
      event.respondWith(
        new Response(e.message || e.toString(), {
          status: 500,
        }),
      );
    }

    event.respondWith(new Response('Internal Error', {status: 500}));
  }
});

I was wondering if anyone has successfully done this?

[lordofthecactus]

See here for some examples:
#547 (reply in thread)

[almaraz333]

No, I ended up deploying on Oxygen because it is easier. Not the best, but it works.

[guillaumelachaud]

Any updates on docs? It's still pretty barebones and does not provide enough guidance to deploy an actual Hydrogen app outside of Oxygen.

Here are some of the hurdles I have faced so far:

• Got started at this doc with the intent to deploy on Cloudflare Page
• I installed npm install @remix-run/cloudflare-pages
• Step 3's command is incorrect. It should be npm uninstall @shopify/remix-oxygen instead of npm uninstall @remix-run/remix-oxygen

I now have a bunch of things that are not available anymore. I understood I could re-import some of them from the new adapter but that wasn't clearly stated.
I'm still stuck with a few things:

• getStorefrontHeaders doesn't seem to have a replacement in CF's adapters
• Typings are broken in a couple places: LoaderArgs from '@remix-run/cloudflare' doesn't know about the Shopify storefront so I can't do context.storefront in my Remix loaders.
• The provided examples don't really help: the templates repo linked from the doc seem to be Shopify agnostic and only help to deploy a Remix app on CF. It doesn't deal with the storefront. @lordofthecactus example is great but is too simple: there's no server.ts, two roots (one .jsx, one .tsx) and again, no loader or storefront configuration. And what is this functions folder ? Do I need to add it as well?
• Speaking of the storefront, step 5 of the doc says:

Ensure that you're still passing the storefront client to the loader context in the updated server.js file.

The linked doc provides an example of server.ts but it uses the requestHandler and getStorefrontHeaders from @shopify/remix-oxygen instead of an adapter. I have looked at the template server.ts example for CF but again it's too basic and doesn't setup the storefront properly.
Despite all the above, I've tried to start wrangler locally in dev mode but I only get 404s. It's not even clear how to properly setup the npm scripts for shopify hydrogen build to output assets in a specific directory. In my case, it outputs a dist folder with two sub folders, client and worker. I'm not even sure what to pass to wrangler.

Is there any plan to provide a better example or some sort of support to deploy outside of Oxygen ? I am yet to see an actual Shopify Hydrogen on CF Pages, so far I have only seen some basic Remix apps on CF pages.

EDIT: Made a bit of progress: For others looking to do the same:

• This person here managed to do it it seems.
• For TS related issues. In order for the storefront to be properly resolved on the AppLoadContext, you have to edit remix.env.d.ts accordingly.
• remix.config.js allows to tweak build output but is pretty opiniated:

│  The assetsBuildDirectory in remix.config.js must be in "dist/client".                                                                    │

EDIT 2: I finally made it work. But it was not obvious and docs could definitely be improved. I hope to share a template repo next week on how to deploy an actual Shopify Hydrogen store on CF Pages.

[brambrink]

Hey! Thanks a lot for taking your time for describing all your findings so far. I am actually running into the same issues and a template repo would be amazing!

[guillaumelachaud]

I have published the template here. Do not hesitate to ask questions if it doesn't work as expected.

They key things that were missing from the official Shopify Documentation:

• When you want to deploy on CF Pages (or anywhere that's not Oxygen), you need to remove all Oxygen dependencies and uses the proper adapter. That means that all context based functions must be replaced to come from the proper adapter. For instance, you should remove:

import {LinksFunction, LoaderArgs, json} from '@shopify/remix-oxygen';

and replace it with

import type {LinksFunction, LoaderArgs, json} from '@remix-run/cloudflare';

The documentation is misleading on that topic. The last point of the tutorial tells you to properly pass a storefront client to the loader context but the provided example relies on the Oxygen adapter that we are supposed to get rid of.

• Even more important: you need to adapt the build scripts and get rid of the shopify CLI for both dev and build, as it only targets Oxygen. At the end of the day, what you are building is just a Remix app for CF Pages, with a storefront API that allows you to query Shopify. So you want to use wrangler to run the dev server and you want to build the app with remix directly.