How to Use Shopify App Bridge in Storybook

Shopify Apps

Topic summary

A developer is attempting to integrate Shopify App Bridge into Storybook for UI component development, specifically to test modal implementations. They’re using Vite for local development and have added the App Bridge script to preview-head.html.

Core Issue:
Two errors are occurring:

  • “App Bridge Next: missing required configuration fields: shop”
  • “The shopify global is not defined”

Technical Context:

  • Using App Bridge React v4.1.3, Polaris v13.9.0, and Storybook v8.2.7
  • Need to use App Bridge modals because Polaris modal component is officially discouraged
  • Components use useAppBridge() hook and Modal from @shopify/app-bridge-react
  • Storybook configured with AppProvider decorator wrapping stories

Community Response:
One commenter questioned whether App Bridge can function outside the Shopify admin environment, suggesting abstractions or placeholder data as alternatives. The original poster clarified their specific need for modal testing.

Current Status:
The discussion remains unresolved, with another user asking for updates on whether a solution was found or if it’s impossible to achieve.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

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:

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

1 Like
2

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?

3

@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 (
    
  );
};

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 (
        
      );
    },
  ],
  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

4

Hello there, is there any update on this or does it not seem impossible?

Thank you!

Jason