Separation of Frontend & Backend in an Embedded Shopify App (Remix + Express)

Authentication & Access
1

Hi all,

We’re currently building a Shopify app and are running into some confusion around the separation of concerns between frontend and backend. In other web apps we’ve developed, we naturally split the two — for security reasons (e.g., database isolation) as well as for maintainability and clean coding practices. We also have multiple apps with overlapping capabilities, so hosting a single business-logic API server makes a lot of sense.

However, it’s been surprisingly difficult to make this work cleanly within Shopify and we have been unable to find a template or example that demonstrates best practices for this kind of setup. Our question has two parts:

Part 1: Is a frontend/backend split even possible?

This is mainly a documentation question. We have not been able to find a proper template for a React Router frontend + Express backend that cleanly wires up Shopify’s auth and App Bridge.

For example, we’ve looked at:

We understand we can build out manual auth flows from the docs, but were hoping there might be utilities or examples of how this is supposed to look in practice. Ideally, we’d like a project structure like this (which we already have running with Shopify CLI + toml files working):

apps/
  frontend/
  backend/

Basically, we’d like to confirm whether Shopify embedded apps are expected to be built with this separation, or if the ecosystem just assumes everything lives in one codebase.

Part 2: Auth flow details (App Bridge + Shopify App Express)

We’ve been trying to wire up authentication between App Bridge on the frontend and @shopify/shopify-app-express middleware on the backend. Currently we’re using authenticatedFetch from @shopify/app-bridge/utilities, but whenever we call the backend, we get this error:


Session was not valid. Redirecting to /auth?shop=<app-name>.myshopify.com | {shop: <app-name>.myshopify.com}

Our assumption is that we’re missing a step in how App Bridge and the backend middleware exchange and validate tokens. It feels like we’re close, but lacking a canonical example of this setup.

Summary

Our entire question would be solved by a FE/BE split template that:

  • Uses React Router/Remix for the frontend

  • Uses Express with @shopify/shopify-app-express for the backend

  • Correctly wires up App Bridge → authenticated fetch → backend auth middleware

We’re not struggling with .toml files or the CLI setup (that part is working fine). The challenge is purely about structuring the app with separation of concerns and wiring up authentication correctly across that boundary.

Any pointers to docs, templates, or best practices would be hugely appreciated!

If you need any additional information to help clarify our setup, please let us know.

Thanks :folded_hands: