Building Custom Shopify Apps with React Router

Shopify's app ecosystem has evolved rapidly. Moving from the traditional Rails-based templates to the modern React Router (formerly Remix) based architecture has unlocked new levels of developer productivity and merchant experience quality. In this article, I'll share my journey building Wishlist Pro.

The Shift to React Router

The transition to React Router as the default app framework brings server-side rendering (SSR) and seamless data loading to the forefront. It allows us to build embedded apps that feel like a native part of the Shopify admin, with the performance profile of a modern web application.

          // Loader example: Fetching product data in React Router
          export const loader = async ({ request }) => {
          const { admin } = await authenticate.admin(request);
          const response = await admin.graphql(`
          #graphql
          query getProducts {
          products(first: 10) {
          nodes { id title }
          }
          }
          `);
          return json(await response.json());
          };
        

Designing with Polaris

A great Shopify app isn't just functional; it's familiar. By using Shopify's Polaris design system, we ensure that merchants don't have to learn a new UI language. Every button, layout, and icon in Wishlist Pro adheres to the same standards as Shopify itself.

Data Persistence with Prisma

For Wishlist Pro, we needed a robust way to store customer wishlists across thousands of stores. Prisma ORM allowed us to maintain a clean, type-safe database schema while handling the complexities of Shopify's multi-tenant environment.

Storefront Integration via App Embeds

The real magic happens on the storefront. Using Shopify OS 2.0 App Embed blocks, we can inject our wishlist UI directly into the merchant's theme without modifying a single line of their Liquid code. This "zero-code" installation is a huge selling point for merchants.

GraphQL Admin API: Leveraging the power of typed queries for data fetching.
App Bridge: Seamless communication between the embedded app and the Shopify admin.
Webhooks: Handling real-time updates for product deletions and store uninstalls.

Building for the Shopify ecosystem requires a deep understanding of both the merchant's needs and the platform's technical constraints. Wishlist Pro is a testament to what's possible when you leverage the full power of Shopify's modern stack.