Workers – Build TanStack Start apps with the Cloudflare Vite plugin

Workers – Build TanStack Start apps with the Cloudflare Vite plugin

The Cloudflare Vite plugin now supports TanStack Start apps. Get started with new or existing projects.

New projects

Create a new TanStack Start project that uses the Cloudflare Vite plugin via the create-cloudflare CLI:

  • npm

    npm create cloudflare@latest -- my-tanstack-start-app --framework=tanstack-start
  • yarn

    yarn create cloudflare my-tanstack-start-app --framework=tanstack-start
  • pnpm

    pnpm create cloudflare@latest my-tanstack-start-app --framework=tanstack-start

Existing projects

Migrate an existing TanStack Start project to use the Cloudflare Vite plugin:

  1. Install @cloudflare/vite-plugin and wrangler
  • npm

    npm i -D @cloudflare/vite-plugin wrangler
  • yarn

    yarn add -D @cloudflare/vite-plugin wrangler
  • pnpm

    pnpm add -D @cloudflare/vite-plugin wrangler
  1. Add the Cloudflare plugin to your Vite config
import { defineConfig } from "vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { cloudflare } from "@cloudflare/vite-plugin";
export default defineConfig({
plugins: [
cloudflare({ viteEnvironment: { name: "ssr" } }),
tanstackStart(),
viteReact(),
],
});
  1. Add your Worker config file
  • wrangler.jsonc

    {
    "$schema": "./node_modules/wrangler/config-schema.json",
    "name": "my-tanstack-start-app",
    "compatibility_date": "2025-10-11",
    "compatibility_flags": [
    "nodejs_compat"
    ],
    "main": "@tanstack/react-start/server-entry"
    }
  • wrangler.toml

    name = "my-tanstack-start-app"
    compatibility_date = "2025-10-11"
    compatibility_flags = ["nodejs_compat"]
    main = "@tanstack/react-start/server-entry"
  1. Modify the scripts in your package.json
{
"scripts": {
"dev": "vite dev",
"build": "vite build && tsc --noEmit",
"start": "node .output/server/index.mjs",
"preview": "vite preview",
"deploy": "npm run build && wrangler deploy",
"cf-typegen": "wrangler types"
}
}

See the TanStack Start framework guide for more info.

Source: Cloudflare



Latest Posts

Pass It On
Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *