DEV Community: Natalia

Notes on Configuring TanStack Start for Cloudflare Workers

Natalia — Thu, 04 Jun 2026 08:11:55 +0000

I like frameworks that make the boring parts stay boring.

For an AI image website like Flux 2, the frontend is only one slice of the work. There are landing pages, account flows, uploads, generation history, admin screens, and a lot of small server-side decisions around performance and reliability. That is why TanStack Start on Cloudflare Workers is interesting: Vite-based development, full-stack routing, server functions, static assets, and an edge runtime can all fit into one deployment story.

The part I care about most is not the headline feature list. It is the config.

If the config is clear, the team knows what gets deployed, where it runs, and which runtime assumptions the app is making. If the config is messy, every release feels a little suspicious.

This is the short version of how I would approach a TanStack Start + Cloudflare setup.

Start with the Cloudflare target in mind

TanStack Start can run on different hosting targets, but Cloudflare Workers has a specific shape. The official Cloudflare TanStack Start guide shows two useful paths:

create a new app already configured for Cloudflare
adapt an existing TanStack Start app by adding Wrangler and the Cloudflare Vite plugin

For a new project, I would rather start with the Cloudflare path than retrofit it later:

pnpm create cloudflare@latest my-app --framework=tanstack-start

For an existing project, the main idea is simple: TanStack Start still uses Vite, but the Cloudflare plugin needs to participate in the server-side build.

The Vite config is the first file I check

The Vite config tells me whether the project is actually being built for the runtime I expect.

A Cloudflare-oriented setup usually looks like this:

import { cloudflare } from "@cloudflare/vite-plugin";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    cloudflare({ viteEnvironment: { name: "ssr" } }),
    tanstackStart(),
    react(),
  ],
});

The important part is not memorizing every line. The important part is that the SSR environment is intentionally wired through Cloudflare. That keeps the server side of the app close to the Worker runtime instead of accidentally drifting toward a generic Node.js assumption.

That matters when the app grows. Server functions, route loaders, auth checks, media metadata, and dashboard requests are all easier to reason about when the runtime is explicit.

Wrangler config should be small at first

The next file I look at is wrangler.jsonc.

I prefer starting small:

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "example-tanstack-start",
  "compatibility_date": "2026-06-04",
  "compatibility_flags": ["nodejs_compat"],
  "main": "@tanstack/react-start/server-entry",
  "observability": {
    "enabled": true
  }
}

This does a few useful things.

main points Wrangler at the TanStack Start server entry. compatibility_date makes the Workers runtime version explicit. nodejs_compat gives the app a more practical compatibility baseline for packages that expect some Node APIs. observability makes the first round of debugging less blind.

I do not like stuffing this file with every future binding on day one. The config should grow when the product needs it.

Add scripts that explain the workflow

The package.json scripts should make the common path obvious:

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "pnpm build && wrangler deploy",
    "cf-typegen": "wrangler types"
  }
}

I like this because it separates concerns:

dev is for local development
build proves the app can compile
preview lets me inspect the built result
deploy keeps the build step attached to release
cf-typegen keeps Worker bindings typed

The last one is easy to skip, but it is useful once bindings enter the project. A typed env is much better than guessing whether a binding name is available in a server function.

Treat bindings as product decisions

For a real AI image product, Cloudflare bindings can become important quickly.

You might use R2 for generated media, D1 for lightweight relational data, KV for low-risk cache data, Queues for background jobs, or a service binding for splitting a larger backend into smaller Workers.

But I try not to add bindings just because the platform supports them. I add them when a workflow needs a clear ownership boundary.

For example, an upload or generated asset flow may justify an R2 binding. A scheduled cleanup job may justify a custom entrypoint. A separate auth or billing service may justify a service binding. The config should tell that story plainly.

Inside TanStack Start server code, Cloudflare bindings are accessed through the Worker environment. That is a good fit for server functions because browser code does not need to know about storage buckets, queues, or internal services.

Be careful with prerendering

TanStack Start can prerender routes, and Cloudflare can serve static assets efficiently. That is useful for pages that do not depend on per-user state.

I would consider prerendering for:

marketing pages
documentation-style pages
static comparison pages
content that changes on a predictable schedule

I would not use it blindly for account pages, generation history, payment status, or anything that depends on a signed-in user.

The trap is not prerendering itself. The trap is forgetting when data is read. Build-time data and request-time data are different. Once that distinction is clear, prerendering becomes a useful tool instead of a source of confusing stale pages.

Keep environments boring

I want staging and production to be boringly explicit.

That usually means separate Worker names and routes, with the same general structure:

