Using Shopify App Bridge without NPM

Aljazari · ‎11-14-2020

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!

Trish_Ta · ‎11-14-2020

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 · ‎06-17-2024

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>