I've built my app in dev mode, all working well with shopify app dev, I then pushed to a new github repo and linked that up to a remix vercel project, duplicating .env in Vercel's env variables.
I then made the below changes:
Updated vite.config.ts to include
import { vercelPreset } from '@vercel/remix/vite';
with
export default defineConfig({
server: {
port: Number(process.env.PORT || 3000),
hmr: hmrConfig,
fs: {
// See /config/server-options.html#server-fs-allow for more information
allow: ["app", "node_modules"],
},
},
plugins: [
remix({
presets: [vercelPreset()],
ignoredRouteFiles: ["**/.*"],
}),
tsconfigPaths(),
],
build: {
assetsInlineLimit: 0,
},
}) satisfies UserConfig;
Updated shopify.app.toml with the vercel domain (as well as the redirect urls)
application_url = ";
(checked the same is reflected in partner dashboard when deployed)
Updated schema.prisma to use postgresql as compatible with Vercel
datasource db {
provider = "postgresql"
url = env("POSTGRES_PRISMA_URL")
directUrl = env("POSTGRES_URL_NON_POOLING")
}
Added the AWS postgresql DB to the variables in .env and in Vercel Env Variables.
I used the same url for both pooling and non pooling. Also worth noting that the db name in AWS is "-" so I've used "postgres" as the name in the url structure below:
postgresql://USERNAME:PASSWORD@db-instance-name.3439notreal874y73.ap-southeast-2.rds.amazonaws:5432/postgres?schema=public
Modified migration.sql from using DATETIME to TIMESTAMP
-- CreateTable
CREATE TABLE "Session" (
"id" TEXT NOT NULL PRIMARY KEY,
"shop" TEXT NOT NULL,
"state" TEXT NOT NULL,
"isOnline" BOOLEAN NOT NULL DEFAULT false,
"scope" TEXT,
"expires" TIMESTAMP,
"accessToken" TEXT NOT NULL,
"userId" BIGINT,
"firstName" TEXT,
"lastName" TEXT,
"email" TEXT,
"accountOwner" BOOLEAN NOT NULL DEFAULT false,
"locale" TEXT,
"collaborator" BOOLEAN DEFAULT false,
"emailVerified" BOOLEAN DEFAULT false
);
Modified shopify.server.ts to use the Vercel adapter import
import "@shopify/shopify-app-remix/adapters/vercel";
When I deploy and reload the shopify app I see this:
This Serverless Function has timed out.
Your connection is working correctly.
Vercel is working correctly.
504: GATEWAY_TIMEOUT Code: FUNCTION_INVOCATION_TIMEOUT ID: syd1::dpz7m-1739602920446-a36b8deef67a
If you are a visitor, contact the website owner or try again later.
If you are the owner, learn how to fix the error and check the logs.
Have I missed a step to setting this up correctly?
I've also updated all mentions of @remix-run/node and replaced with @vercel/remix like the below
import type { LoaderFunctionArgs } from "@vercel/remix";
APART from this mention in entry.server.tsx
import {
createReadableStreamFromReadable,
type EntryContext,
} from "@remix-run/node";
When I run npm install
up to date, audited 1149 packages in 6s
306 packages are looking for funding
run `npm fund` for details
9 low severity vulnerabilities
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Nothing particularly egregious, seems like everything should be working together
├── @prisma/[email protected]
├── @remix-run/[email protected]
├── @remix-run/[email protected]
├── @remix-run/[email protected]
├── @remix-run/[email protected]
├── @remix-run/[email protected]
├── @shadcn/[email protected]
├── @shopify/[email protected]
├── @shopify/[email protected]
├── @shopify/[email protected]
├── @shopify/[email protected]
├── @shopify/[email protected]
├── @shopify/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @vercel/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
I've built my app in dev mode, all working well with shopify app dev, I then pushed to a new github repo and linked that up to a remix vercel project, duplicating .env in Vercel's env variables.
I then made the below changes:
Updated vite.config.ts to include
import { vercelPreset } from '@vercel/remix/vite';
with
export default defineConfig({
server: {
port: Number(process.env.PORT || 3000),
hmr: hmrConfig,
fs: {
// See https://vitejs.dev/config/server-options.html#server-fs-allow for more information
allow: ["app", "node_modules"],
},
},
plugins: [
remix({
presets: [vercelPreset()],
ignoredRouteFiles: ["**/.*"],
}),
tsconfigPaths(),
],
build: {
assetsInlineLimit: 0,
},
}) satisfies UserConfig;
Updated shopify.app.toml with the vercel domain (as well as the redirect urls)
application_url = "https://project-name.vercel.app"
(checked the same is reflected in partner dashboard when deployed)
Updated schema.prisma to use postgresql as compatible with Vercel
datasource db {
provider = "postgresql"
url = env("POSTGRES_PRISMA_URL")
directUrl = env("POSTGRES_URL_NON_POOLING")
}
Added the AWS postgresql DB to the variables in .env and in Vercel Env Variables.
I used the same url for both pooling and non pooling. Also worth noting that the db name in AWS is "-" so I've used "postgres" as the name in the url structure below:
postgresql://USERNAME:PASSWORD@db-instance-name.3439notreal874y73.ap-southeast-2.rds.amazonaws:5432/postgres?schema=public
Modified migration.sql from using DATETIME to TIMESTAMP
-- CreateTable
CREATE TABLE "Session" (
"id" TEXT NOT NULL PRIMARY KEY,
"shop" TEXT NOT NULL,
"state" TEXT NOT NULL,
"isOnline" BOOLEAN NOT NULL DEFAULT false,
"scope" TEXT,
"expires" TIMESTAMP,
"accessToken" TEXT NOT NULL,
"userId" BIGINT,
"firstName" TEXT,
"lastName" TEXT,
"email" TEXT,
"accountOwner" BOOLEAN NOT NULL DEFAULT false,
"locale" TEXT,
"collaborator" BOOLEAN DEFAULT false,
"emailVerified" BOOLEAN DEFAULT false
);
Modified shopify.server.ts to use the Vercel adapter import
import "@shopify/shopify-app-remix/adapters/vercel";
When I deploy and reload the shopify app I see this:
This Serverless Function has timed out.
Your connection is working correctly.
Vercel is working correctly.
504: GATEWAY_TIMEOUT Code: FUNCTION_INVOCATION_TIMEOUT ID: syd1::dpz7m-1739602920446-a36b8deef67a
If you are a visitor, contact the website owner or try again later.
If you are the owner, learn how to fix the error and check the logs.
Have I missed a step to setting this up correctly?
I've also updated all mentions of @remix-run/node and replaced with @vercel/remix like the below
import type { LoaderFunctionArgs } from "@vercel/remix";
APART from this mention in entry.server.tsx
import {
createReadableStreamFromReadable,
type EntryContext,
} from "@remix-run/node";
When I run npm install
up to date, audited 1149 packages in 6s
306 packages are looking for funding
run `npm fund` for details
9 low severity vulnerabilities
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Nothing particularly egregious, seems like everything should be working together
├── @prisma/[email protected]
├── @remix-run/[email protected]
├── @remix-run/[email protected]
├── @remix-run/[email protected]
├── @remix-run/[email protected]
├── @remix-run/[email protected]
├── @shadcn/[email protected]
├── @shopify/[email protected]
├── @shopify/[email protected]
├── @shopify/[email protected]
├── @shopify/[email protected]
├── @shopify/[email protected]
├── @shopify/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @vercel/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
1 Answer
Reset to default 1Turns out I was missing a key step.
Once you've switched your project to using a postgresql DB (essential for Vercel) you will need to run npx prisma migrate deploy from the root of your project in your code editor which will use your defined .env URLs (POSTGRES_URL_NON_POOLING, and POSTGRES_PRISMA_URL) to migrate your tables from your project to the db.
Then you're good to go.