ploy vite
Run Cloudflare Vite apps with ploy.yaml-managed config.
ploy vite
Use ploy vite for Cloudflare Vite projects, including React apps that ship a
worker from worker/index.ts and TanStack Start apps that use the Cloudflare
adapter.
Ploy reads ploy.yaml, generates the temporary Wrangler config internally, and
passes it to the Cloudflare Vite toolchain. You do not need to commit
wrangler.json or wrangler.jsonc for these setups.
Commands
ploy vite build [options]
ploy vite dev [options]Options
| Flag | Description | Default |
|---|---|---|
--ploy-config <path> | Path to ploy.yaml | auto-detected |
...args | Additional arguments for Vite | none |
Any extra arguments are forwarded to the underlying Vite command.
When to use it
Use ploy vite when your project has both:
- a Vite config
@cloudflare/vite-plugininstalled
For plain workers, use ploy dev / ploy build. For Next.js, use
ploy dev with @meetploy/nextjs.
React + Worker Example
This setup matches examples/vite-full.
{
"scripts": {
"build": "tsc --noEmit && ploy vite build",
"dev": "ploy vite dev",
"types": "ploy types -o env.d.ts"
}
}kind: dynamic
build: pnpm build
out: dist
compatibility_date: "2026-03-23"
assets:
binding: ASSETS
not_found_handling: single-page-application
run_worker_first:
- /api/*
- "!/api/docs/*"
db:
DB: defaultimport { cloudflare } from "@cloudflare/vite-plugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [react(), cloudflare()],
});For non-TanStack projects, Ploy looks for a worker entry at worker/index.ts
or the corresponding JavaScript/MJS variants.
TanStack Start Example
This setup matches examples/tanstack-start-prerender.
{
"scripts": {
"build": "ploy vite build && tsc --noEmit",
"types": "ploy types -o env.d.ts"
}
}kind: dynamic
build: pnpm build
out: dist
compatibility_date: "2026-03-17"
compatibility_flags:
- nodejs_compatimport { cloudflare } from "@cloudflare/vite-plugin";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
cloudflare({ viteEnvironment: { name: "ssr" } }),
tanstackStart({
prerender: {
enabled: true,
autoSubfolderIndex: true,
crawlLinks: false,
failOnError: true,
},
}),
viteReact(),
],
});When @tanstack/react-start is installed, Ploy automatically maps the
Cloudflare worker entry to @tanstack/react-start/server-entry.
Assets
Use the top-level assets key in ploy.yaml to control static asset behavior
for dynamic Vite deployments.
assets:
binding: ASSETS
not_found_handling: single-page-application
run_worker_first:
- /api/*
- "!/api/docs/*"bindingexposes the asset fetcher to your worker asenv.ASSETSnot_found_handling: single-page-applicationenables SPA fallback behaviorrun_worker_firstlets API routes or other patterns bypass the asset layer
Local Development
pnpm ploy vite devThis starts Cloudflare Vite dev mode with the config synthesized from
ploy.yaml. If your app also uses Ploy bindings like db, generate types with
ploy types first so env.d.ts stays current.
Build
pnpm ploy vite buildThis runs the production Cloudflare Vite build using your ploy.yaml
compatibility settings and asset config.
Notes
- Keep compatibility settings in
ploy.yaml, not inwrangler.json. - Use
assetsfor static file behavior instead of Cloudflare-only config files. - If you need a custom Ploy config path, run
ploy vite build --ploy-config path/to/ploy.yaml. - If you need to pass Vite's own
--config, forward it directly:ploy vite build -- --config vite.config.custom.ts.
How is this guide?
Last updated on