TanStack Start

Ecosystem

Add voidPlugin() next to the TanStack Start Vite plugin to get the SDK's database, storage and deploy features. You don't need a separate Cloudflare adapter.

On this pageSet up the SDK in a TanStack Start project · Use SDK features from server functions · Reach Cloudflare bindings directly when you need them

Setup

Follow these steps in order.

1. Create a new project

Now you will create a new app and open the new app folder.

npm create @tanstack/start@latest my-app
cd my-app

Example output: the scaffolder asks a few questions and creates the app folder.

2. Install dependencies

Now you will install the dependencies.

npm install -D void

Example output: npm finishes with added N packages and no errors.

3. Configure vite.config.ts

import { tanstackStart } from '@tanstack/react-start/plugin';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import { voidPlugin } from 'void';

export default defineConfig({
  plugins: [
    voidPlugin(), // must come before the framework plugin
    tanstackStart(),
    react(),
  ],
});

4. Deploy

Requires: login to your deploy target

void auth login opens your browser to sign in to Cloudflare or your team's platform. No token goes in your project.

Now you will sign in and deploy the app.

void auth login
void deploy

Example output: A browser window opens. The CLI confirms the sign-in when you finish. Build and upload progress, then the live URL.

Use SDK features

Most SDK platform features work with TanStack Start. Use them in server functions:

Framework mode does not support SDK-managed auth yet. Use Better Auth's official TanStack Start integration for now.

Database

import { users } from '@schema';
import { createServerFn } from '@tanstack/react-start';
import { db } from 'void/db';

const getUsers = createServerFn().handler(async () => {
  return db.select().from(users);
});

Other resources

Use KV, object storage and AI in server-side code. The imports are the same as in an SDK app. Add cron jobs in crons/ and queue consumers in queues/.

Environment variables

Declare variables in env.ts. Read them with import { env } from "void/env". See Environment Variables for local values, production secrets and public VITE_* values.

Access bindings directly

You can also read Cloudflare bindings from the cloudflare:workers module:

import { env } from 'cloudflare:workers';

const { results } = await env.DB.prepare('SELECT * FROM users').all();

Next steps

NextReact RouterPreviousOverviewZoneAll Ecosystem pages