Testing Cloudflare Bindings locally

[dinkopehar]

Describe the bug

Hello.

I'm facing a problem which is related to Cloudflare Bindings when using SvelteKit. The documentation on bindings is rather vague.

There is a note at the end stating:

Assuming I'm on right track, wrangler can be used to serve SvelteKit in development locally as:

wrangler pages dev -- npm run dev

It will proxy request to SvelteKit. However, to include the binding, I can use (for example KV):

wrangler pages dev --kv=TODO -- npm run dev

I states :

Your worker has access to the following bindings: KV Namespaces: - TODO: TODO

But the problem raises when I try to access platform.env when it running. It states that platform is undefined.

Reproduction

I've created a simple API endpoint.

In a fresh Sveltekit app, in src/routes add folder /kv. In it, create a +server.js with following code:

import { json } from '@sveltejs/kit';

/** @type {import('./$types').RequestHandler} */
export async function POST({ platform }) {
    console.log(platform)  // This is `undefined`.
    console.log(platform.env.KV_NAME.get("example")) // raises error.
    const { a, b } = {a: 1, b: 2}
    return json(a + b);
}

Logs

[mf:inf] POST /kv 500 Internal Server Error (501ms)
[proxy]: 1:36:49 PM [vite] page reload src/routes/kv/+server.js

[proxy]: undefined

✘ [ERROR] [proxy]: TypeError: Cannot read properties of undefined (reading 'env')

      at POST (/home/raziel/Projects/stanovi/src/routes/kv/+server.js:11:33)
      at Module.render_endpoint
  (/home/raziel/Projects/stanovi/node_modules/@sveltejs/kit/src/runtime/server/endpoint.js:49:24)
      at resolve
  (/home/raziel/Projects/stanovi/node_modules/@sveltejs/kit/src/runtime/server/respond.js:409:45)
      at async Module.respond
  (/home/raziel/Projects/stanovi/node_modules/@sveltejs/kit/src/runtime/server/respond.js:279:20)
      at async
  file:///home/raziel/Projects/stanovi/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:505:22

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 5.08 GB / 7.70 GB
    Container: Yes
    Shell: 3.6.1 - /home/raziel/.nix-profile/bin/fish
  Binaries:
    Node: 18.16.1 - ~/.local/share/pnpm_bin/node
    Yarn: 1.22.19 - ~/.nix-profile/bin/yarn
    npm: 9.5.1 - ~/.local/share/pnpm_bin/npm
    pnpm: 8.6.5 - ~/.nix-profile/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0 
    @sveltejs/adapter-cloudflare: ^2.3.1 => 2.3.1 
    @sveltejs/kit: ^1.20.4 => 1.22.3 
    svelte: ^4.0.5 => 4.0.5 
    vite: ^4.4.2 => 4.4.4

Severity

serious, but I can work around it

Additional Information

I would like to use bindings when testing locally.

Also, Cloudflare Workers has good documentation on how to test using Jest your worker. It also works with bindings. I'm not sure how to use SvelteKit with this unstable_dev API.

[ghostdevv]

Hey, currently it's only possible to use bindings after building. We should probably make that a bit more clear in the docs 🙏

[ghostdevv]

I've created #10390 to clarify in the docs that you can use wrangler to test your local build. For everything else I believe this may be a duplicate of #4292

There is no perfect way to mock platform.env but it's possible for some things like kv, see this example: https://github.com/ghostdevv/short/blob/2d161720df6243c5ce4d107d90272c77fe13c14e/src/hooks.server.ts#L26

[dinkopehar]

@ghostdevv Thank you for explaining it. I had doubts how does it work with bindings.

So I should build sveltekit app locally likenpm run build then use wrangler to expose built app ? The bindings would be available then?

[ghostdevv]

Off the top of my head you can use wrangler pages dev or wrangler dev to test locally - otherwise just publish to pages/workers

[dinkopehar]

@ghostdevv Actually, your solution helped. With @miniflare packages, we can mock this functionality locally and even unit test. Finally, it all makes sense now. I can use SvelteKit app to build full stack app 😸

Thank you 🚀

[gerhardcit]

@ghostdevv Actually, your solution helped. With @miniflare packages, we can mock this functionality locally and even unit test. Finally, it all makes sense now. I can use SvelteKit app to build full stack app 😸

Thank you 🚀

@dinko-pehar , you are talking about Miniflare 2? DurableObjects is not possible to mock in dev mode. I've yet to seen a proper solution.

[dinkopehar]

@ghostdevv Actually, your solution helped. With @miniflare packages, we can mock this functionality locally and even unit test. Finally, it all makes sense now. I can use SvelteKit app to build full stack app 😸

Thank you 🚀

@dinko-pehar , you are talking about Miniflare 2? DurableObjects is not possible to mock in dev mode. I've yet to seen a proper solution.

Hi @gerhardcit
I haven't checked all. For example, KV had a simple API like get or set. So the example above that is linked helped me understand that I can mock this simple API when in dev mode.
For R2, I saw one repository that used R2 through fetch and not through bindings.
At the end, I didn't check all bindings that Cloudflare provides. You can try to mock them when in development or try to use Miniflare packages.

[jahir9991]

wrangler pages dev .svelte-kit/cloudflare --local --d1=local_db
vite build -w
These two commands worked for me when I run both parallelly

[Cikmo]

wrangler pages dev .svelte-kit/cloudflare --local --d1=local_db vite build -w These two commands worked for me when I run both parallelly

Do you know if anything has changed with this? When vite rebuilds the app, wrangler doesn't seem to detect it and reload. I have to stop the server and start it up again.

[mostrecent]

FWIW, CF intro'd Hyperdrive which let you connect your DB (currently only Postgres), e.g. Neon, without all the comm overhead, e.g. so no TCP handshake (1x), TLS negotiation (3x), and database authentication (3x).

However and before I try to migrate my stuff, I wonder how the local dev story would be. I would need to setup a dev db at Neon (easy), connect it through Hyperdrive (should be easy) and use that remotely via a binding through local wrangler and SvelteKit (doubt that's easy and/or straight-forward). Wondering if I should enter this rabbit-hole...

[manuelernestog]

wrangler pages dev .svelte-kit/cloudflare --local --d1=local_db vite build -w These two commands worked for me when I run both parallelly

Do you know if anything has changed with this? When vite rebuilds the app, wrangler doesn't seem to detect it and reload. I have to stop the server and start it up again.

Had the same problem here. Did you find any way to asset this ? I looked in the documentation but there doesn't seem to be anything for that.