How to deploy a Shopify App to Vercel

Shopify apps built with the Shopify CLI React Router template are server-rendered web apps that authenticate merchants over OAuth and render inside the Shopify admin. Because the template is a standard React Router app, Vercel detects the framework and deploys it with zero configuration when you enable the @vercel/react-router preset.

This guide walks through deploying the template to Vercel, replacing its local SQLite session storage with Postgres, and pointing your Shopify configuration at the live URL.

Copy link to headingOverview

You'll learn how to:

• Gather the Shopify configuration values your deployment needs
• Enable the Vercel preset for a React Router app
• Replace the template's local SQLite session storage with Postgres
• Deploy to Vercel with the correct environment variables
• Point your Shopify app configuration at the live Vercel URL and verify the installation

Copy link to headingPrerequisites

Before you begin, make sure you have:

• A Vercel account
• The Shopify CLI installed and authenticated to your store
• A Shopify app scaffolded with the Shopify CLI React Router template. You can scaffold a new app by running shopify app init

Copy link to headingQuick start with an AI coding agent

If you're working with an AI coding agent like Claude Code or Cursor, you can use this prompt to have it help you with building your Shopify app:

Copy link to headingHow it works

The template is a standard React Router app with Shopify's OAuth, session storage, and embedded-app scaffolding on top. React Router deploys to Vercel with zero configuration, so there is no Dockerfile, container port, or secret manager to set up.

The @vercel/react-router preset splits the app bundle across Vercel Functions and enables function-level configuration.

Only two things need attention, both Shopify-specific:

1. Feeding the production URL back into both Vercel and Shopify
2. Moving the default SQLite session store to a database that persists across deployments

Copy link to headingSteps

Copy link to heading1. Link your project to Vercel

Link your codebase with a new or existing Vercel project:

vercel link

Copy link to heading2. Gather your Shopify configuration

Your deployed app needs the following environment variables:

From your project root, print the current values:

shopify app env show

These values live alongside shopify.app.toml.

If that file doesn't exist yet, link the Shopify project first:

shopify app config link

Add each variable to your Vercel project with the Vercel CLI:

vercel env add

Copy link to heading3. Enable the Vercel preset

Install the Vercel preset:

pnpm install @vercel/react-router

Create react-router.config.ts in your project root:

import { vercelPreset } from '@vercel/react-router/vite';
import type { Config } from '@react-router/dev/config';

export default {
  ssr: true,
  presets: [vercelPreset()],
} satisfies Config;

Copy link to heading4. Swap SQLite for Postgres

The template's default Prisma SQLite store doesn't persist reliably in a serverless environment, so session data would be lost between deployments. Use an existing Postgres database or provision one through the Vercel Marketplace.

For example, to install Prisma Postgres:

vercel install prisma

Update the datasource in prisma/schema.prisma:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

Generate the Prisma client:

prisma generate

Then apply the schema:

prisma migrate deploy

If the project doesn't have migration history, push the schema directly instead:

prisma db push

Copy link to heading5. Create a base URL resolver

The template references SHOPIFY_APP_URL in multiple places. Vercel exposes system environment variables such as VERCEL_PROJECT_PRODUCTION_URL, so you can resolve the app URL automatically instead of hardcoding it per environment.

Create app/utils/app-url.ts:

export function getAppUrl(): string {
  const explicit = process.env.SHOPIFY_APP_URL;
  if (explicit) return explicit.replace(/\/$/, "");

  const vercel = process.env.VERCEL_PROJECT_PRODUCTION_URL;
  if (vercel) return `https://${vercel}`;

  return "http://localhost:3000";
}

Use it in app/shopify.server.ts:

1
import { getAppUrl } from "./utils/app-url";
2

3
const shopify = shopifyApp({
4
  apiKey: process.env.SHOPIFY_API_KEY,
5
  apiSecretKey: process.env.SHOPIFY_API_SECRET || "",
6
  apiVersion: ApiVersion.July26,
7
  scopes: process.env.SCOPES?.split(","),
8
  appUrl: getAppUrl(),
9
  // your existing code
10
});

Use it in vite.config.ts:

1
import { reactRouter } from "@react-router/dev/vite";
2
import { defineConfig, type UserConfig } from "vite";
3
import tsconfigPaths from "vite-tsconfig-paths";
4
import { getAppUrl } from "./app/utils/app-url";
5

6
// Related: https://github.com/remix-run/remix/issues/2835#issuecomment-1144102176
7
// Replace the HOST env var with SHOPIFY_APP_URL so that it doesn't break the Vite server.
8
// The CLI will eventually stop passing in HOST,
9
// so we can remove this workaround after the next major release.
10
if (
11
  process.env.HOST &&
12
  (!process.env.SHOPIFY_APP_URL ||
13
    process.env.SHOPIFY_APP_URL === process.env.HOST)
14
) {
15
  process.env.SHOPIFY_APP_URL = process.env.HOST;
16
  delete process.env.HOST;
17
}
18

19
const host = new URL(getAppUrl()).hostname;
20

21
// your existing code

Copy link to heading6. Update your build command

Update the build script in package.json to generate the Prisma client:

"build": "prisma generate && react-router build"

Copy link to heading7. Deploy to Vercel

Run the following command from the project root:

vercel deploy --prod

Vercel detects React Router and builds the application without additional configuration.

Copy link to heading8. Finish the Shopify configuration

In shopify.app.toml, set application_url to your Vercel production URL and update the redirect URLs:

application_url = "https://<your-app-url>"

[auth]
redirect_urls = ["https://<your-app-url>/auth/callback"]

Deploy the Shopify app configuration:

shopify app deploy

Install the app on a development store and confirm that:

• The OAuth flow completes successfully
• The app loads embedded inside the Shopify admin

Copy link to headingTroubleshooting

Copy link to headingThe OAuth flow fails or redirects to an error page

Shopify validates the redirect against your app configuration. Confirm that application_url and redirect_urls in shopify.app.toml match your Vercel production URL exactly, including the /auth/callback path, and run shopify app deploy again after any change.

Copy link to headingPrisma client errors during build or at runtime

The Prisma client must be generated as part of the Vercel build. Confirm your build script runs prisma generate before react-router build, and that you applied the schema to your Postgres database with prisma migrate deploy or prisma db push.

Copy link to headingThe app fails to authenticate after deploying

A mismatch between the credentials in Vercel and Shopify causes authentication to fail silently. Run shopify app env show and confirm that SHOPIFY_API_KEY, SHOPIFY_API_SECRET, and SCOPES in your Vercel project match those values for every environment.

Copy link to headingNext steps

• Learn more about React Router on Vercel, including caching and function configuration
• Manage secrets and configuration with environment variables on Vercel
• Browse Postgres providers in the Vercel Marketplace
• Explore the Shopify React Router app template on GitHub