Using Shopify App Bridge without NPM

Aljazari
Tourist
14 0 1

I am a php developer and I have to use Shopify App Bridge however, it seems to be npm must be installed to use app bridge. I have never used npm and I will not use  it !
I dont have to install npm on my server. I dont hate work with npm but
Why Shopify forces developers to use it!

Replies 2 (2)

Trish_Ta
Shopify Staff
58 13 28

Hi Aljazari, 

You can use an npm CDN to include App Bridge as a script tag:

<script src="https://unpkg.com/@shopify/app-bridge"></script>
<script>
  var AppBridge = window['app-bridge'];
  var actions = window['app-bridge'].actions;
</script>

See the docs for more info: https://shopify.dev/tools/app-bridge/getting-started#set-up-shopify-app-bridge-in-your-app

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

quazirfan
Shopify Partner
4 0 0

This is my startup.html of my embedded app using Auth Code Grant flow. At the end this redirects to my app's /app endpoint.

 

 

<html>

<head>
  <script src="https://unpkg.com/@shopify/app-bridge@latest/umd/index.js"></script>
</head>

<body>
    App starting...

    <script>
        const createApp = window['app-bridge'].default;
        const { Redirect } = window['app-bridge'].actions;

        const config = { 
            apiKey: "a5f5051a2c6770f59743e0d573bd4ea8", 
            host: new URLSearchParams(location.search).get("host"), 
            forceRedirect: true 
        };

        const app = createApp(config);
        const redirect = Redirect.create(app);
        redirect.dispatch(Redirect.Action.APP, '/app');

    </script>
</body>

</html>