Deploy to Cloudflare Workers

The native Cloudflare integration is the most complete deployment target. It runs App Router server code in workerd and supports Workers bindings directly in your application.

1. Configure the project

pnpm dlx vinext init --platform=cloudflare

The initializer creates or updates vite.config.ts and wrangler.jsonc, then lets you choose caching and image optimization. Commit these generated config files.

To try the typed Cloudflare configuration and cf CLI instead of Wrangler, opt in during initialization:

npx vinext init --platform=cloudflare --experimental-cf

This creates cloudflare.config.ts, pins the experimental Cloudflare Vite plugin and cf, and generates scripts for cf build, local Vite preview, and vinext-cloudflare deploy. Response Store service-binding mode declares its second Worker in the typed config and builds both Workers together. Existing Wrangler configuration is not migrated automatically; move its bindings into the typed config before enabling this option. Create any KV namespace or R2 bucket named in the initializer's next steps before deploying.

For TypeScript projects, add .cloudflare/types to the include list in tsconfig.json. The plugin generates binding and runtime declarations there during development and builds; these files stay gitignored. Run cf workers types to generate them before a standalone type-check without building the app.

2. Authenticate

pnpm dlx wrangler login

Add your Cloudflare account ID to wrangler.jsonc, or set CLOUDFLARE_ACCOUNT_ID. In CI, use a CLOUDFLARE_API_TOKEN instead of browser login.

If you opted into --experimental-cf, run cf auth login instead. Set your account ID in cloudflare.config.ts or via CLOUDFLARE_ACCOUNT_ID; no Wrangler CLI or config file is needed for this path.

3. Deploy

pnpm dlx @vinext/cloudflare deploy
pnpm dlx @vinext/cloudflare deploy --env staging

The deploy command validates the initialized setup, builds all Vite environments, and deploys the Worker. Use --preview for the preview environment.

To prefill configured caches before promoting a new Worker version, see Cache warming.

Use Workers bindings

Import env from cloudflare:workers in Server Components, Route Handlers, and Server Actions. Configure each binding in wrangler.jsonc, or in cloudflare.config.ts when using --experimental-cf.

import { env } from "cloudflare:workers";

export default async function Page() {
  const posts = await env.DB.prepare("SELECT * FROM posts").all();
  return <pre>{JSON.stringify(posts.results)}</pre>;
}

See Cloudflare's bindings documentation for product-specific configuration, and the Workers Vite plugin documentation for the underlying development environment.