How to use App Bridge in standalone webapps

[Arlen22]

Summary

I'm building a standalone webapp using Polaris, but the Polaris documentation does not say how to integrate app bridge nav menu and stuff like that into a standalone website. Apparently it's part of the Shopify admin, and I can't seem to find any standalone version.

Are you using React components?

Yes

[mahfuzkhan12]

Hey there,

You're correct that Shopify App Bridge is mainly used for apps embedded inside Shopify admin, which is why it's a bit tricky to integrate it directly into a standalone web app. That said, you can still use the Polaris design system without App Bridge.

If you're building a standalone web app and don’t need to communicate with Shopify (i.e., it’s not an embedded app), you can skip using App Bridge components like NavigationMenu. Instead, you can use Polaris components like Navigation, TopBar, and Frame to create custom navigation.

Here's a quick summary of what you can do:

• Use PolarisProvider to wrap your app and enable Polaris components.
• Replace the NavigationMenu with Polaris’s Navigation and other layout components (Frame, TopBar, etc.).
• App Bridge won’t be necessary unless you plan to embed your app inside Shopify admin.

[sillycube]

No way to do so. App bridge must be used in the Shopify admin

[chloerice]

Hey @Arlen22 👋🏽 The green path for Shopify app development is embedded apps, UI extensions, server functions, and storefront themes. shopify.dev documentation documents everything you need to build for these parts of the platform. App Bridge isn't necessary for standalone apps, as it's purpose is to provide the interop layer for apps to seamlessly embed into the Shopify admin. You can use any UI library or development stack that you want for your standalone app, as long as it does not look like the Shopify admin and meets App Store Requirements. You'll just need to set up Shopify OAuth and use your API key to communicate with the Shopify admin APIs.

The Polaris design system is meant to provide Partners and App Developers with the front end design and development tools needed to build embedded apps that are consistent with the rest of the Shopify admin. Polaris can only be used in standalone apps if you fork and completely change the styles to not look like the Shopify admin, as it's very important that merchants understand whether or not they are in a 3rd party app or in the Shopify admin. The TopBar and Navigation components are deprecated as these aren't needed for embedded apps, but they are still available though in the current major version (you use them directly if you are not embedding your app, see Frame stories for examples).

[mihalikv]

Hi @chloerice,

I am working on a payment extension where a non-embedded app is required. I started with the Remix example, where Polaris is used in a non-embedded app.

Is it okay to use Polaris in this kind of application, or does it violate the license?
If it's okay to use it in a non-embedded payment extension, shouldn't we also keep the Navigation component?

I checked existing payment providers, and some of them use Polaris while others have their own UI.

Thanks.

[chloerice]

Hey @mihalikv 👋🏽 The library is specifically for use in the internal Shopify admin codebase and for apps that embed within it so they can seamlessly share the same design/UX patterns as the admin, so the chrome components like topbar and navigation are no longer in the system as they are only for the Shopify admin so they've moved to the internal codebase. Technically nothing is stopping you from using Polaris, and it's not a violation of the license as long as it's a Shopify-only app (e.g., it's not serving as an application admin for Shopify and other ecommerce platforms).