Why is my Remix app's iframe blank after deployment to Azure?

Why is my Remix app's iframe blank after deployment to Azure?

sebastianLapela
Shopify Partner
2 0 0

We created a remix app that works in development.
We now deployed the app to azure app service and if we visit the url we see the site with heading "A short heading about [your app]" So the app is online
We then changed the url and redirect url of the app in the partner dashboard and then installed in a development shop
The app get installed. But when accessing the app the iframe rendered in shopify is blank.

I have set the following environment vars:
"SCOPES": "read_merchant_managed_fulfillment_orders,write_products,read_orders,read_products,read_assigned_fulfillment_orders,read_customers,read_shipping",


"SHOPIFY_APP_URL": "https://flex-shopify-host.azurewebsites.net/",


"SHOPIFY_API_KEY": "

18b937b927b25e1a52951135afa38987"

 

The log from the remixa app every time I try to load the app is as follow:

2023-10-07T07:18:37.230277359Z GET /?embedded=1&hmac=85965c6d595e4125224df581cdb57a8e0bbbf7fdf0eb4073a3011c018e3ec623&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvY29ubGlucQ&locale=en&session=501e624582290416590865140b8c6189f6cfb16030f120291982782ebdd48f41&shop=conlinq.myshopify.com&timestamp=1696663115 302 - - 5.122 ms
2023-10-07T07:18:37.306012468Z [shopify-app/INFO] Authenticating admin request
2023-10-07T07:18:37.312424069Z [shopify-app/INFO] Authenticating admin request
2023-10-07T07:18:37.541277497Z [shopify-app/INFO] Shop hasn't installed app yet, redirecting to OAuth | {shop: conlinq.myshopify.com}
2023-10-07T07:18:37.543334297Z [shopify-app/INFO] Shop hasn't installed app yet, redirecting to OAuth | {shop: conlinq.myshopify.com}
2023-10-07T07:18:37.547134398Z GET /app?embedded=1&hmac=85965c6d595e4125224df581cdb57a8e0bbbf7fdf0eb4073a3011c018e3ec623&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvY29ubGlucQ&locale=en&session=501e624582290416590865140b8c6189f6cfb16030f120291982782ebdd48f41&shop=conlinq.myshopify.com&timestamp=1696663115 302 - - 241.459 ms
2023-10-07T07:18:37.633046008Z [shopify-app/INFO] Authenticating admin request
2023-10-07T07:18:37.639076709Z GET /auth/exit-iframe?embedded=1&hmac=85965c6d595e4125224df581cdb57a8e0bbbf7fdf0eb4073a3011c018e3ec623&host=YWRtaW4uc2hvcGlmeS5jb20vc3RvcmUvY29ubGlucQ&locale=en&session=501e624582290416590865140b8c6189f6cfb16030f120291982782ebdd48f41&shop=conlinq.myshopify.com&timestamp=1696663115&exitIframe=%2Fauth%3Fshop%3Dconlinq.myshopify.com 200 - - 3.716 ms

app is hosted here
https://flex-shopify-host.azurewebsites.net/

 

Anyone has a clue what is wrong.

 

Replies 5 (5)

erisetyawan
Visitor
1 0 0

I also encountered the same issue. Have you found a solution yet?

morishin
Shopify Partner
8 0 4

 

I, too, encountered the same issue.

For me, it turned out that the scopes defined in the shopify.app.toml file differed from the SCOPES environment variable (used at https://github.com/Shopify/shopify-app-template-remix/blob/0c3a7b15e3f6dfe4c8c3d648cefb703a0a1adb53/...).

ryan99
Shopify Partner
31 3 12

Thankyou!!!! I had the same issue, updated the scopes in the toml and partners but not in the env var. Shopify should add an error that tells you why its not authenticating

Charles_Marsh
Shopify Partner
36 0 0

Honestly... I could kiss you right now! THANK YOU

dom003
Shopify Partner
2 0 0

for this did you guys mean that the scopes defined in the shopify.app.toml is lowercase, and the shopify.server.ts uses it in CAPs in scopes: process.env.SCOPES?

 

Was it solved by making it caps in the shopify.app.toml file? Or what did you mean? 

I've been pulling my hair out for weeks trying to figure out why my app is blank once deployed.