Unable to meet "Using the latest App Bridge script loaded from Shopify's CDN" requirement

App Bridge
1

I have an app built with Svelte with this dependency:
"@shopify/app-bridge": "^3.7.10"

I have auth redirects and installation process work properly.

BUT this “embedded app check” fails after submission:

Using the latest App Bridge script loaded from Shopify's CDN

I am trying to resolve this issue. Here is what I have done:

  1. Added script from Shopify CDN, where %SHOPIFY_API_KEY% is my Client ID:
<meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
  1. Added a shopify.app.toml file to the root of my project:
client_id = "xxx"
application_url = "xxx"
embedded = true
name = "xxx"
handle = "xxx"

[access_scopes]
scopes = "read_products,write_products"

[auth]
redirect_urls = ["xxx", "yyy"]

[webhooks]
api_version = "2025-04"

[[webhooks.subscriptions]]
topics = ["app/uninstalled"]
uri = "xxx"

[pos]
embedded = false

But I get error 404 - There's no page at this address

image
image823×322 12.7 KB

I notice I get redirected to my App URL specified in Shopify Partners before I see this 404 error (btw this URL is different from the one I specified in .toml).

I am also wondering wouldn’t my package.json dependency "@shopify/app-bridge": "^3.7.10" conflict with script from CDN within <head>?

Another note is that the script from CDN “Embedded app check” is still not satisfied.

Could someone let me know what is wrong and what I can do to fix the issue?

2

You shouldn’t need the dependency @shopify/app-bridge anymore.
This is likely causing you the issue, you’ll need to remove it and move over to the CDN.

3

I removed it and still getting the same issue: 404 error.

I removed basically everything related to Shopify except these 2 lines in <head> and the .toml config for now. I just want to make installation work at this point.

4

I have my .toml config available at mywebsite.com/shopify.app.toml - is it correct? The config basically contains the same data as Configuration in Shopify Partners. I am wondering if the .toml file is actually required?

Previously, I had the .toml in the root, but I realized it has no effect on anything as we deploy to firebase.

5

No you do not and should not deploy your toml to your hosting environment as it leaks your setup.

There are two deployments you have to do.
Firstly you need to deploy your apps code to whichever hosting provider you want, in your case firebase.

You then need to deploy your shopify config (the toml), this is done via the Shopify CLI using the deploy command

1 Like
6

Thanks! I got it working!

1 Like
7

@JordanFinners

I’m using a CDN link in my index.html file like this:

<meta name="shopify-api-key" content="%REACT_APP_SHOPIFY_PLUGIN_KEY%" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

However, when I add this code, I start getting a 404 error inside the Shopify iframe.

I’m using React 16 and not using any Shopify App Bridge NPM package.

What could be the issue?

image
image1758×869 79.5 KB

8

You should upgrade to React 18 and try that version just to check if its a react problem.

Also if you have any Content Security policy that it allows access to Shopify CDN