--- title: How to deploy a Shopify App to Vercel description: Deploy the official Shopify CLI React Router app template to Vercel with the @vercel/react-router preset and Postgres session storage. url: /kb/guide/deploy-shopify-app-to-vercel canonical_url: "https://vercel.com/kb/guide/deploy-shopify-app-to-vercel" published: 2026-08-06 last_updated: 2026-08-06 authors: Matt Lewis related: - /docs/cli/integration - /docs/environment-variables/system-environment-variables - /docs/frameworks/frontend/react-router - /docs/environment-variables install_vercel_plugin: npx plugins add vercel/vercel-plugin --- Shopify apps built with the Shopify CLI [React Router template](https://github.com/Shopify/shopify-app-template-react-router) 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. ## Overview 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 ## Prerequisites Before you begin, make sure you have: - A [Vercel account](https://vercel.com/signup) - The [Shopify CLI](https://shopify.dev/docs/api/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` ## Quick 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: ### Agent prompt ```txt I want to build a Shopify app that will be deployed to Vercel. Build the app with the Shopify CLI React Router template: https://github.com/Shopify/shopify-app-template-react-router. Then fetch and follow this Vercel knowledge base guide step by step: https://vercel.com/kb/guide/deploy-shopify-app-to-vercel. When searching for additional information, use the 'site:' search operator to scope your searches to vercel.com and shopify.dev. Ask me to complete any interactive or authenticated steps. If anything is ambiguous while you work on this, ask me instead of guessing. ``` ## How 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 ## Steps ### 1\. Link your project to Vercel Link your codebase with a new or existing Vercel project: `vercel link` ### 2\. Gather your Shopify configuration Your deployed app needs the following environment variables: | Variable | Description | | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | `SHOPIFY_API_KEY` | Your app's client ID from the Shopify app configuration | | `SHOPIFY_API_SECRET` | Your app's client secret, used to validate requests from Shopify | | `SCOPES` | Comma-separated list of [access scopes](https://shopify.dev/docs/api/usage/access-scopes) the app requests, for example `write_products` | 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` ### 3\. 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;` ### 4\. 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](https://vercel.com/marketplace/category/database?search=postgres). For example, to install Prisma Postgres: `vercel install prisma` > `vercel install` is an alias for [`vercel integration add`](https://vercel.com/docs/cli/integration#vercel-integration-add). After provisioning the resource, the command connects it to your linked project and runs `vercel env pull`, so `DATABASE_URL` is available locally without any extra steps. 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` ### 5\. Create a base URL resolver The template references `SHOPIFY_APP_URL` in multiple places. Vercel exposes [system environment variables](https://vercel.com/docs/environment-variables/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`: `import { getAppUrl } from "./utils/app-url"; const shopify = shopifyApp({ apiKey: process.env.SHOPIFY_API_KEY, apiSecretKey: process.env.SHOPIFY_API_SECRET || "", apiVersion: ApiVersion.July26, scopes: process.env.SCOPES?.split(","), appUrl: getAppUrl(), // your existing code });` Use it in `vite.config.ts`: `import { reactRouter } from "@react-router/dev/vite"; import { defineConfig, type UserConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-paths"; import { getAppUrl } from "./app/utils/app-url"; // Related: https://github.com/remix-run/remix/issues/2835#issuecomment-1144102176 // Replace the HOST env var with SHOPIFY_APP_URL so that it doesn't break the Vite server. // The CLI will eventually stop passing in HOST, // so we can remove this workaround after the next major release. if ( process.env.HOST && (!process.env.SHOPIFY_APP_URL || process.env.SHOPIFY_APP_URL === process.env.HOST) ) { process.env.SHOPIFY_APP_URL = process.env.HOST; delete process.env.HOST; } const host = new URL(getAppUrl()).hostname; // your existing code` ### 6\. Update your build command Update the `build` script in `package.json` to generate the Prisma client: `"build": "prisma generate && react-router build"` ### 7\. 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. ### 8\. Finish the Shopify configuration In `shopify.app.toml`, set `application_url` to your Vercel production URL and update the redirect URLs: `application_url = "https://" [auth] redirect_urls = ["https:///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 ## Troubleshooting ### The 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. ### Prisma 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`. ### The 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. ## Next steps - Learn more about [React Router on Vercel](https://vercel.com/docs/frameworks/frontend/react-router), including caching and function configuration - Manage secrets and configuration with [environment variables on Vercel](https://vercel.com/docs/environment-variables) - Browse Postgres providers in the [Vercel Marketplace](https://vercel.com/marketplace/category/database?search=postgres) - Explore the [Shopify React Router app template](https://github.com/Shopify/shopify-app-template-react-router) on GitHub