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;

[Iliasshad]

It’s possible to deploy the remix app over Cloudflare workers. I made it work in this tutorial (https://iliashaddad.com/blog/deploy-the-shopify-remix-official-template-to-cloudflare-workers/) or you can check directly the GitHub repo (https://github.com/IliasHad/shopify-app-template-remix-cloudflare-workers)

[gruntlord6_1]

I was using your repo but wasn’t able to get the database working, did something change?

Would it make more sense to use d1?

[catalyst2]

Hey , Dude have you got some solution ???

I am also going through the same problem…

[gruntlord6_1]

Nope, messed with it for a while and decided to just use a traditional vps with docker to manage the front end and leave the back end to cloudflare workers

[gruntlord6]

Ok, so I had no luck with this for the longest time, but based on both increased experience with Cloudflare/Shopify and updates to both the Cloudflare Remix starter and the Shopify starter I was able to make it work.

Thanks to the new Cloudflare deploy buttons I was able to make an insanely straightforward way to deploy the template to your own account:
https://github.com/gruntlord5/cloudflare-worker-shopifyd1/

[AndreSantos]

I followed your repo but still have some questions, do you think there is any change of hoping on a call with you to make some questions?

Thanks

[gruntlord6]

You can feel free to ask here or on the github issues

[AndreSantos]

So the deployment works fine, but how do I run it on preview through the cloudflare tunnels (shopify app dev) to have a dev preview running on shopify admin panel?

[gruntlord6]

You don’t, you can do your local dev in the regular shopify app starter if you are looking for real time development with Vite. Cloudflare does have vite support but its not the same process as shopify uses for “shopify app dev” so it would not have the tunnel setup and thus wouldn’t work in the app bridge admin page.

If you just want a way to test the deployment in the cloudflare environment you can just make a second app deployment as a dev environment and test changes there before making them in your regular application.

[AndreSantos]

I didn’t understand, so there is no way to have both worlds? live preview running inside shopify admin panel while developing and have it deployed in cloudflare for production?

I don’t understand how I should test my app while developing before actually deploying it..

[gruntlord6]

Make a second app called “appname-dev” and deploy that. Use that for testing. When you are ready to deploy code, push it to your actual app “appname”.

You can’t test a cloud environment in vite using the shopify cli, they don’t have any support for that. They would need to add support for it as its not something I or anyone else has control over.

[AndreSantos]

Ok I understood that part, but that would still need me to everytime I make a change to my app I need to run “remix vite:build && wrangler deploy” there is no actually live reload right?

[gruntlord6]

it has CI/CID already enabled so the deploys are automatically sent to cloudflare and deployed when you push them in GIT
https://developers.cloudflare.com/workers/ci-cd/