[DOCS] Add docs and guide to deploying to Cloudflare pages and workers

[blanklob]

Issue summary

There is tools like sessions adapters for Cloudflare but no docs for deployment especially that we use it in dev as well.

[vincaslt]

I wrote a guide on this on my blog, see if helps: https://codefrontend.com/deploy-shopify-apps-on-cloudflare/

[blanklob]

@vincaslt I cant read anything in your blog there is so many ads. I would prefer in official shopify deployment docs. Thanks.

[paulomarg]

Thanks for raising this! I'll forward this to the team, and we'll look into it.

[davidhollenbeckx]

@paulomarg any updates here? now that remix defaults to vite with full cloudflare support would be great to see a cloudflare adaptor for shopify-app-remix

[paulomarg]

We have plans to go over ways we can improve our deployment processes and documentation, but it'll still be a while until we get to that.

That being said, Remix itself is able to run on Cloudflare, so I believe you'd be able to use this package already, if you don't import the node adapter like the app template does. Remix's conversion from Cloudflare to Web API should be enough for this to work.

Thanks for the reminder, we'll make sure to consider that as well when we get started on this work.

[davidhollenbeckx]

@paulomarg yep without shopify cli involved have been able to work locally deploy to cf with remix/vite no problem

maybe my fault for trying to run wrangler at the same time as shopify cli

there's parts of the shopify-app-remix package that rely on node's crypto. from what I can tell this might be the only fix needed. would be great to see something similar to the vercel adaptor which swaps out the native fetch for the vercel fetch, but for crypto packages in cloudflare runtimes

[paulomarg]

there's parts of the shopify-app-remix package that rely on node's crypto

That's a great callout - if there are any direct dependencies, that's a mistake on our part. I couldn't find any places where we directly pull in crypto, so if you spotted any instances, please let us know!

CF runtimes should have crypto available globally, so I don't expect we'd need any sort of special import - the CF adapter for @shopify/shopify-api is essentially the Web API adapter, which is what we use in the Remix package.

But again, if you can find any specific instances where the package fails in CF runtimes, please do let us know and we'll fix it.

[davidhollenbeckx]

thanks @saifulapm - @paulomarg this is the same issue I had

[davidhollenbeckx]

also appears to be a hard require in the remix package

node_modules/@shopify/shopify-app-remix/build/cjs/server/adapters/node/index.js

[saifulapm]

When I try to run in cloudflare, I got this.

✘ [ERROR] Could not resolve "crypto"

    ../node_modules/.pnpm/cookie-signature@1.2.1/node_modules/cookie-signature/index.js:5:21:
      5 │ var crypto = require('crypto');
        ╵                      ~~~~~~~~

  The package "crypto" wasn't found on the file system but is built into node.
  Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

✘ [ERROR] Could not resolve "stream"

    ../node_modules/.pnpm/stream-slice@0.1.2/node_modules/stream-slice/index.js:3:24:
      3 │ var Transform = require('stream').Transform;
        ╵                         ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node.
  Add the "nodejs_compat" compatibility flag to your Pages project and make sure to prefix the module name with "node:" to enable Node.js compatibility.

My app started working with cloudflare without any issue. Previously I made mistake. I was using @remix-run/node package instead of @remix-run/cloudflare package in my app. That's why I was getting those error.

Now It's working without any issue.

[paulomarg]

also appears to be a hard require in the remix package

node_modules/@shopify/shopify-app-remix/build/cjs/server/adapters/node/index.js

I think in this case the hard require is ok - that is the node adapter where we have to require crypto. The line that imports the node adapter can be safely removed for non-node apps :)

I was using @remix-run/node package instead of @remix-run/cloudflare package in my app

Another great point that I forgot! We rely on the node remix package in a few places.

This is all great feedback, and stuff we should incorporate here. Thanks folks, glad to hear it's running smoothly after these fixes!

[davidhollenbeckx]

hey @paulomarg ran into another runtime issue, this time on the webhook validation await shopify.authenticate.webhook(request);

