Loading…
Shopify’s platform is the Web platform
2023-10-18
- Source
- Shopify
- Published
- Added to Yomu
Summary
Shopify now recommends Remix for building Admin apps, which merchants use to configure apps, view data, and integrate services within Shopify Admin. Because these apps run in cross-origin iframes, browser restrictions can block cookies, storage, URL updates, and direct access to the Admin interface; App Bridge uses postMessage() to restore capabilities and support deeper integration. The new App Bridge client replaces the previous package, requires only a script tag, and makes standard web APIs such as history.pushState() work with Admin apps. The Remix template uses file-based routes, server-side loaders and actions, implicit API handling, and Shopify-specific integrations supplied by @shopify/shopify-app-remix, with Prisma provided for storage and sessions. Shopify integrated the template into Shopify CLI and describes it as the beginning of broader platform and design-system reworks.
Context
Shopify Admin apps run in cross-origin iframes, where browser privacy restrictions can make cookies, storage, URL handling, and other standard web development practices unreliable. Shopify also wanted apps to integrate more deeply with Shopify Admin while giving developers a more idiomatic web development experience.
Approach / What changed
Shopify recommends a Remix template for Admin apps and introduces a rewritten App Bridge client. App Bridge uses postMessage() to bridge the iframe and Admin, supports standard history APIs, and can be loaded with a script tag for centrally deployed fixes. The template provides file-based routes, server-side loaders and actions, Shopify API authentication and access through @shopify/shopify-app-remix, and Prisma-based storage and session support.
Takeaways
- The new App Bridge client is loaded with a script tag, allowing Shopify to deploy backwards-compatible fixes to apps without requiring dependency updates and redeployments.
- Remix loaders and actions supply route data and implicitly generated API endpoints, while server-side rendering can show personalized content faster than a traditional client-side app.
- The @shopify/shopify-app-remix package handles Shopify-specific setup including OAuth access tokens, ID Tokens, and HMAC signature verification for GraphQL API access.