Build Shopify Apps with Remix and App Bridge

Covers building embedded Shopify apps on the React Router (formerly Remix) template across six patterns: app scaffolding via npm init @shopify/app@latest with webhook subscriptions declared in shopify.app.toml rather than code; an embedded admin UI using AppProvider/App Bridge and Polaris components (Page, Card, TitleBar); webhook handling via authenticate.webhook(), which verifies the HMAC signature, that must return HTTP 200 within 5 seconds, queuing heavy work to a job queue and handling the GDPR-mandated topics CUSTOMERS_DATA_REQUEST, CUSTOMERS_REDACT, and SHOP_REDACT; GraphQL Admin API queries and mutations via admin.graphql(), including bulkOperationRunMutation for datasets over 250 items, since GraphQL costs 1000 points per 60 seconds; subscription billing through appSubscriptionCreate with test-mode support and a 30-day recurring cycle; and app extensions - admin UI blocks and checkout UI blocks built with @shopify/ui-extensions-react, running sandboxed in an iframe with a limited API surface, configured in shopify.extension.toml.

npm init @shopify/app@latest my-shopify-app

Use it when building a Shopify embedded admin app, its webhooks, GraphQL integration, billing, or checkout/admin extensions. The skill documents seven dated sharp edges that will actively break an app if missed: webhooks failing after 19 retries over 48 hours if the handler doesn't respond within 5 seconds; 429 rate-limit errors from exceeding REST's 2 requests/second or GraphQL's 1000-points/60-seconds budget; "protected customer data" such as names, emails, and addresses requiring separate Partner Dashboard approval since April 2024, on top of OAuth scopes; duplicate webhook definitions when the same topic is declared in both shopify.app.toml and an afterAuth hook; a 404 from Shopify's auto-appended trailing slash on webhook URLs; the REST Admin API being legacy with new public apps required to use GraphQL from April 2025; and "Built for Shopify" status requiring the latest App Bridge and embedded rendering from July 2025. Missing GDPR webhook handlers, even ones that just acknowledge and do nothing, blocks App Store submission outright.

Inputs are Shopify Admin API data - products, orders, subscriptions, customer records where protected-data access is approved - accessed through an authenticated admin GraphQL client; outputs are Remix/React Router routes rendering Polaris UI, webhook responses, and GraphQL mutations. Ten automated validation checks catch common defects at ERROR/WARNING/INFO severity: hardcoded API secrets or keys, a webhook handler missing HMAC verification or a proper 200 response, synchronous non-queued webhook processing, code-based webhook registration duplicating the TOML config, deprecated REST API usage, missing 429 retry handling, in-memory session storage that won't scale (use PrismaSessionStorage or similar), and a loader missing authenticate.admin(request).

Built on @shopify/shopify-app-remix for auth and session management, @shopify/polaris for UI components matching Shopify Admin's design system, @shopify/app-bridge-react for embedded-app chrome (TitleBar, navigation), and @shopify/ui-extensions-react for admin and checkout extensions. It delegates five adjacent needs to sibling skills: stripe-integration for payments beyond Shopify's own billing, auth-specialist for authentication beyond Shopify OAuth, twilio-communications for customer notifications outside Shopify, llm-architect for AI features like product descriptions or chatbots, and aws-serverless for Lambda or Vercel deployment.

Developers building or maintaining a Shopify embedded app - admin UI, webhooks, GraphQL integration, billing, or extensions - who need the platform's specific deadlines (5-second webhook response, April 2025 GraphQL requirement, July 2025 App Bridge requirement) and compliance requirements (GDPR webhooks, protected customer data approval) rather than generic REST API patterns.