How to Use Shopify App Bridge in Storybook

[masatify]

Hi everyone,

I'm currently working on a Shopify app and using Vite for my local development environment. I want to integrate Shopify App Bridge into Storybook for UI component development. I have added the following code to my preview-head.html:

<!-- preview-head.html -->
<meta name="shopify-api-key" content="%SHOPIFY_API_KEY%" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>

The versions of the dependencies and devDependencies I am using are:

dependencies: {
  "@shopify/app": "3.58.2",
  "@shopify/app-bridge-react": "^4.1.3",
  "@shopify/cli": "3.65.0",
  "@shopify/polaris": "^13.9.0",
  "@shopify/shopify-api": "^11.2.0",
  "@shopify/shopify-app-remix": "^3.1.0",
  "@shopify/shopify-app-session-storage-prisma": "^5.1.0",
},
devDependencies: {
  "storybook": "^8.2.7",
  "@shopify/api-codegen-preset": "^1.0.1",
  "@shopify/app-bridge-types": "^0.0.14",
}

I am encountering the following errors:

Error: App Bridge Next: missing required configuration fields: shop
Error: The shopify global is not defined. This likely means the App Bridge script tag was not added correctly to this page

Has anyone successfully set up Shopify App Bridge in Storybook, and could you share any tips or code examples on how to achieve this? Specifically, I am looking for guidance on:

1. Initializing App Bridge within Storybook's environment.
2. Ensuring that the app bridge context is correctly passed to all components.

Any advice or examples would be greatly appreciated!

Thank you in advance for your help.

Best regards,

Masatify

[tobebuilds]

Why do you need to use App Bridge within Storybook? I doubt it's possible to use Shopify App Bridge outside the Shopify admin.

Can you create an abstraction instead? Or provide your UI components with placeholder data in your Storybook examples?

[masatify]

@tobebuilds 

Thank you for your message.

The reason I want to use App Bridge within Storybook is to ensure that the various contents implemented in the modal are working correctly. While it is possible to use the modal component from Polaris, it is officially discouraged, so I need to use the App Bridge modal.

The code I am implementing is very simple. In addition to the "preview-head.html" I mentioned earlier, I am calling the following within the necessary components:

import { useAppBridge, Modal } from "@shopify/app-bridge-react";

type Props = {
  ...
};

export const Example = ({ ...props }: Props) => {
  const shopify = useAppBridge();

  return (
    <Modal>
      ...
    </Modal>
  );
};

Here is also my preview.tsx configuration for Storybook:

// preview.tsx
import React from "react";
import type { Preview } from "@storybook/react";
import "../app/globals.css";
import "@shopify/polaris/build/esm/styles.css";

import { AppProvider } from "@shopify/polaris";
import translations from "@shopify/polaris/locales/en.json";

const preview: Preview = {
  decorators: [
    (StoryFn) => {
      return (
        <AppProvider i18n={translations}>
          <StoryFn />
        </AppProvider>
      );
    },
  ],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

I would appreciate any advice or suggestions on what else I could try.

Thank you.

Best regards,
Masatify