cf-image-transforms

A small Cloudflare Worker (Hono + TypeScript) that sits over a public R2 bucket served by a custom domain with Cloudflare Image Transformations enabled.

Endpoints

• GET / — health check, returns { ok: true }.
• GET /search?prefix=<path> — lists every object in the bucket. Optional prefix query filter. Returns { prefix, count, results: [{ key, url }] }, where url is the public URL on the custom domain.
• GET /ui — interactive HTML page for building Cloudflare Image Transformation URLs: pick an image, tweak sizing/quality/format/effects, see a live preview, copy the URL.

Project setup

cp wrangler.example.toml wrangler.toml
# edit wrangler.toml and set your bucket names

echo 'PUBLIC_BUCKET_URL=https://img.example.com' > .dev.vars

npm install
npm run dev        # http://localhost:8787

wrangler.toml and .dev.vars are gitignored — each environment fills them in locally.

Configuration

Name	Where	Purpose
BUCKET	wrangler.toml → [[r2_buckets]]	R2 binding used by /search to list keys
PUBLIC_BUCKET_URL	.dev.vars (local) / wrangler secret put (prod)	Custom domain fronting the bucket, no trailing slash

Scripts

• npm run dev — run locally with Wrangler
• npm run deploy — deploy to Cloudflare
• npm run typecheck — tsc --noEmit

Deploy

wrangler secret put PUBLIC_BUCKET_URL   # first time only
npm run deploy