{
  "env": {
    "staging": {
      "name": "example-tanstack-start-staging"
    },
    "production": {
      "name": "example-tanstack-start-production"
    }
  }
}

Then commands become hard to misread:

pnpm build
wrangler deploy --env staging --dry-run
wrangler deploy --env staging
wrangler tail --env staging

wrangler deploy --env production --dry-run
wrangler deploy --env production
wrangler tail --env production

The tail step is not glamorous, but it is one of the fastest ways to notice obvious runtime mistakes after a release.

The config is part of the product

For a TanStack Start app on Cloudflare, I think of configuration as product infrastructure, not boilerplate.

The Vite config says how the app is built. The Wrangler config says how it runs. The scripts say how developers interact with it. Bindings say which Cloudflare resources the app depends on. Environment sections say where a release is going.

That is why I prefer a small, readable setup over a clever one.

For an AI image website, the product can be complex enough already. The deployment path should be easy to inspect: TanStack Start for the app shape, Cloudflare Workers for the runtime, Wrangler for the release workflow, and only the bindings the product actually needs.

Why AI Image Generation Should Be Async

Natalia — Fri, 29 May 2026 04:33:18 +0000

AI image generation can look like a simple request-response feature.

A user enters a prompt, clicks generate, and waits for an image.

For a prototype, that can work. For a production product, it usually becomes fragile.

Image generation may take several seconds or minutes. A provider may return a job ID first and the final result later. Some results arrive through webhooks. Others need polling. Requests can fail, time out, or finish after the user has already left the page.

That is why AI image generation is usually better designed as an asynchronous workflow.

This is the approach I use while building Image 2, a multi-model AI image generation and editing platform.

The Simple Version

The most direct implementation looks like this:

User -> API route -> AI provider -> result -> user

This is easy to understand, but it has several problems:

the HTTP request may time out
retries can create duplicate jobs
the frontend depends on provider latency
billing or credit logic becomes harder to protect
generated media may live on temporary provider URLs
failures are difficult to repair after the request ends

This pattern is fine for demos. It is not ideal once real users, payments, storage, and retries are involved.

A Better Shape

A more reliable version separates the user request from the generation work:

User request
  |
  v
Create generation record
  |
  v
Push message to queue
  |
  v
Background worker submits job
  |
  v
Webhook or polling gets result
  |
  v
Store asset and update status

The user-facing request returns quickly after creating the task. The UI can then show a status such as queued, processing, completed, or failed.

The slow work happens in the background.

Why Async Helps

Async generation gives the system more room to recover.

If the provider is slow, the task can remain in processing.

If the provider fails, the system can mark the task as failed and roll back credits.

If a webhook is missed, a scheduled job can poll the provider later.

If both a webhook and a polling job see the same final result, the system can ignore duplicate settlement.

That last point matters. In production, the same generation result may be observed more than once. Final states such as completed and failed should be idempotent.

A Small State Model

You do not need a complicated state machine to start. A simple model is often enough:

created -> queued -> processing -> completed
                         |
                         -> failed

Each state should mean something clear:

created: the request was accepted
queued: background work has been scheduled
processing: the provider job has started
completed: the final asset is available
failed: the task cannot complete

The important rule is that terminal states should be protected. Once a task is completed or failed, retries and duplicate callbacks should not apply the same result again.

Store the Result Yourself

Many AI providers return a URL for the generated image. That URL may be temporary or provider-controlled.

For a real product, it is often safer to copy the result into your own storage:

Provider result URL -> app storage -> stable asset URL

On Cloudflare, that might mean storing the final image in R2 and serving it from your own CDN domain.

This makes future product behavior easier:

user ownership checks
downloads
cleanup
moderation
stable previews
billing history

The AI provider creates the image. Your application should own the product workflow around that image.

Where Multi-Model Apps Get More Complex

Async workflows become even more useful when an app supports more than one model or generation style.

A text-to-image model, an image editing model, and a reference-image workflow may all behave differently. Some may return results quickly. Others may need a provider-side job ID. Some may support high-resolution output. Some may have different input limits.

A product like Image 2 can expose those workflows through a simpler user interface while keeping provider-specific details in the backend. For example, separate pages such as the GPT Images 2.0 image generator or the Nano Banana 2 AI image generator can still share the same general task lifecycle.

That is the main benefit of designing around the workflow instead of designing around one provider API.

Final Thought

AI image generation is not just a model call. It is a product workflow.

For experiments, a synchronous API route is enough. For production, async architecture gives you a cleaner way to handle slow jobs, duplicate callbacks, retries, storage, moderation, and credit accounting.

The model creates the image. The workflow makes the product reliable.