Skip to content

Commit 335ea35

Browse files
TanStack Start changelog (#26055)
* TanStack Start changelog * Update src/content/changelog/workers/2025-10-24-tanstack-start.mdx Co-authored-by: Matt Kane <[email protected]> * PR feedback --------- Co-authored-by: Matt Kane <[email protected]>
1 parent 5560aa0 commit 335ea35

File tree

4 files changed

+84
-6
lines changed

4 files changed

+84
-6
lines changed
Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
title: Build TanStack Start apps with the Cloudflare Vite plugin
3+
description: TanStack Start can now be used with the Cloudflare Vite plugin
4+
products:
5+
- workers
6+
date: 2025-10-24
7+
---
8+
9+
import { PackageManagers, WranglerConfig } from "~/components";
10+
11+
The [Cloudflare Vite plugin](/workers/vite-plugin/) now supports [TanStack Start](https://tanstack.com/start/) apps.
12+
Get started with new or existing projects.
13+
14+
## New projects
15+
16+
Create a new TanStack Start project that uses the Cloudflare Vite plugin via the `create-cloudflare` CLI:
17+
18+
<PackageManagers
19+
type="create"
20+
pkg="cloudflare@latest"
21+
args="my-tanstack-start-app --framework=tanstack-start"
22+
/>
23+
24+
## Existing projects
25+
26+
Migrate an existing TanStack Start project to use the Cloudflare Vite plugin:
27+
28+
1. Install `@cloudflare/vite-plugin` and `wrangler`
29+
30+
<PackageManagers type="add" pkg="@cloudflare/vite-plugin wrangler" dev />
31+
32+
2. Add the Cloudflare plugin to your Vite config
33+
34+
```ts {4, 8} title="vite.config.ts"
35+
import { defineConfig } from "vite";
36+
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
37+
import viteReact from "@vitejs/plugin-react";
38+
import { cloudflare } from "@cloudflare/vite-plugin";
39+
40+
export default defineConfig({
41+
plugins: [
42+
cloudflare({ viteEnvironment: { name: "ssr" } }),
43+
tanstackStart(),
44+
viteReact(),
45+
],
46+
});
47+
```
48+
49+
3. Add your Worker config file
50+
51+
<WranglerConfig>
52+
53+
```toml
54+
name = "my-tanstack-start-app"
55+
compatibility_date = "2025-10-11"
56+
compatibility_flags = ["nodejs_compat"]
57+
main = "@tanstack/react-start/server-entry"
58+
```
59+
60+
</WranglerConfig>
61+
62+
4. Modify the scripts in your `package.json`
63+
64+
```json title="package.json" del={5} ins={6-8}
65+
{
66+
"scripts": {
67+
"dev": "vite dev",
68+
"build": "vite build && tsc --noEmit",
69+
"start": "node .output/server/index.mjs",
70+
"preview": "vite preview",
71+
"deploy": "npm run build && wrangler deploy",
72+
"cf-typegen": "wrangler types"
73+
}
74+
}
75+
```
76+
77+
See the [TanStack Start framework guide](/workers/framework-guides/web-apps/tanstack-start/) for more info.

src/content/docs/workers/vite-plugin/get-started.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { PackageManagers, WranglerConfig } from "~/components";
1010

1111
:::note
1212
This guide demonstrates creating a standalone Worker from scratch.
13-
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.
13+
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.
1414
:::
1515

1616
## Start with a basic `package.json`

src/content/docs/workers/vite-plugin/index.mdx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,21 @@ Your Worker code runs inside [workerd](https://github.com/cloudflare/workerd), m
1414
- Uses the Vite [Environment API](https://vite.dev/guide/api-environment) to integrate Vite with the Workers runtime
1515
- Provides direct access to [Workers runtime APIs](/workers/runtime-apis/) and [bindings](/workers/runtime-apis/bindings/)
1616
- Builds your front-end assets for deployment to Cloudflare, enabling you to build static sites, SPAs, and full-stack applications
17-
- Official support for [React Router v7](https://reactrouter.com/) with server-side rendering
17+
- Official support for [TanStack Start](https://tanstack.com/start/) and [React Router v7](https://reactrouter.com/) with server-side rendering
1818
- Leverages Vite's hot module replacement for consistently fast updates
1919
- Supports `vite preview` for previewing your build output in the Workers runtime prior to deployment
2020

2121
## Use cases
2222

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

2829
## Get started
2930

30-
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.
31+
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.
3132

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

src/content/docs/workers/vite-plugin/reference/vite-environments.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,9 @@ For more information about Vite's configuration options, see [Configuring Vite](
6060

6161
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.
6262

63-
## React Router v7
63+
## Full-stack frameworks
6464

65-
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.
65+
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.
6666
To support this, you should assign it to the `ssr` environment by setting `viteEnvironment.name` in the plugin config.
6767

6868
```ts title="vite.config.ts"

0 commit comments

Comments
 (0)