Skip to content
Cloudflare Docs

TanStack

In this guide, you will create a new TanStack Start ↗ application and deploy it to Cloudflare Workers (with the new Workers Assets).

1. Set up a new project

Start by cloning the Cloudflare example from the official TanStack repository.

Terminal window
npx gitpick TanStack/router/tree/main/examples/react/start-basic-cloudflare my-tanstack-app

After setting up your project, change your directory by running the following command:

Terminal window
cd my-tanstack-app

And install the project's dependencies with:

Terminal window
npm install

2. Develop locally

After you have created your project, run the following command in the project directory to start a local development server. This will allow you to preview your project locally during development.

Terminal window
npm run dev

3. Deploy your Project

Your project can be deployed to a *.workers.dev subdomain or a Custom Domain, from your own machine or from any CI/CD system, including Cloudflare's own.

To deploy your application you will first need to build it:

Terminal window
npm run build

Once it's been built you can deploy it via:

Terminal window
npm run deploy

If you're using CI, ensure you update your "deploy command" configuration appropriately.

Bindings

Your TanStack Start application can be fully integrated with the Cloudflare Developer Platform, in both local development and in production, by using bindings.

You can use bindings simply by importing the env object ↗ and accessing it in your server side code.

For example in the following way:

import { createFileRoute } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { env } from "cloudflare:workers";


export const Route = createFileRoute("/")({
  loader: () => getData(),
  component: RouteComponent,
});


const getData = createServerFn().handler(() => {
  // Use env here
});


function RouteComponent() {
  // ...
}

See src/routes/index.tsx for an example.

With bindings, your application can be fully integrated with the Cloudflare Developer Platform, giving you access to compute, storage, AI and more.

Bindings Access to compute, storage, AI and more.