diff --git a/src/content/docs/workers/framework-guides/web-apps/tanstack-start.mdx b/src/content/docs/workers/framework-guides/web-apps/tanstack-start.mdx index acdafdc81b6..a6cead7a6b2 100644 --- a/src/content/docs/workers/framework-guides/web-apps/tanstack-start.mdx +++ b/src/content/docs/workers/framework-guides/web-apps/tanstack-start.mdx @@ -10,6 +10,7 @@ description: Deploy a TanStack Start application to Cloudflare Workers. import { Description, + Details, Render, PackageManagers, Steps, @@ -117,6 +118,163 @@ Preview the build locally before deploying: ::: +## Custom entrypoints + +TanStack Start uses `@tanstack/react-start/server-entry` as your default entrypoint. Create a custom server entrypoint to add additional Workers handlers. These include [Queues](/queues/), [Cron Triggers](/workers/configuration/cron-triggers/), [Durable Objects](/durable-objects/), [Workflows](/workflows/), and [Service Bindings](/workers/runtime-apis/bindings/service-bindings/). + +`createServerEntry()` returns a plain object that you can spread and extend with additional handlers: + + + +1. Create a custom server entrypoint file: + + + + ```ts + import handler, { + createServerEntry, + } from "@tanstack/react-start/server-entry"; + + // Export Durable Objects as named exports + export { MyDurableObject } from "./my-durable-object"; + + const serverEntry = createServerEntry({ + async fetch(request) { + return await handler.fetch(request); + }, + }); + + export default { + ...serverEntry, + + // Handle Queue messages + async queue(batch, env, ctx) { + for (const message of batch.messages) { + console.log("Processing message:", message.body); + message.ack(); + } + }, + + // Handle Cron Triggers + async scheduled(event, env, ctx) { + console.log("Cron triggered:", event.cron); + }, + }; + ``` + + + +2. Update your Wrangler configuration to point to your custom entrypoint: + + + + ```jsonc + { + "main": "app/server.ts", + } + ``` + + + + + +### Test scheduled handlers locally + +Test your scheduled handler locally using the `/__scheduled` endpoint: + +```sh +curl "http://localhost:5173/__scheduled?cron=*+*+*+*+*" +``` + +
+ +Export a Workflow class from your custom entrypoint to run durable, multi-step tasks: + + + +```ts +import { + WorkflowEntrypoint, + WorkflowStep, + WorkflowEvent, +} from "cloudflare:workers"; + +export class MyWorkflow extends WorkflowEntrypoint { + async run(event: WorkflowEvent<{ input: string }>, step: WorkflowStep) { + const result = await step.do("process data", async () => { + return `Processed: ${event.payload.input}`; + }); + + await step.sleep("wait", "10 seconds"); + + await step.do("finalize", async () => { + console.log("Workflow complete:", result); + }); + } +} +``` + + + +Add the Workflow configuration to your Wrangler configuration: + + + +```jsonc +{ + "workflows": [ + { + "name": "my-workflow", + "binding": "MY_WORKFLOW", + "class_name": "MyWorkflow", + }, + ], +} +``` + + + +
+ +
+ +Add a service binding to call another Worker's RPC methods from your TanStack Start application: + + + +```jsonc +{ + "services": [ + { + "binding": "AUTH_SERVICE", + "service": "auth-worker", + }, + ], +} +``` + + + +Call the bound Worker's methods from a server function: + + + +```ts +import { createServerFn } from "@tanstack/react-start"; +import { env } from "cloudflare:workers"; + +const verifyUser = createServerFn() + .validator((token: string) => token) + .handler(async ({ data: token }) => { + const result = await env.AUTH_SERVICE.verify(token); + return result; + }); +``` + + + +
+ ## Bindings Your TanStack Start application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using [bindings](/workers/runtime-apis/bindings/).