shopify-app-dev

Shopify App Development

Before writing code

Fetch live docs:

1. Fetch https://shopify.dev/docs/apps/build for app development overview
2. Web-search site:shopify.dev app bridge for current App Bridge APIs and CDN version
3. Web-search site:shopify.dev shopify-app-template-remix for Remix template patterns
4. Web-search site:shopify.dev shopify-app-remix authenticate for authentication APIs
5. Web-search site:github.com shopify shopify-app-template-remix for latest template source

App Types

Public Apps (App Store)

• Listed on Shopify App Store
• Installed by any merchant via OAuth flow
• Must pass Shopify app review
• Use session tokens for authentication

Custom Apps

• Built for a single store
• Installed directly from admin (Settings > Apps)
• Simpler auth: custom app access token (shpca_ prefix)

Private Apps (Legacy)

• Deprecated — migrate to custom apps
• Used hardcoded credentials (shppa_ prefix)

Remix App Architecture

The official template (shopify-app-template-remix):

shopify app init
# Select "Remix" template
# Provides: auth, session storage, webhook handling, Polaris UI

Key Files

File	Purpose
app/shopify.server.ts	Initializes @shopify/shopify-app-remix (auth, sessions, webhooks)
app/routes/auth.$.tsx	Handles OAuth callback
app/routes/webhooks.tsx	Webhook endpoint
app/routes/app._index.tsx	Main app UI (embedded in admin)
app/routes/app.tsx	App layout with App Bridge provider
shopify.app.toml	App configuration (scopes, URLs, extensions)
prisma/schema.prisma	Database schema for session storage

Fetch live docs for the current template file structure — files and patterns evolve with @shopify/shopify-app-remix versions.

Minimal Pattern: Authenticated Loader

// Pattern: authenticate admin request, call GraphQL, return data
// Fetch live docs for current authenticate.admin() API shape
import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(`{ shop { name } }`);
  const { data } = await response.json();
  return json({ shopName: data.shop.name });
};