Stop Shopify App Bridge redirect to admin panel

App Bridge
1

Hi everyone,
I’m using the Remix template for my Shopify app. I want to access my app directly via this URL:

http://localhost:9999?shop=domain.myshopify.com

However, instead of showing my app, it keeps redirecting to the Shopify admin panel.

Here’s my code:

export default function App() {
  const { apiKey } = useLoaderData<typeof loader>();

  return (
    <AppProvider
      isEmbeddedApp
      apiKey={apiKey}
      features={{ 'auto-redirect': false }}
    >
      <NavMenu>
        <Link to="/app" rel="home">Home</Link>
      </NavMenu>
      <Outlet />
    </AppProvider>
  );
}

How can I prevent the app from redirecting to the admin panel and access it directly in the browser?

2

Hi @Levi_Sea

I believe this is happening because the Shopify Remix app template is designed for embedded apps, which are meant to be loaded inside the Shopify Admin (in an iframe). When you try to access your app directly via a URL like [http://localhost:9999?shop=domain.myshopify.com](http://localhost:9999/?shop=domain.myshopify.com), the app detects it’s not inside the Shopify Admin and redirects you back to the admin panel.

This will happen unless you’re building a non-embedded app.

3

@Liam-Shopify, I used the code snippet below, and the application no longer redirects back to the admin. However, there’s one problem: on localhost, when I use fetch, fetcher cannot call the API. Do you know why the template doesn’t execute the API call outside of the admin?
Thank you

<meta name="shopify-disabled-features" content="auto-redirect" />