Build Shopify Apps with React Router 7

Shopify app development now centers on React Router for new embedded apps. If you previously learned with Remix, the core ideas still feel familiar: route modules, loaders, actions, server authentication, and nested admin routes. The recommended starting point is Shopify’s React Router template and the @shopify/shopify-app-react-router package.

Why React Router 7 Matters for Shopify Apps

React Router framework mode keeps the full-stack route model developers liked in Remix while giving Shopify a current foundation for app templates. For developers, the practical takeaway is simple: use the React Router template for new apps and be careful with older tutorials that still assume Remix package names.

Scaffold a New App

shopify app init --template=https://github.com/Shopify/shopify-app-template-react-router

After scaffolding, run the app with Shopify CLI, install it on a development store, and confirm the embedded admin loads correctly.

Understand the App Route Structure

Embedded admin routes should live under the app layout route so they inherit App Bridge setup, authentication, boundary handling, and required Shopify headers. In many templates, new embedded pages use an app. route prefix.

Your First Loader

Loaders run on the server before rendering route data. In a Shopify app, protected loaders usually authenticate first.

export const loader = async ({ request }) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(`#graphql
    query ShopInfo { shop { name myshopifyDomain } }
  `);
  return await response.json();
};

Your First Action

Actions handle mutations such as form submissions, sync buttons, or settings updates. Keep business logic in services and keep route actions focused on authentication, validation, and response handling.

Authentication in React Router Apps

Use authenticate.admin(request) for admin routes. It gives your server access to authenticated helpers such as Admin API clients, billing utilities, redirects, and session data. Do not build your own embedded auth flow unless you have a very specific reason.

Session Storage

Shopify’s app template commonly uses Prisma-backed session storage. The session store holds installed shop sessions so your app can make authenticated requests after OAuth completes.

Building UI with Polaris Web Components

Polaris Web Components help your app look native inside the Shopify admin. Keep screens focused: onboarding, settings, core workflow, billing status, and support.

export default function Dashboard() {
  return (
    <s-page heading="Dashboard">
      <s-section heading="Products">
        <s-paragraph>Manage synced products from your app.</s-paragraph>
        <s-button variant="primary">Sync now</s-button>
      </s-section>
    </s-page>
  );
}

Migrating from Remix

Most concepts carry over, but you should update dependencies, imports, template assumptions, and any APIs that changed. Test OAuth, billing, webhooks, redirects, and embedded navigation after migration.

Next Steps

Build a small dashboard route, call the Admin API, save one setting to your database, and handle one webhook. That practical path teaches more than reading docs alone.

Want to build a full app from scratch? Check out the Shopify App Development Course on codewith Mehedi.

Building Shopify Apps with React Router 7: Complete Walkthrough