claude-start-cf
Back to blog

Building on Cloudflare Workers

2025-02-01claude-start-cf

Cloudflare Workers give us a serverless edge runtime that pairs naturally with TanStack Start's server functions.

Edge-Native Data Access

Every server function in this app can access Cloudflare bindings — D1 databases, R2 storage, KV stores — through a simple helper:

import { getDB } from '~/lib/env'

const db = getDB()
const { results } = await db
  .prepare('SELECT * FROM notes ORDER BY id DESC')
  .all()

The getDB() helper wraps import { env } from 'cloudflare:workers', giving us typed access to all bindings declared in wrangler.jsonc.

Environment Variables

There are three layers of configuration on Workers:

SourceAccessEncryptedUse Case
wrangler.jsonc varsprocess.envNoNon-secret config
wrangler secret putprocess.envYesAPI keys, tokens
.env / VITE_ prefiximport.meta.envNoClient-side config

Server Functions as RPC

TanStack Start's createServerFn compiles into RPC endpoints. On the client, calling listNotes() triggers a fetch() to the server handler. On the server (SSR), it calls the handler directly — no network hop.

const listNotes = createServerFn({ method: 'GET' })
  .handler(async () => {
    const db = getDB()
    const { results } = await db
      .prepare('SELECT * FROM notes')
      .all()
    return results
  })

This pattern means you write one function and it works optimally in both contexts.

Deploy Workflow

No dev server — we deploy directly:

npm run deploy  # → npm run build && wrangler deploy

Every change goes straight to the edge. Fast iteration, production-grade from the start.