shopifyshopify-appshopify-app-bridge

Uncaught Error: App Bridge Next: missing required configuration fields: shop in Shopify app (extension)

I'm working on my first shopify template extension app. It's a simple youtube player whit some limited configurations

enter image description here

I'm having a problem understanding this shopify app bridge. This is my code:

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

<script>
    document.getElementById('app-bridge-script').addEventListener('load', function () {

        const AppBridge = window['app-bridge'];
        if (!AppBridge) {
            console.error("App Bridge is not loaded");
            return;
        }

        const shopOrigin = "{{ shop.permanent_domain }}";
        const urlParams = new URLSearchParams(window.location.search);
        const host = urlParams.get('host') || localStorage.getItem('shopifyHost');

        if (!host) {
            console.error("Host parameter missing. Redirecting to Shopify Admin...");
            return;
        }

        // Store host in localStorage
        localStorage.setItem('shopifyHost', host);

        if (!shopOrigin) {
            console.error("Shop origin is missing. Ensure Liquid variable is available.");
            return;
        }

        const createApp = AppBridge.default;
        const app = createApp({
            apiKey: "1afda9c7739b01787e521504308ef44a",
            shopOrigin: shopOrigin,
            shop: shopOrigin,
            host: host,
        });

        console.log("App Bridge initialized", app);
    });
</script>

In this case i'm always getting console error

Uncaught Error: App Bridge Next: missing required configuration fields: shop
    at app-bridge.js:1:45586
    at app-bridge.js:1:45663
    at app-bridge.js:1:45693
    at app-bridge.js:1:54607
    at app-bridge.js:1:61912

If i update my header with meta for shop, like this

<head>
    <meta name="shopify-api-key" content="<api-key>" />
    <meta name="shopify-shop" content="{{ shop.permanent_domain }}" />
    <script id="app-bridge-script" src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
</head>

Then everything is working OK, until i'm in admin section, but when I visit fronpage (store), I immediately get redirected in admin -> apps and sales channel -> my app

What am I missing?

Solution

  • I am not sure about what type of apps are extensions considered as in Shopify.

    As a rule of thumb: App Bridge works only with the embedded apps

    More details

    Edit: I am posting this answer because I trying to create a non-embedded app but the template used app-bridge, so I wasted a lot of hours on this and finally came to this solution