Remix + Vercel + Vite + Trigger.dev

[martinse]

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.