Cloudflare Pages & R2 Storage

1. Create Pages project — npx wrangler pages project create myapp 2. Bind R2 — wrangler r2 bucket create assets, add binding in dashboard 3. Pages Functions — functions/api/[[route]].ts for API, on-demand at edge 4. Upload to R2 — wrangler r2 object put assets/file.jpg --file=./file.jpg 5. Serve via binding — env.ASSETS.get("file.jpg") returns ReadableStream 6. Custom domain — Pages dashboard > Custom domains > add + verify DNS 7. Deploy — wrangler pages deploy ./dist (or connect Git for auto-deploy) 8. Monitor — Cloudflare Analytics (R2 operations, Pages requests, all free)

// wrangler.toml — Pages + R2 + D1 bindings name = "myapp" pages_build_output_dir = "./dist" [[r2_buckets]] binding = "ASSETS" bucket_name = "my-assets" [[d1_databases]] binding = "DB" database_name = "mydb" // functions/api/upload.ts — R2 upload at edge export const onRequestPost = async (ctx: EventContext) => { const form = await ctx.request.formData(); const file = form.get("file") as File; const key = `uploads/${crypto.randomUUID()}-${file.name}`; await ctx.env.ASSETS.put(key, file.stream(), { httpMetadata: { contentType: file.type }, }); return Response.json({ url: `/api/file/${key}`, size: file.size }); }; // functions/api/file/[key].ts — serve from R2 export const onRequestGet = async (ctx: EventContext) => { const key = ctx.params.key; const obj = await ctx.env.ASSETS.get(`uploads/${key}`); if (!obj) return new Response("Not found", { status: 404 }); return new Response(obj.body, { headers: { "Content-Type": obj.httpMetadata.contentType || "application/octet-stream" }, }); };