Shopify App Template - Remix

[!NOTE] Remix is now React Router. As of React Router v7, Remix and React Router have merged.

For new projects, use the Shopify App Template - React Router instead.

To migrate your existing Remix app, follow the migration guide.

This is a template for building a Shopify app using the Remix framework.

Rather than cloning this repo, you can use your preferred package manager and the Shopify CLI with these steps.

Visit the shopify.dev documentation for more details on the Remix app package.

Quick start

Prerequisites

Before you begin, you'll need the following:

1. Node.js: Download and install it if you haven't already.
2. Shopify Partner Account: Create an account if you don't have one.
3. Test Store: Set up either a development store or a Shopify Plus sandbox store for testing your app.
4. Shopify CLI: Download and install it if you haven't already.

npm install -g @shopify/cli@latest

Setup

shopify app init --template=https://github.com/Shopify/shopify-app-template-remix

Local Development

shopify app dev

Local development is powered by the Shopify CLI. It logs into your partners account, connects to an app, provides environment variables, updates remote config, creates a tunnel and provides commands to generate extensions.

Authenticating and querying data

To authenticate and query data you can use the shopify const that is exported from /app/shopify.server.js:

export async function loader({ request }) {
  const { admin } = await shopify.authenticate.admin(request);

  const response = await admin.graphql(`
    {
      products(first: 25) {
        nodes {
          title
          description
        }
      }
    }`);

  const {
    data: {
      products: { nodes },
    },
  } = await response.json();

  return nodes;
}

This template comes preconfigured with examples of:

1. Setting up your Shopify app in /app/shopify.server.ts
2. Querying data using Graphql. Please see: /app/routes/app._index.tsx.
3. Responding to webhooks in individual files such as /app/routes/webhooks.app.uninstalled.tsx and /app/routes/webhooks.app.scopes_update.tsx

Please read the documentation for @shopify/shopify-app-remix to understand what other API's are available.

Deployment

Application Storage

This template uses Prisma to store session data, by default using an SQLite database. The database is defined as a Prisma schema in prisma/schema.prisma.

This use of SQLite works in production if your app runs as a single instance. The database that works best for you depends on the data your app needs and how it is queried. You can run your database of choice on a server yourself or host it with a SaaS company. Here's a short list of databases providers that provide a free tier to get started:

Database	Type	Hosters
MySQL	SQL	Digital Ocean, Planet Scale, Amazon Aurora, Google Cloud SQL
PostgreSQL	SQL	Digital Ocean, Amazon Aurora, Google Cloud SQL
Redis	Key-value	Digital Ocean, Amazon MemoryDB
MongoDB	NoSQL / Document	Digital Ocean, MongoDB Atlas

This is the beginning of the README. Read the rest at the original. Read the full README ↗