Deploy to Vercel

Drop on Vercel Functions, with a Cloudflare D1 database, a private Vercel Blob store for files, and a Vercel Cron Job that deletes expired code images.

DatabaseD1 over HTTP
FilesVercel Blob
Rate limitsPer instance
Code imagesSVG
Code image cleanupVercel Cron Job
LiveNot deployed yet

What you need

  • A Vercel account and the Vercel CLI (npx vercel login).
  • A Cloudflare account and Wrangler (pnpm exec wrangler login).
  • Node.js 24 and pnpm.
  • A GitHub OAuth app with the callback https://<your-project>.vercel.app/api/auth/callback/github, or your own domain.

Deploy

  1. Get the code and create the Vercel project:

    npx giget gh:vite-hub/drop my-drop
    cd my-drop
    pnpm install
    npx vercel link   # creates the project
  2. Create the D1 database and copy its id into the environment:

    pnpm exec wrangler d1 create vitehub-drop-vercel   # copy the id into CLOUDFLARE_D1_DATABASE_ID

    Apply the migrations:

    CLOUDFLARE_D1_DATABASE_NAME=vitehub-drop-vercel pnpm db:migrate:d1
  3. Create a private Blob store and connect it to the project. Vercel adds BLOB_READ_WRITE_TOKEN for you:

    npx vercel blob create-store drop-files --access private --yes
  4. Add the settings. Each command asks for the value:

    npx vercel env add DROP_HOST production                 # vercel
    npx vercel env add ENABLE_EXPERIMENTAL_COREPACK production   # 1
    npx vercel env add CLOUDFLARE_D1_DATABASE_ID production
    npx vercel env add CLOUDFLARE_D1_DATABASE_NAME production
    npx vercel env add CLOUDFLARE_API_TOKEN production --sensitive
    npx vercel env add GITHUB_CLIENT_ID production
    npx vercel env add GITHUB_CLIENT_SECRET production --sensitive
    npx vercel env add BETTER_AUTH_SECRET production --sensitive
    npx vercel env add DROP_ADMINS production
  5. Deploy. Vercel builds with DROP_HOST=vercel, which writes Vercel's Build Output, the function, and the cron job:

    npx vercel deploy --prod
  6. Run the smoke test:

    DROP_URL=https://<your-domain> pnpm test:e2e:deployed

Settings

VariableWhat it is
GITHUB_CLIENT_IDYour GitHub OAuth app's client ID.
GITHUB_CLIENT_SECRETA client secret from the same app.
BETTER_AUTH_SECRETSigns sessions and agent tokens. One per deployment: openssl rand -base64 32
DROP_ADMINSGitHub user ids that join as Admin, comma-separated: gh api users/<login> --jq .id
DROP_HOSTvercel. Read at build time.
ENABLE_EXPERIMENTAL_COREPACK1, so Vercel installs with the pnpm version in package.json.
CLOUDFLARE_ACCOUNT_ID, CLOUDFLARE_API_TOKENCloudflare account id and an account API token with D1 edit access.
CLOUDFLARE_D1_DATABASE_ID, CLOUDFLARE_D1_DATABASE_NAMEThe id and name of vitehub-drop-vercel.
CLOUDFLARE_API_TOKENCloudflare account API token with D1 edit access.
BLOB_READ_WRITE_TOKENAdded by Vercel when you connect the Blob store.

Database

Cloudflare D1 over HTTPS. pnpm db:migrate:d1 applies new migrations and skips the ones already applied; run it before you deploy a schema change.

On Vercel

  • Code images are SVG only: PNG needs Cloudflare Browser Run.
  • Rate limits count in memory per function instance, so they're looser than on Cloudflare.
  • Files go to a private Blob store, and Drop serves them at /f/ after checking access.
  • A Vercel Cron Job deletes expired code images every hour. On the Hobby plan, Vercel runs it once a day; expired images stop being served either way.