TypeError: Cannot read properties of undefined (reading 'subtle')
at ../cloudflare-vite-app/shopify-embedded/node_modules/.pnpm/@shopify+shopify-api@9.2.0/node_modules/@shopify/shopify-api/runtime/crypto/utils.js:14:37
at Generator.next (<anonymous>)
at ../cloudflare-vite-app/shopify-embedded/node_modules/.pnpm/tslib@2.6.2/node_modules/tslib/tslib.js:169:75
at new Promise (<anonymous>)
at Object.__awaiter (../cloudflare-vite-app/shopify-embedded/node_modules/.pnpm/tslib@2.6.2/node_modules/tslib/tslib.js:165:16)
at createSHA256HMAC
(../cloudflare-vite-app/shopify-embedded/node_modules/.pnpm/@shopify+shopify-api@9.2.0/node_modules/@shopify/shopify-api/runtime/crypto/utils.js:9:20)
at ../cloudflare-vite-app/shopify-embedded/node_modules/.pnpm/@shopify+shopify-api@9.2.0/node_modules/@shopify/shopify-api/lib/utils/hmac-validator.js:52:63
at Generator.next (<anonymous>)
at ../cloudflare-vite-app/shopify-embedded/node_modules/.pnpm/tslib@2.6.2/node_modules/tslib/tslib.js:169:75
at new Promise (<anonymous>)
at Object.__awaiter (../cloudflare-vite-app/shopify-embedded/node_modules/.pnpm/tslib@2.6.2/node_modules/tslib/tslib.js:165:16)
at validateHmacString
(../cloudflare-vite-app/shopify-embedded/node_modules/.pnpm/@shopify+shopify-api@9.2.0/node_modules/@shopify/shopify-api/lib/utils/hmac-validator.js:51:20)
at Object.<anonymous>
(../cloudflare-vite-app/shopify-embedded/node_modules/.pnpm/@shopify+shopify-api@9.2.0/node_modules/@shopify/shopify-api/lib/webhooks/validate.js:32:63)
at Generator.next (<anonymous>)
at fulfilled (../cloudflare-vite-app/shopify-embedded/node_modules/.pnpm/tslib@2.6.2/node_modules/tslib/tslib.js:166:62)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[paulomarg]

hey @paulomarg ran into another runtime issue, this time on the webhook validation await shopify.authenticate.webhook(request);

Does crypto.subtle exist outside of the package? It should be using CF workers' WebCrypto API.

[davidhollenbeckx]

hey @paulomarg ran into another runtime issue, this time on the webhook validation await shopify.authenticate.webhook(request);

Does crypto.subtle exist outside of the package? It should be using CF workers' WebCrypto API.

no - only package in use here is the shopify remix package and cloudflare adapters + drizzle session adapter and turso, both of these are meant for cf runtime use and session validation works fine so I don't think either of those packages are a culprit

the error occurs when the app deployed on cf pages - error only appears on the /.webhooks.tsx route (error pasted above)

for my purposes I moved webhooks and validation to a separate worker. the default shopify js api megapackage has a cloudflare adapter that lets me use it to validate the webhooks as they come in

however in order for this to be "plug and play" with cloudflare I believe the webhook validator might need to be resolved at the package level

[paulomarg]

I'm surprised to hear it works in one scenario but not the other. We only ever override the crypto global export when @shopify/shopify-api/adapters/node is imported.

The CF adapter in shopify-api doesn't load anything to replace crypto, so we should be using the global export in the code that's failing. Both packages we provide will use this same code to validate webhooks.

[davidhollenbeckx]

I'm surprised to hear it works in one scenario but not the other. We only ever override the crypto global export when @shopify/shopify-api/adapters/node is imported.

The CF adapter in shopify-api doesn't load anything to replace crypto, so we should be using the global export in the code that's failing. Both packages we provide will use this same code to validate webhooks.

hmm interesting..yeah assumed the remix package and megapackage would use the same code under the hood. I'll do some more testing and see if I can narrow it down

[joelkrause]

+1 for some Cloudflare docs for the latest template with Vite! Or is it not possible?

[nehadnb]

Is there any direction available for how deploy remix app in cloudflare page and review it on shopify store? I have tried few steps but it is always showing 404 page

[navdeep-soni]

Any update on official documentation on how to deploy the remix app in Cloudflare? was able to build and deploy it on CP but shows 404