Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 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
76 changes: 76 additions & 0 deletions src/content/changelog/workers/2025-10-24-tanstack-start.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
---
title: TanStack Start framework support
description: TanStack Start can now be used with the Cloudflare Vite plugin
products:
- workers
date: 2025-10-24
---

import { PackageManagers, WranglerConfig } from "~/components";

[TanStack Start](https://tanstack.com/start/) can now be used with the [Cloudflare Vite plugin](/workers/vite-plugin/).

## Create a new project

You can create a new project using the `create-cloudflare` CLI:

<PackageManagers
type="create"
pkg="cloudflare@latest"
args="my-tanstack-start-app --framework=tanstack-start"
/>

## Migrate an existing project

Migrating an exiting project is also straightforward.

1. Install `@cloudflare/vite-plugin` and `wrangler`

<PackageManagers type="add" pkg="@cloudflare/vite-plugin wrangler" dev />

2. Add the Cloudflare plugin to your Vite config

```ts {4, 8} title="vite.config.ts"
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(),
],
});
```

3. Add your Worker config file

<WranglerConfig>

```toml
name = "my-tanstack-start-app"
compatibility_date = "2025-10-11"
compatibility_flags = ["nodejs_compat"]
main = "@tanstack/react-start/server-entry"
```

</WranglerConfig>

4. Modify the scripts in your `package.json`

```json title="package.json" del={5} ins={6-8}
{
"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](/workers/framework-guides/web-apps/tanstack-start/) for more info.
2 changes: 1 addition & 1 deletion src/content/docs/workers/vite-plugin/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { PackageManagers, WranglerConfig } from "~/components";

:::note
This guide demonstrates creating a standalone Worker from scratch.
If you would instead like to create a new application from a ready-to-go template, refer to the [React Router](/workers/framework-guides/web-apps/react-router/), [React](/workers/framework-guides/web-apps/react/) or [Vue](/workers/framework-guides/web-apps/vue/) framework guides.
If you would instead like to create a new application from a ready-to-go template, refer to the [TanStack Start](/workers/framework-guides/web-apps/tanstack-start/), [React Router](/workers/framework-guides/web-apps/react-router/), [React](/workers/framework-guides/web-apps/react/) or [Vue](/workers/framework-guides/web-apps/vue/) framework guides.
:::

## Start with a basic `package.json`
Expand Down
7 changes: 4 additions & 3 deletions src/content/docs/workers/vite-plugin/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,21 @@ Your Worker code runs inside [workerd](https://github.com/cloudflare/workerd), m
- Uses the Vite [Environment API](https://vite.dev/guide/api-environment) to integrate Vite with the Workers runtime
- Provides direct access to [Workers runtime APIs](/workers/runtime-apis/) and [bindings](/workers/runtime-apis/bindings/)
- Builds your front-end assets for deployment to Cloudflare, enabling you to build static sites, SPAs, and full-stack applications
- Official support for [React Router v7](https://reactrouter.com/) with server-side rendering
- Official support for [TanStack Start](https://tanstack.com/start/) and [React Router v7](https://reactrouter.com/) with server-side rendering
- Leverages Vite's hot module replacement for consistently fast updates
- Supports `vite preview` for previewing your build output in the Workers runtime prior to deployment

## Use cases

- [React Router v7](https://reactrouter.com/) (support for more full-stack frameworks is coming soon)
- [TanStack Start](https://tanstack.com/start/)
- [React Router v7](https://reactrouter.com/)
- Static sites, such as single-page applications, with or without an integrated backend API
- Standalone Workers
- Multi-Worker applications

## Get started

To create a new application from a ready-to-go template, refer to the [React Router](/workers/framework-guides/web-apps/react-router/), [React](/workers/framework-guides/web-apps/react/) or [Vue](/workers/framework-guides/web-apps/vue/) framework guides.
To create a new application from a ready-to-go template, refer to the [TanStack Start](/workers/framework-guides/web-apps/tanstack-start/), [React Router](/workers/framework-guides/web-apps/react-router/), [React](/workers/framework-guides/web-apps/react/) or [Vue](/workers/framework-guides/web-apps/vue/) framework guides.

To create a standalone Worker from scratch, refer to [Get started](/workers/vite-plugin/get-started/).

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,9 @@ For more information about Vite's configuration options, see [Configuring Vite](

The default behavior of using the Worker name as the environment name is appropriate when you have a standalone Worker, such as an API that is accessed from your front-end application, or an [auxiliary Worker](/workers/vite-plugin/reference/api/#interface-pluginconfig) that is accessed via service bindings.

## React Router v7
## Full-stack frameworks

If you are using the Cloudflare Vite plugin with [React Router v7](https://reactrouter.com/), then your Worker is used for server-side rendering and tightly integrated with the framework.
If you are using the Cloudflare Vite plugin with [TanStack Start](https://tanstack.com/start/) or [React Router v7](https://reactrouter.com/), then your Worker is used for server-side rendering and tightly integrated with the framework.
To support this, you should assign it to the `ssr` environment by setting `viteEnvironment.name` in the plugin config.

```ts title="vite.config.ts"
Expand Down
Loading