@shopify/app-bridge-react Modal documentation not clear and unable to develop locally

[ssagli]

Hi, 

We are a bit confused about the documentation related to Modal. it says in Polaris Modal section in the documentation that we need to use @Shopify/app-bridge-react for embedded apps (we assume that is instead of using Modal from @Shopify/polaris or one from the @Shopify/app-bridge). 

Deprecation rationale

As of v3.17.0, usingModalin an embedded app is deprecated. Support for this will be removed in v5.0 as the underlying Shopify App Bridge library will be removed from Polaris React. Learn more about thedeprecation rationale. UseModalfrom@shopify/app-bridge-reactinstead

but when we tried to implement the @Shopify/app-bridge-react Modal, we had issues:

1.  the Provider component doesn't let us use localhost to develop (since it tries to redirect the app to the host/admi/apps/key  endpoint)

2. We tried to look at what <Provider>is doing by going to npm to dig deeper into the code, but the repo link is broken and can't investigate. I looked for the repo directly in the Shopify org github, but no luck.

This is how we are using it and doesn't let us run app locally.

return (
      <I18nContext.Provider value={i18nManager}>
        <AppProvider i18n={enTranslations}>
          <Provider config={{.apiKey: 'Key', host: 'BufferStringHostWithNoHttps' }}>
            <div id='root'>
              { children }
            </div>
          </Provider>
        </AppProvider>
      </I18nContext.Provider>
  )

Our requests are:

1. If we were recommended to use @Shopify/app-bridge-react Modal, the documentation should have more details on how this library is intertwined with other libraries such as @Shopify/app-bridge and @Shopify/polaris. or more details about why Provider is needed when app-bridge already instantiates the app and polaris has its own AppProvider as well.

2. Also, we should be able to look at the Github repo and code to investigate especially if it's on npm.

3. Please let us know the best way to create a modal for an embedded apps. 

[ElanaK]

Hi @ssagli,

You're absolutely right. We need to improve our documentation and examples. We're taking feedback like this and will be making improvements.

In the meantime, let me help with some of the confusion and add some context...

Deprecation notice in Polaris

We had previously started down the path of incorporating App Bridge features in Polaris, but found that it led to bloating the Polaris package and more confusion. From there, we pivoted to creating the app-bridge-react library. 

App Bridge packages

• app-bridge is standalone client with actions to allow an app to control components inside of Shopify Admin
• app-bridge-react is a wrapper around app-bridge, designed to streamline the development of React apps

Developing on localhost

Because of the auth and context required for embedded apps, you will need to develop in a dev store via a tunnel. You can run `shopify node serve` in your app to start the tunnel. It will output a link to install your local app in your dev store. 

Modal example

Starting with the app generated from the Shopify CLI, I have a provider set up like this:

class MyApp extends App {
  render() {
    const { Component, pageProps, host } = this.props;
    return (
      <AppProvider i18n={translations}>
        <Provider
          config={{
            apiKey: API_KEY,
            host: host,
            forceRedirect: true,
          }}
        >
          <MyProvider Component={Component} {...pageProps} />
        </Provider>
      </AppProvider>
    );
  }
}

The "AppProvider" is a Polaris element that allows for sharing global settings like i18n and themes, while the inner "Provider" is required for the App Bridge initialization in React.

When you have this set up, you can use the Modal component from app-bridge-react. You can mix App Bridge components with Polaris components in your app.

import { Heading, Page } from "@shopify/polaris";
import { Modal } from "@shopify/app-bridge-react";

const Index = () => (
  <Page>
    <Heading>Shopify app with Node and React </Heading>
    <Modal title="My Modal" message="hello" open />
  </Page>
);

export default Index;

And finally, I know that it's nice to be able to jump into source code to troubleshoot, but we are not planning to open-source App Bridge at this time. 

Please let us know if you have any more issues or questions! 

Elana

[ssagli]

I appreciate your prompt and detailed response! I do have one more question. Are we supposed to be using app-bridge-react modal or is using Polaris modal still an ok practice? 

[ElanaK]

Technically, you can use the Polaris modal for now, but there are two issues:

1. It's being deprecated, so there will be no further bug fixes, etc.
2. It won't disable the whole screen as you would expect when using a modal. It will only block the iframe/embedded app portion, so the rest of the Admin interface will still be navigable.

Using the Polaris modal:

App Bridge Modal...

Hope that helps!

[ElanaK]

Quick follow up here... I'm fairly new to the App Bridge team so I didn't realize this earlier, but we are working toward making the app-bridge code base public. 🙂

[ssagli]

So to triple make sure. Use App-Bridge modal if we are not using react, and if we are using react, then use App Bridge React modal?