diff --git a/src/content/docs/workers/framework-guides/web-apps/tanstack-start.mdx b/src/content/docs/workers/framework-guides/web-apps/tanstack-start.mdx index 1b1ef1b19006692..16c625e7c51957c 100644 --- a/src/content/docs/workers/framework-guides/web-apps/tanstack-start.mdx +++ b/src/content/docs/workers/framework-guides/web-apps/tanstack-start.mdx @@ -14,11 +14,17 @@ import { InlineBadge, Render, PackageManagers, + Steps, + WranglerConfig, } from "~/components"; -In this guide, you will create a new [TanStack Start](https://tanstack.com/start) application and deploy it to Cloudflare Workers. +[TanStack Start](https://tanstack.com/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 new project +## 1. Set up a TanStack Start project + +If you have an existing TanStack Start application, skip to the [Configuring an existing TanStack Start application](#configuring-an-existing-tanstack-start-application) section. + +### Creating a new TanStack Start application Use the [`create-cloudflare`](https://www.npmjs.com/package/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. @@ -36,6 +42,57 @@ After setting up your project, change your directory by running the following co 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: + + ```toml + 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: + + + +3. Install the `@cloudflare/vite-plugin` package as a dependency: + + + +4. Update your `vite.config.ts` file to include the Cloudflare Vite plugin: + + ```ts title="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: + + ```jsonc title="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.