TanStack Start

TanStack Start is a full-stack React framework built on Vite, so there’s no dedicated TanStack Start package — which integration you use depends on where you deploy.

• Node / Vercel / Netlify / self-hosted — use the Vite integration. See setup below.
• Cloudflare Workers — use the Cloudflare integration. See Cloudflare setup below.

Check out the TanStack Start example project for a working reference.

---

Setup (vite integration)

For any deployment target other than Cloudflare Workers, use varlockVitePlugin from the Vite integration.

1. Install packages

   npm

   npm install @varlock/vite-integration varlock

   pnpm

   pnpm add @varlock/vite-integration varlock

   bun

   bun add @varlock/vite-integration varlock

   yarn

   yarn add @varlock/vite-integration varlock

   vlt

   vlt install @varlock/vite-integration varlock

2. Run varlock init to set up your .env.schema

   This will guide you through setting up your .env.schema file, based on your existing .env file(s). Make sure to review it carefully.

   npm

   npm exec -- varlock init

   pnpm

   pnpm exec -- varlock init

   bun

   bun exec varlock init

   vlt

   vlx -- varlock init

   yarn

   yarn exec -- varlock init

3. Add the plugin to your Vite config

   app.config.ts

   import { defineConfig } from '@tanstack/react-start/config';
   import { tanstackStart } from '@tanstack/react-start/plugin/vite'
   import { varlockVitePlugin } from '@varlock/vite-integration';
   
   export default defineConfig({
     vite: {
       plugins: [
         varlockVitePlugin(),
         tanstackStart(),
   
       ],
     },
   });

Next steps

See the Vite integration page for configuration options, SSR injection modes, accessing env vars, managing environments, sensitive values, and more.

---

Setup for Cloudflare Workers

If you’re deploying your TanStack Start app to Cloudflare Workers, use varlockCloudflareVitePlugin from the Cloudflare integration instead.

1. Install packages

   You must also install @cloudflare/vite-plugin as a peer dependency.

   npm

   npm install @varlock/cloudflare-integration @cloudflare/vite-plugin varlock

   pnpm

   pnpm add @varlock/cloudflare-integration @cloudflare/vite-plugin varlock

   bun

   bun add @varlock/cloudflare-integration @cloudflare/vite-plugin varlock

   yarn

   yarn add @varlock/cloudflare-integration @cloudflare/vite-plugin varlock

   vlt

   vlt install @varlock/cloudflare-integration @cloudflare/vite-plugin varlock

2. Run varlock init to set up your .env.schema

   npm

   npm exec -- varlock init

   pnpm

   pnpm exec -- varlock init

   bun

   bun exec varlock init

   vlt

   vlx -- varlock init

   yarn

   yarn exec -- varlock init

3. Add the Cloudflare Vite plugin

   app.config.ts

   import { defineConfig } from '@tanstack/react-start/config';
   import { tanstackStart } from '@tanstack/react-start/plugin/vite'
   import { varlockCloudflareVitePlugin } from '@varlock/cloudflare-integration';
   
   export default defineConfig({
     vite: {
       plugins: [
         varlockCloudflareVitePlugin(),
         tanstackStart(),
         // ...
       ],
     },
   });

4. Deploy with varlock-wrangler

   Use varlock-wrangler deploy instead of wrangler deploy in your deploy script:

   package.json

   {
     "scripts": {
       "deploy": "varlock-wrangler deploy"
     }
   }

   If you deploy via Cloudflare Workers Builds instead of a local/CI script, override the deploy command in your Cloudflare dashboard under Settings → Build → Deploy command — see Workers Builds below.

Next steps

See the Cloudflare integration page for more on varlock-wrangler, multi-environment setup, and deploying secrets.

Deploying via Cloudflare Workers Builds

If you deploy through Cloudflare Workers Builds, two pieces of configuration must be set in the dashboard — neither can be committed to the repo:

• Override the Deploy command — Under Settings → Build → Deploy command, replace the default npx wrangler deploy with npx varlock-wrangler deploy. Without this, Cloudflare runs stock wrangler deploy, which skips varlock resolution and leaves your worker without its resolved vars/secrets.
• Set any secret-zero vars under Build variables — Any env vars varlock itself needs during load (e.g. a 1Password service account token, a GCP key) must be set under Settings → Build → Variables and Secrets so they’re available at build time. varlock-wrangler deploy then resolves your full env graph and uploads the result to the worker runtime as regular vars/secrets.

See the Cloudflare integration page for more detail on varlock-wrangler and Workers Builds configuration.

---

Compared to TanStack Start’s built-in env var handling

TanStack Start inherits Vite’s env var approach: process.env on the server and import.meta.env on the client, with only VITE_-prefixed vars exposed client-side. Their docs recommend maintaining a manual src/env.d.ts for TypeScript support and separate Zod schemas for runtime validation.

With varlock, your .env.schema is the single source of truth — it handles validation, type coercion, TypeScript generation, sensitivity controls, and more, replacing the need for separate type declarations, Zod schemas, and the VITE_ prefix convention. You also get leak detection (sensitive values are automatically scrubbed from outgoing HTTP responses) and clear error messages when env vars are missing or invalid — no more silent undefined values at runtime. See the Vite integration page for the full details.