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

Use the create-cloudflare ↗ CLI (C3) to set up a new project. C3 will create a new project directory, initiate TanStack's official setup tool, and provide the option to deploy instantly.

To use create-cloudflare to create a new TanStack Start project with Workers Assets, run the following command:

Terminal window
npm create cloudflare@latest -- my-tanstack-app --framework=tanstack

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

Terminal window
cd my-tanstack-app

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() {
  // ...
}

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.