Skip to content
Cloudflare Docs

TanStack Start

TanStack Start ↗ is a full-stack framework for building web applications. It comes with features like server-side rendering, streaming, server functions, bundling, and more. In this guide, you learn to deploy a TanStack Start application to Cloudflare Workers.

1. Set up a TanStack Start project

If you have an existing TanStack Start application, skip to the Configuring an existing TanStack Start application section.

Creating a new TanStack Start application

Use the create-cloudflare ↗ CLI (C3) to set up a new project. C3 will create a new project directory, initiate TanStack Start'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-start-app --framework=tanstack-start

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

Terminal window
cd my-tanstack-start-app

Configuring an existing TanStack Start application

If you have an existing TanStack Start application, you can configure it to run on Cloudflare Workers by following these steps:

  1. Add the wrangler.jsonc configuration file to the root of your project with the following content:

    {
      "$schema": "./node_modules/wrangler/config-schema.json",
      "name": "<YOUR_PROJECT_NAME>",
      "compatibility_date": "2025-09-02",
      "compatibility_flags": [
        "nodejs_compat"
      ],
      "main": "@tanstack/react-start/server-entry",
      "observability": {
        "enabled": true
      }
    }

  2. Install wrangler as a development dependency:

    Terminal window
    npm i -D wrangler@latest

  3. Install the @cloudflare/vite-plugin package as a dependency:

    Terminal window
    npm i @cloudflare/vite-plugin@latest

  4. Update your vite.config.ts file to include the Cloudflare Vite plugin:

    vite.config.ts
    import { defineConfig } from "vite";
    import { cloudflare } from "@cloudflare/vite-plugin";
    ...
    

    export default defineConfig({
      plugins: [cloudflare({ viteEnvironment: { name: 'ssr' } }), ...],
      // ... other configurations
    });

  5. Update the scripts section of your package.json file to include the following commands:

    package.json
    "scripts": {
      ...
      "deploy": "npm run build && wrangler deploy",
      "preview": "npm run build && vite preview",
      "cf-typegen": "wrangler types"
    }

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

You can deploy your project to a *.workers.dev subdomain or a Custom Domain from your own machine or from any CI/CD system, including Cloudflare's own Workers Builds.

The following command will build and deploy your project. If you are using CI, ensure you update your Deploy command configuration appropriately.

Terminal window
npm run deploy

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.