My checkout UI Extension works locally, but not when deployed to fly.io

[MrPong]

Hello!

I'm in the process of developing my very first Shopify app. The primary function of my app is to present a post-purchase survey to customers using the Checkout UI Extension. The questions for the survey are dynamically fetched from an API, and once customers complete the survey and click "Submit feedback," the responses are sent to an external backend. I've utilized the fetch() method to manage these data requests.

My problem

This works just fine when I run it locally (npm run dev), but after I deploy my app to fly.io (following this guide), I can't get the survey to show.

In development mode, I can see in the Networks tab that a request is made to my app URL (https://[shopify-generated-URL].trycloudflare.com/extensions) when the order status page loads. This doesn't happen in when I change my app URL and App redirect URL to match my fly.io credentials.

What I've done so far:

1. Updated my App URL and app redirect URL to match my fly.io hostname (https://restless-breeze-7070.fly.dev/) and (https://restless-breeze-7070.fly.dev/auth/callback)
2. Double-checked that ports, API keys, and URLs are correct
3. Set api_access = true and network_access = true in my shopify.extension.toml file

What am I missing?🤔 Despite my best efforts, I'm still unable to solve this problem and it has me puzzled. I've dedicated a lot of time to troubleshooting but seem to be stuck. Any assistance or insights you can offer would be greatly appreciated. Many thanks in advance!

[Liam]

Hi MrPong,

It's great to hear that you're developing your first Shopify app, so let's look into why this deploym ent issue might be happening. 

At first glance, it seems like there could be a couple of different issues at play:

1. CORS: This is a common issue when trying to fetch data from a different domain, which is the case when your app is running on fly.io and trying to fetch data from Shopify. You might want to check your server's CORS settings and make sure that Shopify's domain is in the allowed origins.

2. SSL Certificate: When you move from a local development environment to a live site, you need to ensure that your site is served over HTTPS. For this, you need an SSL certificate. Fly.io usually handles this for you, but you might want to check if there were any issues in this process.

3. Shopify App Bridge: Shopify uses App Bridge for embedding apps within the Shopify admin. It's possible that there might be some configuration issues with App Bridge that are preventing your app from working properly after deployment.

4. Check your server logs: If there's an issue with your server or your app, the error logs could give you more information about what's going wrong. You can access these logs through your hosting platform (fly.io).

5. Check your extension's deployment status: Make sure to check the status of your extension's deployment in your Partner Dashboard. It's possible that there might have been an issue with the deployment process.

Try the above and let us know if you're still seeing issues!

[MrPong]

Hello, and thanks for your reply Liam!

I followed your list and can verify steps 2, 4, and 5. I couldn't find anything on CORS in fly.io's documentation or forum and I see no CORS errors in their logs or my browser console. I do however see this privacy_access_token. Also, in my network tab, I see no signs of Shopify trying to communicate with my app on fly.io. When in development mode, I can clearly see a request being sent to my app URL's extension folder.

To simplify things, I also tried to create a new app with a checkout UI extension that just displayed a banner saying "hello from fly.io", but that didn't work either.

Any thoughts on how to progress are much appreciated!

[emroking]

Hi @MrPong , I seem to have a similar issue right now. Could you please tell me if you found a solution for this?

[MrPong]

I've abandoned this project since then. Unfortunately, I didn't find a
solution.

Best of luck!

[timojnnck]

I'm still having the same issue.

Sadly in the console log you also can't see anything about errors.

[timojnnck]

@MrPong I found the mistake.

I thought because it renders when I run the application locally I thought when I deploy and install the app in a store it automatically renders there aswell.

But you need to add the app as block in the theme of the checkout you are using.

Afterwards your UI Extension is running as you wish.

Let me know if you already tried that or if not if it's working then for you.

Sadly as newbie this is not documented anywhere. At least I have found nothing about it.

Maybe @Liam can take it with him.

[Laura-Hirtop]

Maaaaaan, adding the app block into the customizer of the theme has to be written in caps lock on the documentation, in red, all over it if possible. I was so confused after deployment.. thank you!