Building Shopify Apps with Remix: A Complete Guide

Introduction

Building Shopify apps has evolved significantly over the years. With the introduction of Remix as a first-class framework for Shopify app development, we now have a powerful, modern approach to creating performant and maintainable applications.

In this comprehensive guide, we'll walk through everything you need to know to build production-ready Shopify apps using Remix. Whether you're new to Shopify development or looking to modernize your existing workflow, this guide has you covered.

Why Choose Remix?

Remix offers several compelling advantages for Shopify app development:

• Server-Side Rendering: Built-in SSR means faster initial page loads and better SEO
• Nested Routing: Organize your app logically with nested routes that match your UI hierarchy
• Data Loading: Loaders and actions provide a clean way to handle data fetching and mutations
• Error Boundaries: Graceful error handling at any level of your component tree
• Progressive Enhancement: Works without JavaScript, then enhances with client-side features

"Remix's data loading patterns align perfectly with how Shopify apps need to fetch and mutate data. It's been a game-changer for our development workflow."

Getting Started

Let's start by creating a new Shopify app using the Shopify CLI with Remix template:

npm init @shopify/app@latest -- --template remix
cd your-app-name
npm run dev

This sets up a complete development environment with hot reloading, TypeScript support, and all the Shopify integrations you need.

The project structure follows Remix conventions with some Shopify-specific additions:

• app/routes/ - Your application routes
• app/shopify.server.ts - Shopify API configuration
• extensions/ - Theme and UI extensions
• prisma/ - Database schema and migrations

Setting Up Authentication

Shopify authentication is handled automatically by the template, but understanding how it works is crucial:

The authentication flow uses OAuth 2.0 and session tokens. When a merchant installs your app, they're redirected through Shopify's OAuth flow, and a session is created to store their access token.

// app/shopify.server.ts
import "@shopify/shopify-app-remix/adapters/node";
import { shopifyApp } from "@shopify/shopify-app-remix/server";

const shopify = shopifyApp({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET,
  scopes: ["read_products", "write_products"],
  // ... other configuration
});

Database Integration

The template includes Prisma for database management. Here's how to set up your models:

// prisma/schema.prisma
model Session {
  id          String   @id
  shop        String
  state       String
  isOnline    Boolean  @default(false)
  accessToken String
  expires     DateTime?
}

Run migrations with:

npx prisma migrate dev

Deployment

When you're ready to deploy, you have several options:

• Shopify's hosting: Free hosting for Shopify apps with automatic scaling
• Vercel: Excellent Remix support with edge functions
• Fly.io: Great for apps that need persistent connections
• Railway: Simple deployment with built-in databases

For most apps, we recommend starting with Shopify's built-in hosting as it handles SSL, scaling, and provides free hosting for apps in the Shopify App Store.

Conclusion

Remix provides an excellent foundation for building Shopify apps. Its focus on web standards, server-side rendering, and progressive enhancement aligns perfectly with what merchants expect from their apps.

Key takeaways:

• Use the official Shopify CLI template for the best developer experience
• Leverage Remix's data loading patterns for clean, maintainable code
• Take advantage of nested routes to organize complex UIs
• Start with Shopify's hosting for simplicity, then scale as needed

Ready to build your first Shopify app with Remix? Start with the template and iterate from there. And if you need help, we're always here to assist.