-
-
Notifications
You must be signed in to change notification settings - Fork 867
-
Been playing around with Remix and Trigger.dev hosted on Vercel building with Vite. There are a lot of weird stuff that needs to be changed to make it all work and hopefully someone else will have use for this post and can help improve the caveats.
This is based on feedback / discussions from:
- https://discord.com/channels/1066956501299777596/1066956844553207828/1188541487735128133
- How to deploy Remix + Vite anywhere? remix-run/remix#8127 (comment)
- Help from @matt-aitken
Outstanding issues
- Error in Trigger.dev once job is finished, although it's executed correctly
- Vercel to deploy on push, currently to get the deploy working you have to run it manually
Basically follow the guide from https://remix.run/docs/en/main/future/vite to convert your Remix project to use Vite, for a basic project this should be 1:1 mapped.
To make Trigger.dev jobs work you need to modify your jobs similar to this:
~/routes/api.trigger.ts
import { type ActionFunctionArgs, json } from '@vercel/remix' import { triggerClient } from '~/backend/clients/triggerClient' // path to your trigger.dev client export async function action({ request }: ActionFunctionArgs) { await import('~/jobs/myJob1.server') await import('~/jobs/myJob2.server') ... const response = await triggerClient.handleRequest(request) if (!response) { return json({ error: 'Not found' }, { status: 404 }) } return json(response.body, { status: response.status, headers: response.headers }) }
As Vercel does not suport Remix / Vite + Trigger.dev out of the box you will need to set up build and deployment manually for now. I'm sure there's a way to automate this in Vercel but for now I'm sticking with simple bash scripts:
Create :
~/build.sh:
#!/bin/bash set -eu -o pipefail cd "$(dirname "${BASH_SOURCE[0]}")" # clean rm -rf .vercel/output mkdir -p .vercel/output # config.json cp config.json .vercel/output/config.json # static mkdir -p .vercel/output/static cp -r ./build/client/. .vercel/output/static rm -rf .vercel/output/static/.vite # functions mkdir -p .vercel/output/functions/index.func cp .vc-config.json .vercel/output/functions/index.func/.vc-config.json npx esbuild ./app/adapters/vercel-serverless.ts \ --outfile=.vercel/output/functions/index.func/index.mjs \ --metafile=./build/esbuild-metafile-vercel-serverless.json \ --define:process.env.NODE_ENV='"production"' \ --banner:js="import { createRequire } from 'module'; const require = createRequire(import.meta.url);" \ --bundle --minify --format=esm --platform=node
~/.vc-config.json:
{
"runtime": "nodejs20.x",
"handler": "index.mjs",
"launcherType": "Nodejs",
"regions": ["lhr1"]
}~/config.json:
{
"version": 3,
"routes": [
{
"src": "^/assets/(.*)$",
"headers": {
"cache-control": "public, immutable, max-age=31536000"
}
},
{
"handle": "filesystem"
},
{
"src": ".*",
"dest": "/"
}
]
}~/app/adapters/base.ts:
import { createRequestHandler, type ServerBuild } from '@remix-run/server-runtime' // @ts-ignore import * as build from '../../build/server/index.js' export const remixHandler = createRequestHandler(build as any as ServerBuild, 'production')
~/app/adapters/vercel-serverless.ts:
import { createMiddleware } from '@hattip/adapter-node/native-fetch' import { remixHandler } from './base' export default createMiddleware((ctx) => remixHandler(ctx.request))
And to build and deploy to PROD:
NODE_ENV=production ./build.sh NODE_ENV=production vercel deploy --prebuilt --prod
If running Trigger.dev jobs it will result in an error at the end - but the job itself is executed. TBD to figure out why it gives an error back.
Beta Was this translation helpful? Give feedback.