Skip to content

Update tanstack guide to use C3 #25583

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dario-piotrowicz merged 9 commits into from
Oct 23, 2025
Merged

Update tanstack guide to use C3 #25583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9add6f8
Update tanstack guide to use C3
dario-piotrowicz Oct 2, 2025
c2b11be
Apply suggestions from code review
dario-piotrowicz Oct 22, 2025
2740d9f
rename tanstack guide and add redirect
dario-piotrowicz Oct 22, 2025
57dea83
update title
dario-piotrowicz Oct 22, 2025
94fa9c4
update deployment section
dario-piotrowicz Oct 22, 2025
571ec21
fix incorrect __redirects change
dario-piotrowicz Oct 22, 2025
2b555ec
Apply suggestion from @jamesopstad
dario-piotrowicz Oct 22, 2025
b7fa6d8
Apply suggestion from @jamesopstad
dario-piotrowicz Oct 22, 2025
79b8b43
Apply suggestions from code review
maxvp Oct 22, 2025
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
1 change: 1 addition & 0 deletions public/__redirects
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1969,6 +1969,7 @@
/workers/frameworks/framework-guides/nuxt/ /workers/framework-guides/web-apps/more-web-frameworks/nuxt/ 301
/workers/frameworks/framework-guides/qwik/ /workers/framework-guides/web-apps/more-web-frameworks/qwik/ 301
/workers/frameworks/framework-guides/solid/ /workers/framework-guides/web-apps/more-web-frameworks/solid/ 301
/workers/framework-guides/web-apps/tanstack/ /workers/framework-guides/web-apps/tanstack-start/ 301

/workers/testing/unit-testing/ /workers/testing/vitest-integration/write-your-first-test/ 301
/workers/testing/integration-testing/ /workers/testing/ 301
Expand Down
38 changes: 14 additions & 24 deletions ...rs/framework-guides/web-apps/tanstack.mdx → ...mework-guides/web-apps/tanstack-start.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
pcx_content_type: how-to
title: TanStack
title: TanStack Start
sidebar:
order: 7
head: []
tags: ["full-stack"]
description: Create a TanStack Start application and deploy it to Cloudflare Workers with Workers Assets.
description: Create a TanStack Start application and deploy it to Cloudflare Workers.
---

import {
Expand All @@ -16,28 +16,26 @@ import {
PackageManagers,
} from "~/components";

In this guide, you will create a new [TanStack Start](https://tanstack.com/start) application and deploy it to Cloudflare Workers (with the new [Workers Assets](/workers/static-assets/)).
In this guide, you will create a new [TanStack Start](https://tanstack.com/start) application and deploy it to Cloudflare Workers.

## 1. Set up a new project

Start by cloning the Cloudflare example from the official TanStack repository.
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.

To use `create-cloudflare` to create a new TanStack Start project with Workers Assets, run the following command:

<PackageManagers
type="dlx"
pkg="gitpick"
args="TanStack/router/tree/main/examples/react/start-basic-cloudflare my-tanstack-app"
type="create"
pkg="cloudflare@latest"
args="my-tanstack-start-app --framework=tanstack-start"
/>

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

```sh
cd my-tanstack-app
cd my-tanstack-start-app
```

And install the project's dependencies with:

<PackageManagers type="install" />

## 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.
Expand All @@ -46,21 +44,15 @@ After you have created your project, run the following command in the project di

## 3. Deploy your Project

Your project can be deployed to a `*.workers.dev` subdomain or a [Custom Domain](/workers/configuration/routing/custom-domains/), from your own machine or from any CI/CD system, including [Cloudflare's own](/workers/ci-cd/builds/).

To deploy your application you will first need to build it:
You can deploy your project to a `*.workers.dev` subdomain or a [Custom Domain](/workers/configuration/routing/custom-domains/) from your own machine or from any CI/CD system, including Cloudflare's own [Workers Builds](/workers/ci-cd/builds/).

<PackageManagers type="run" args="build" />
The following command will build and deploy your project. If you are using CI, ensure you update your [**Deploy command**](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately.

Once it's been built you can deploy it via:

<PackageManagers type="run" args="deploy" />

If you're using CI, ensure you update your ["deploy command"](/workers/ci-cd/builds/configuration/#build-settings) configuration appropriately.
<PackageManagers type="run" args={"deploy"} />

:::note

After having built the application you can run the `preview` script to preview the built output locally before deploying it.
Before deploying your application, you can also run the `preview` script to preview the built output locally before deploying it.
This can help you making sure that your application will work as intended once it's been deployed to the Cloudflare network:

<PackageManagers type="run" args="preview" />
Expand Down Expand Up @@ -97,8 +89,6 @@ function RouteComponent() {
}
```

See `src/routes/index.tsx` for an example.

:::note

Running the `cf-typegen` script:
Expand Down
Loading