Skip to content

Commit be4cdcf

Browse files
theoephraimclaude
andcommitted
docs: add SvelteKit integration page and Cloudflare Workers Builds setup
- Add a new SvelteKit integration page. For most adapters it routes users to the Vite integration; for Cloudflare Workers it documents `varlockSvelteKitCloudflarePlugin` setup and the Workers Builds dashboard configuration (overriding the Deploy command, setting secret-zero vars in Build variables). - Register the new page in the sidebar and the integrations overview. - Add a small callout on the Cloudflare integration page pointing SvelteKit users to the SvelteKit guide instead of the two existing approaches. - Add a Cloudflare Workers Builds (CI/CD) section to the Cloudflare integration page with the same dashboard-configuration guidance. - Clarify on the Vite integration page that projects with SSR/server code on Cloudflare Workers should use the Cloudflare integration (not the plain Vite plugin) so secrets aren't bundled into the worker. - Update the package README to list the SvelteKit variant. - Drop the "new" badge on the Bun entry; add one on SvelteKit. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 39a1254 commit be4cdcf

File tree

6 files changed

+121
-2
lines changed

6 files changed

+121
-2
lines changed

packages/integrations/cloudflare/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ This package helps you integrate [varlock](https://varlock.dev) into a [Cloudfla
55
It provides:
66

77
- a Vite plugin (`varlockCloudflareVitePlugin`) that wraps `@cloudflare/vite-plugin` with automatic env var injection into miniflare bindings and Cloudflare's secret bindings at runtime
8+
- a SvelteKit-specific Vite plugin (`varlockSvelteKitCloudflarePlugin` at `@varlock/cloudflare-integration/sveltekit`) for projects deploying via `@sveltejs/adapter-cloudflare`
89
- a `varlock-wrangler` CLI binary — a drop-in replacement for `wrangler` that injects env via named pipe in dev, uploads vars/secrets on deploy, and generates correct types
910
- a standalone init module (`@varlock/cloudflare-integration/init`) for non-Vite workers
1011
- validation of your env vars against your `.env.schema`

packages/varlock-website/astro.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,10 +163,11 @@ export default defineConfig({
163163
items: [
164164
{ label: 'Overview', slug: 'integrations/overview' },
165165
{ label: 'JavaScript / Node.js', slug: 'integrations/javascript' },
166-
{ label: 'Bun', slug: 'integrations/bun', badge: 'new' },
166+
{ label: 'Bun', slug: 'integrations/bun' },
167167
{ label: 'Next.js', slug: 'integrations/nextjs' },
168168
{ label: 'Vite-based', slug: 'integrations/vite' },
169169
{ label: 'Astro', slug: 'integrations/astro' },
170+
{ label: 'SvelteKit', slug: 'integrations/sveltekit', badge: 'new' },
170171
{ label: 'Expo / React Native', slug: 'integrations/expo', badge: 'new' },
171172
{ label: 'Other languages', slug: 'integrations/other-languages' },
172173
{ label: 'Cloudflare Workers', slug: 'integrations/cloudflare', badge: 'new' },

packages/varlock-website/src/content/docs/integrations/cloudflare.mdx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ Both approaches below use `varlock-wrangler` — a thin wrapper around `wrangler
2020
1. **Using `varlock-wrangler`** - A thin wrapper for `wrangler` that injects env vars correctly, along with a one-line init import in your worker
2121
2. **With the Vite plugin** - If you're already using the [Cloudflare Workers Vite plugin](https://developers.cloudflare.com/workers/vite-plugin/), you can add the varlock Cloudflare Vite plugin to automatically inject env vars and init code
2222

23+
:::note[SvelteKit on Cloudflare]
24+
Deploying SvelteKit via `@sveltejs/adapter-cloudflare`? See the [SvelteKit guide](/integrations/sveltekit/#sveltekit-on-cloudflare-workers) — it uses a dedicated `varlockSvelteKitCloudflarePlugin` instead of the approaches below.
25+
:::
26+
2327
## Approach 1: Using `varlock-wrangler`
2428

2529
Replace your `wrangler` commands with `varlock-wrangler` and initialize varlock in your worker code with a single import. It's a thin wrapper that wires up your env vars correctly, and passes everything else through unchanged.
@@ -232,3 +236,29 @@ APP_ENV=remap($WORKERS_CI_BRANCH, "main", production, /.*/, preview, undefined,
232236
```
233237

234238
For more information, see the [environments guide](/guides/environments).
239+
240+
----
241+
242+
## Cloudflare Workers Builds (CI/CD)
243+
244+
If you deploy via [Cloudflare Workers Builds](https://developers.cloudflare.com/workers/ci-cd/builds/), two pieces of setup are required in the dashboard — neither can be configured from a file in the repo:
245+
246+
<Steps>
247+
248+
1. **Override the Deploy command**
249+
250+
Under **Settings → Build → Deploy command**, replace the default `npx wrangler deploy` with:
251+
252+
```sh
253+
npx varlock-wrangler deploy
254+
```
255+
256+
Without this override, Cloudflare runs stock `wrangler deploy`, which skips varlock's env resolution and leaves your worker without its resolved vars/secrets at runtime.
257+
258+
1. **Set any _secret-zero_ vars under Build variables**
259+
260+
Any env vars that varlock itself needs _during load_ — for example a 1Password service account token, a GCP key — must be set under **Settings → Build → Variables and Secrets**. These are made available to the build step, where `varlock-wrangler deploy` resolves your full env graph and uploads the result to the worker runtime as regular vars/secrets.
261+
262+
Vars that only your worker needs at runtime (not varlock itself) don't need to be set here — they'll be resolved by varlock and set automatically by `varlock-wrangler deploy`.
263+
264+
</Steps>

packages/varlock-website/src/content/docs/integrations/overview.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ Integrations allow you to:
1919
- [React Router](/integrations/vite/) — use the Vite integration
2020
- [Cloudflare Workers](/integrations/cloudflare/) — use the Vite integration or Wrangler vars/secrets directly
2121
- [Astro](/integrations/astro/) — Astro integration built on top of our Vite plugin
22+
- [SvelteKit](/integrations/sveltekit/) — use the Vite integration, or the Cloudflare integration's SvelteKit plugin when deploying to Workers
2223
- [Expo / React Native](/integrations/expo/) — Babel plugin + Metro config wrapper with compile-time replacements and server route support
2324
- [GitHub Actions](/integrations/github-action/) — validate your `.env.schema` in GitHub Actions workflows
2425
- [Other languages](/integrations/other-languages/) — guidance for piping varlock output into non-JS runtimes
Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: SvelteKit
3+
description: How to integrate varlock with SvelteKit for secure, type-safe environment management
4+
---
5+
import { Steps } from "@astrojs/starlight/components";
6+
import Badge from '@/components/Badge.astro';
7+
import ExecCommandWidget from '@/components/ExecCommandWidget.astro';
8+
import InstallJsDepsWidget from '@/components/InstallJsDepsWidget.astro';
9+
10+
[SvelteKit](https://svelte.dev/docs/kit) is built on [Vite](https://vite.dev), so there's no dedicated SvelteKit package — which integration you use depends on where you deploy.
11+
12+
- **Node / Vercel / Netlify / self-hosted / most adapters** — use the [Vite integration](/integrations/vite/) as-is. Add `varlockVitePlugin()` before `sveltekit()` in your `vite.config.ts` and you're done.
13+
- **Cloudflare Workers (via `@sveltejs/adapter-cloudflare`)** — use the `varlockSvelteKitCloudflarePlugin` from `@varlock/cloudflare-integration`. See [setup below](#sveltekit-on-cloudflare-workers).
14+
15+
---
16+
17+
## SvelteKit on Cloudflare Workers
18+
19+
<div class="page-badges">
20+
<Badge npmPackage="@varlock/cloudflare-integration" />
21+
</div>
22+
23+
For SvelteKit projects deploying to Cloudflare Workers via [`@sveltejs/adapter-cloudflare`](https://svelte.dev/docs/kit/adapter-cloudflare), use `varlockSvelteKitCloudflarePlugin`. It does **not** wrap `@cloudflare/vite-plugin` — SvelteKit doesn't currently work with that plugin ([cloudflare/workers-sdk#8922](https://github.com/cloudflare/workers-sdk/issues/8922)). Instead, it injects varlock's runtime env-loader directly into SvelteKit's SSR entry so the resolved env is available at runtime inside the worker.
24+
25+
### Setup
26+
27+
<Steps>
28+
29+
1. **Install packages**
30+
<InstallJsDepsWidget packages="@varlock/cloudflare-integration varlock" />
31+
32+
1. **Run `varlock init` to set up your `.env.schema` file**
33+
34+
<ExecCommandWidget command="varlock init" showBinary={false} />
35+
36+
1. **Add the plugin to your Vite config**
37+
38+
```diff lang="ts" title="vite.config.ts"
39+
import { sveltekit } from '@sveltejs/kit/vite';
40+
import { defineConfig } from 'vite';
41+
+import { varlockSvelteKitCloudflarePlugin } from '@varlock/cloudflare-integration/sveltekit';
42+
43+
export default defineConfig({
44+
plugins: [
45+
+ varlockSvelteKitCloudflarePlugin(),
46+
sveltekit(),
47+
],
48+
});
49+
```
50+
51+
1. **Update your deploy script to use `varlock-wrangler`**
52+
53+
```diff lang="json" title="package.json" add="varlock-"
54+
{
55+
"scripts": {
56+
"dev": "vite dev",
57+
"build": "vite build",
58+
"deploy": "npm run build && varlock-wrangler deploy"
59+
}
60+
}
61+
```
62+
63+
</Steps>
64+
65+
### How it works
66+
67+
- **In dev**: `vite dev` runs SvelteKit's dev server; varlock resolves env via its normal flow and makes it available on `ENV.*`.
68+
- **In production**: The SvelteKit SSR bundle has a `cloudflare:workers` runtime loader injected at the top of its server entry. At worker boot, it reads the `__VARLOCK_ENV` binding and hydrates varlock's runtime. The loader is guarded by a `navigator.userAgent === 'Cloudflare-Workers'` check so SvelteKit's Node-side postbuild steps (prerender, fallback) don't try to resolve `cloudflare:workers`.
69+
- `varlock-wrangler deploy` uploads non-sensitive values as Cloudflare vars and sensitive values as secrets.
70+
71+
### Deploying via Cloudflare Workers Builds
72+
73+
If you deploy through [Cloudflare Workers Builds](https://developers.cloudflare.com/workers/ci-cd/builds/), two pieces of configuration must be set in the dashboard — neither can be committed to the repo:
74+
75+
- **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.
76+
- **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.
77+
78+
See the [Cloudflare integration page](/integrations/cloudflare/) for more detail on `varlock-wrangler`, multi-environment setup, and [Workers Builds configuration](/integrations/cloudflare/#cloudflare-workers-builds-cicd).

packages/varlock-website/src/content/docs/integrations/vite.mdx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,17 @@ This plugin does a few things:
2424
For [Astro](https://astro.build) - which is also powered by Vite - you should use our [Astro integration](/integrations/astro/).
2525
::::
2626

27+
:::note[SvelteKit users]
28+
For [SvelteKit](https://svelte.dev/docs/kit), the plain Vite integration below works for most adapters. If you're deploying to Cloudflare Workers via `@sveltejs/adapter-cloudflare`, see our [SvelteKit guide](/integrations/sveltekit/) — it points you at the Cloudflare-specific plugin.
29+
::::
30+
31+
:::caution[Deploying a non-static site to Cloudflare Workers?]
32+
If your project has an SSR/server component that runs on Cloudflare Workers, the plain Vite integration won't wire up runtime secrets correctly — secrets would end up bundled into the worker instead of being stored as Cloudflare secrets. Use the [Cloudflare integration](/integrations/cloudflare/) (or the [SvelteKit guide](/integrations/sveltekit/) for SvelteKit) instead. This page is fine for **static-only** Vite sites.
33+
:::
34+
2735
## Frameworks that use Vite ||frameworks||
2836

29-
If you're using [Qwik](https://qwik.dev/) or [React Router](https://reactrouter.com/)/[Remix](https://remix.run/), you can follow the Vite instructions below. If you're using [Cloudflare Workers](https://developers.cloudflare.com/workers/) with the [Cloudflare Vite plugin](https://developers.cloudflare.com/workers/vite-plugin/) then these instructions also apply. For anything framework-specific on Cloudflare Workers (like Next.js) follow the [integration](/integrations/overview) docs for that framework.
37+
If you're using [Qwik](https://qwik.dev/) or [React Router](https://reactrouter.com/)/[Remix](https://remix.run/), you can follow the Vite instructions below. If you're using [Cloudflare Workers](https://developers.cloudflare.com/workers/) with the [Cloudflare Vite plugin](https://developers.cloudflare.com/workers/vite-plugin/), use the [Cloudflare integration](/integrations/cloudflare/) instead of this page. For anything framework-specific on Cloudflare Workers (like Next.js) follow the [integration](/integrations/overview) docs for that framework.
3038

3139
## Setup
3240

0 commit comments

Comments
 (0)