TanStackStart

The TanStackStart component lets you deploy a TanStack Start app to Cloudflare.

Note

Create a Cloudflare-compatible app with bunx @tanstack/cli@latest create --deployment cloudflare.

Minimal example

Deploy the TanStack Start app that’s in the project root.

sst.config.ts

new sst.cloudflare.TanStackStart("MyWeb");

Change the path

Deploys the TanStack Start app in the my-app/ directory.

sst.config.ts

new sst.cloudflare.TanStackStart("MyWeb", {
  path: "my-app/"
});

Add a custom domain

Set a custom domain for your TanStack Start app.

sst.config.ts

new sst.cloudflare.TanStackStart("MyWeb", {
  domain: "my-app.com"
});

Link resources

Link resources to your TanStack Start app. This will grant permissions to the resources and allow you to access it in your app.

sst.config.ts

const bucket = new sst.cloudflare.Bucket("MyBucket");

new sst.cloudflare.TanStackStart("MyWeb", {
  link: [bucket]
});

Add this to your vite.config.ts for SST to work correctly.

vite.config.ts

import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { cloudflare } from '@cloudflare/vite-plugin'

export default defineConfig({
  plugins: [
    cloudflare({
      viteEnvironment: { name: 'ssr' },
      configPath: process.env.SST_WRANGLER_PATH,
    }),
    tanstackStart(),
  ],
})

Use sst/resource for linked resources.

src/routes/api.ts

import { Resource } from "sst/resource";

const files = await Resource.MyBucket.list();

---

Constructor

new TanStackStart(name, args?, opts?)

Parameters

• name string

• args? TanStackStartArgs

• opts? ComponentResourceOptions

TanStackStartArgs

buildCommand?

Type Input<string>

Default “npm run build”

The command used internally to build your TanStack Start app.

If you want to use a different build command.

{
  buildCommand: "yarn build"
}

dev?

Type false | Object

• autostart?

• command?

• directory?

• title?

• url?

Configure how this component works in sst dev.

Note

In sst dev your TanStack Start app is run in dev mode; it’s not deployed.

Instead of deploying your TanStack Start app, this starts it in dev mode. It’s run as a separate process in the sst dev multiplexer. Read more about sst dev.

To disable dev mode, pass in false.

dev.autostart?

Type Input<boolean>

Default true

Configure if you want to automatically start this when sst dev starts. You can still start it manually later.

dev.command?

Type Input<string>

Default “npm run dev”

The command that sst dev runs to start this in dev mode.

dev.directory?

Type Input<string>

Default Uses the path

Change the directory from where the command is run.

dev.title?

Type Input<string>

The title of the tab in the multiplexer.

dev.url?

Type Input<string>

Default “http://url-unavailable-in-dev.mode”

The url when this is running in dev mode.

Since this component is not deployed in sst dev, there is no real URL. But if you are using this component’s url or linking to this component’s url, it can be useful to have a placeholder URL. It avoids having to handle it being undefined.

domain?

Type Input<string>

Set a custom domain for your TanStack Start app.

{
  domain: "my-app.com"
}

environment?

Type Input<Record<string, Input<string>>>

Set environment variables in your TanStack Start app. These are made available:

1. In vite build, they are loaded into the build.
2. At runtime as Worker bindings.
3. Locally while running vite dev through sst dev.

Tip

You can also link resources to your TanStack Start app and access them in a type-safe way with the SDK. We recommend linking since it’s more secure.

{
  environment: {
    API_URL: api.url,
    PUBLIC_STRIPE_PUBLISHABLE_KEY: "pk_test_123"
  }
}

You can access the environment variables in your TanStack Start app as follows:

import { env } from "cloudflare:workers";

const apiUrl = env.API_URL;

link?

Type Input<any[]>

Link resources to your TanStack Start app. This will:

1. Grant the permissions needed to access the resources.
2. Allow you to access it in your app using the SDK.

Takes a list of resources to link to the app.

{
  link: [bucket, stripeKey]
}

You can access the linked resources in your TanStack Start app.

import { Resource } from "sst";

console.log(Resource.MyBucket.name);

path?

Type string

Default ”.”

Path to the directory where your TanStack Start app is located. This path is relative to your sst.config.ts.

By default it assumes your TanStack Start app is in the root of your SST app.

If your TanStack Start app is in a package in your monorepo.

{
  path: "packages/web"
}

transform?

Type Object

• server?

Transform how this component creates its underlying resources.

transform.server?

Type WorkerArgs | (args: WorkerArgs, opts: ComponentResourceOptions, name: string) => void

Transform the Worker component used for handling the server-side rendering.

Properties

nodes

Type Object

• server

The underlying resources this component creates.

nodes.server

Type undefined | Worker

The Cloudflare Worker that renders the site.

url

Type Output<undefined | string>

The URL of the TanStack Start app.

If the domain is set, this is the URL with the custom domain. Otherwise, it’s the auto-generated Worker URL.

SDK

Use the SDK in your runtime to interact with your infrastructure.

---

Links

This is accessible through the Resource object in the SDK.

• url undefined | string

  The URL of the TanStack Start app.

  If the domain is set, this is the URL with the custom domain. Otherwise, it’s the auto-generated Worker URL.