How to host your Shopify apps on Cloudflare/Vercel

[attaboiaj]

This is the best resource I found 
https://codefrontend.com/deploy-shopify-apps-on-cloudflare/

but it's not working when I try to run this code I gets this error 

I even try to make new app using `shopify app init` that comes with 

- remix

- vite config

Here is my repo
https://github.com/itsanishjain/stable-benchmark-app

but I still get's the same error of 
`Error forwarding web request: AggregateError`

No proper logs to figure out this why and how to fix this

I found one more repo but's too old ~3 years so they aren't using Remix

it's so much weird like very few resources on how to host your shopify app on Cloudflare or Vercel

[BadMatter]

Hey, did you find any solution? We are having the same problem.

[attaboiaj]

Nope man didn't found it yet, it's super annoying 

[BadMatter]

It's really frustrating, but we're still actively searching for a solution. As soon as we find something, we'll share it here. Are you only experiencing the error locally, or does it also occur when you deploy?"

[Nicola_Horst]

Hey,
Facing the same issue...
I was following the same tutorial. 
Since the Shopify Template comes with vite, I am not certain if one can follow that tutorial step by step. 
I tried to adapt as much of the code as I could to make it work with vite. 
But eventually I ran into the same error that you are facing,

I also tried to run the repository that is linked below the article that you and I followed, but even that did not work out...
If you like, we can try to work together or exchange some knowledge to solve that issue. 

Best, Nicola

[attaboiaj]

Hey @Nicola_Horst and @BadMatter 

I am in this Shopify community and some taken these steps to make it work

```

I deployed it successfully on CloudFlare Pages, it's bit tricky but works well now.

I tried to adapt project generated with Shopify cli but unsuccessful for some reason.

My steps were:

- setup remix app

- add shopify packages (bridge, cli, etc)

- implement oauth with kv, bridge, routing, etc.

- change from node to cloudflare where needed

- adapt to use cloudflare context env

```

They said they are working on making it open source as well so let's see what's gonna happen

[alexz]

I ran into similar issues hosting a Shopify Embedded app (using Remix/Vite) on Vercel.

401 on embedded app auth

It turns out the default 'Vercel authentication' setting issues a 401 response to any request coming from a iframe.  Frustratingly, it also then does not log the request in Vercel, which made debugging tricky.

Thankfully, you can turn it off and after that it all worked:

Project settings > Deployment Protection > Vercel authentication > switch off

DB location

For those coming to this afresh, worth thinking about where your database is going to be hosted.  I was getting timeout errors because Vercel couldn't access my DigitalOcean (DO) Postgres instance.  DO only support external allowlisting using IP addresses (internally can use Droplet/K8S cluster etc.) but Vercel don't publish a list/CIDR block of their Serverless Function IP addressses.  That means I would have to make the DB publicly accessible, and just rely on credential security, or migrate to Vercel Postgres (now Neon Postgres).  None of it is insurmoutable, just needs thought.

Messages file bundling

Vite (rollup) needs some help to find external message files.  This didn't work:

const messagesPath = path.join(process.cwd(), `./messages/${locale}.json`);
const content = await fs.readFile(messagesPath, 'utf-8');
return JSON.parse(content);

Instead Vercel reported an unable to read file error (/var/task/messages/en.json).  Dynamic imports work with the normal tree shaking:

return (await import(`../../messages/${locale}.json`)).default;