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.
| Database | D1 over HTTP |
| Files | Vercel Blob |
| Rate limits | Per instance |
| Code images | SVG |
| Code image cleanup | Vercel Cron Job |
| Live | Not 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
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 projectCreate 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_IDApply the migrations:
CLOUDFLARE_D1_DATABASE_NAME=vitehub-drop-vercel pnpm db:migrate:d1Create a private Blob store and connect it to the project. Vercel adds
BLOB_READ_WRITE_TOKENfor you:npx vercel blob create-store drop-files --access private --yesAdd 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 productionDeploy. Vercel builds with
DROP_HOST=vercel, which writes Vercel's Build Output, the function, and the cron job:npx vercel deploy --prodRun the smoke test:
DROP_URL=https://<your-domain> pnpm test:e2e:deployed
Settings
| Variable | What it is |
|---|---|
| GITHUB_CLIENT_ID | Your GitHub OAuth app's client ID. |
| GITHUB_CLIENT_SECRET | A client secret from the same app. |
| BETTER_AUTH_SECRET | Signs sessions and agent tokens. One per deployment: openssl rand -base64 32 |
| DROP_ADMINS | GitHub user ids that join as Admin, comma-separated: gh api users/<login> --jq .id |
| DROP_HOST | vercel. Read at build time. |
| ENABLE_EXPERIMENTAL_COREPACK | 1, so Vercel installs with the pnpm version in package.json. |
| CLOUDFLARE_ACCOUNT_ID, CLOUDFLARE_API_TOKEN | Cloudflare account id and an account API token with D1 edit access. |
| CLOUDFLARE_D1_DATABASE_ID, CLOUDFLARE_D1_DATABASE_NAME | The id and name of vitehub-drop-vercel. |
| CLOUDFLARE_API_TOKEN | Cloudflare account API token with D1 edit access. |
| BLOB_READ_WRITE_TOKEN | Added 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.