Shopify Embedded App (Remix Template) Not Opening in Local Development (shopify app dev)

App Bridge
1

Hi everyone,

I’m currently developing a Shopify embedded app using the Remix template. However, I’m facing an issue while running the app locally.

Setup Details:

  • App created using: Shopify Remix app template

  • Development command:

    npm run dev

    or

    shopify app dev

  • App type: Embedded app

Issue:

When I run the development server, the app does not open inside the Shopify admin.

  • The CLI runs successfully without any errors

  • The tunnel URL is generated

  • But when I try to open the app from the Shopify admin, it either:

    • Does not load at all, or

    • Stays blank / fails to render

Expected Behavior:

The app should open properly inside the Shopify admin as an embedded app during local development.

What I’ve Tried:

  • Restarted the dev server multiple times

  • Reinstalled dependencies

  • Logged out and logged back into Shopify CLI

  • Verified app URL and redirect URLs in Partner Dashboard

  • Cleared browser cache

Questions:

  • Is there anything specific required for Remix-based embedded apps to work locally?

  • Could this be related to App Bridge or iframe loading issues?

  • Are there any additional configuration steps needed for the Remix template?

Any help or guidance would be appreciated. Thanks in advance! :folded_hands:

2

Hi folks, does anyone have any idea why the app is not running locally? I’m currently working on development, but I’m unable to verify anything due to this issue.

It was working fine this morning, but it suddenly stopped. I also reverted all my recent changes, but it’s still not working.

3

While running the app locally using npm run dev or shopify app dev, the App Bridge loads successfully. However, when attempting to retrieve the idToken using window.shopify.idToken, it does not return any response. Promise return undefined.

image
image1076×278 24.2 KB

4

Hi @jaymit_b

Since the CLI runs fine and the tunnel is active, the issue is almost certainly in how the app is being served inside the Shopify admin iframe. Here’s some things to check:

1. Check your browser console and network tab

Open the Shopify admin with your app, then open DevTools (Console + Network tabs). Look for:

  • CSP (Content-Security-Policy) errors — these show up as Refused to frame... messages and will silently prevent your app from rendering
  • JavaScript errors on load
  • Failed network requests (especially to your tunnel URL)

This will narrow things down fast.

2. Verify entry.server.tsx adds response headers

The Remix template requires you to call shopify.addDocumentResponseHeaders in your entry.server.tsx to set the correct frame-ancestors CSP directive. Without this, the Shopify admin iframe will block your app from loading. It should look something like:

// entry.server.tsx
import shopify from "./shopify.server";

export default function handleRequest(/* ... */) {
  // ...
  shopify.addDocumentResponseHeaders(request, responseHeaders);
  // ...
}

If this is missing or misconfigured, the app will appear blank with no obvious error in the terminal.

3. Confirm your app URLs match

Make sure the tunnel URL generated by shopify app dev matches what’s configured in your Partner Dashboard under App URL and Allowed redirection URL(s). When running shopify app dev, the CLI should handle this automatically — but if you’ve manually edited these values, they can get out of sync.