Shopify App Bridge Not Working

[umairdev]

Hi All,

I am trying to implement Shopify App Bridge in a new app I have created and I have followed the following links:

https://help.shopify.com/en/api/embedded-apps/app-bridge/getting-started

https://help.shopify.com/en/api/embedded-apps/app-bridge/initialization

After installing an app using normal PHP code the app is installed successfully but when I go to apps and click on the app it shows me nothing.

When I check console I see this:

Any help would be appreciated.

Thank You

[Alex]

It looks like whatever is happening, something is trying to frame the admin interface rather than just the app which will not work.

Is this occurring after invoking ShopifyApp.init()? A bit more of a look at your flow would be super helpful. Code examples welcome.

Cheers.

[umairdev]

Hi @Alex,

First of all thanks a lot for replying. Here is a bit more detail.

As I mentioned above that I have used the PHP Symfony framework for the installation of the app.

The app is hosted on Ubuntu 16 with apache. The app installed successfully after installation when I click the app from apps section it shows me above.

As Shopify documentation says you have to use Shopify Ap Bridge So I am using the CDN version and this is the only code I have used so far:

<script src="https://unpkg.com/@shopify/app-bridge"></script>
<script>
    var AppBridge = window['app-bridge'];
    var Actions = window['app-bridge'].actions;
    var createApp = AppBridge.default;
    var app = createApp({
        apiKey: '{{ shopify_api_key }}',
        shopOrigin: 'https://{{ store.storeUrl }}',
    });
</script>

There is only simple HTML displaying on the home page of the app.

Please let me know if this information is enough.

Thank You

[Alex]

Sorry for the massive delay @umairdev, this thread escaped me when we migrated forums engines I believe. Is this an ongoing issue for you? Your code from your example seems valid, so I'd be interested to see what the issue might turn out to be.

Cheers.

[Shailesh-Px]

Hello @umairdev 

Do you have any solution for it?

[Henry_Tao]

Hi @Shailesh-Px 

The shopOrigin should not contain "https://". Can you try this?

<script src="https://unpkg.com/@shopify/app-bridge"></script>
<script>
    var AppBridge = window['app-bridge'];
    var Actions = window['app-bridge'].actions;
    var createApp = AppBridge.default;
    var app = createApp({
            apiKey: '{{ shopify_api_key }}',
            shopOrigin: '{{ store.storeUrl }}',
    });
</script>