Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ description: Deploy a TanStack Start application to Cloudflare Workers.

import {
Description,
Details,
Render,
PackageManagers,
Steps,
Expand Down Expand Up @@ -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:

<Steps>

1. Create a custom server entrypoint file:

<TypeScriptExample filename="app/server.ts">

```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);
},
};
```

</TypeScriptExample>

2. Update your Wrangler configuration to point to your custom entrypoint:

<WranglerConfig>

```jsonc
{
"main": "app/server.ts",
}
```

</WranglerConfig>

</Steps>

### Test scheduled handlers locally

Test your scheduled handler locally using the `/__scheduled` endpoint:

```sh
curl "http://localhost:5173/__scheduled?cron=*+*+*+*+*"
```

<Details header="Example: Using Workflows">

Export a Workflow class from your custom entrypoint to run durable, multi-step tasks:

<TypeScriptExample filename="app/server.ts">

```ts
import {
WorkflowEntrypoint,
WorkflowStep,
WorkflowEvent,
} from "cloudflare:workers";

export class MyWorkflow extends WorkflowEntrypoint<Env> {
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);
});
}
}
```

</TypeScriptExample>

Add the Workflow configuration to your Wrangler configuration:

<WranglerConfig>

```jsonc
{
"workflows": [
{
"name": "my-workflow",
"binding": "MY_WORKFLOW",
"class_name": "MyWorkflow",
},
],
}
```

</WranglerConfig>

</Details>

<Details header="Example: Using Service Bindings">

Add a service binding to call another Worker's RPC methods from your TanStack Start application:

<WranglerConfig>

```jsonc
{
"services": [
{
"binding": "AUTH_SERVICE",
"service": "auth-worker",
},
],
}
```

</WranglerConfig>

Call the bound Worker's methods from a server function:

<TypeScriptExample filename="app/routes/index.tsx">

```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;
});
```

</TypeScriptExample>

</Details>

## 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/).
Expand Down
Loading