Document how to use `adapter-cloudflare` with `svelte-kit dev`

[jaymakes11]

Describe the problem

I can't figure out how to use svelte-kit dev and https://github.com/cloudflare/wrangler2 together while developing locally. This is necessary for sites that utilize Cloudflare's KV store and durable objects.

Is this currently possible?

Describe the proposed solution

If this is currently possible, let's get it documented.

Alternatives considered

I've tried this:

 npx wrangler@beta pages dev .svelte-kit/cloudflare/ --port 3131 -- npx svelte-kit dev --port 3131

The problem with this is that file changes do not update what's being served, nor do they update in the browser. Sveltekit (via Vite) is serving things from memory (as I understand it), but wrangler (beta) is serving the built site that lives in .svelte-kit/cloudflare/.

Importance

i cannot use SvelteKit without it

Additional Information

Note: Earlier I created a discussion on this and I've also reached out in the Discord. There's been no response to either. Hence the reason I'm creating this issue for it. Without this ability, I'm blocked on using Sveltekit.

[mehmetcansahin]

ssr doesn't work for the same reason.

[jaymakes11]

I'm curious if anyone is currently using the adapter-cloudflare with any type of local development setup that's working for them. I'm not worried if requires any type of hack, just something that works for now until this is officially supported/documented.

@lukeed Could you comment on whether or not there's any way (that you know of) for this to currently work? (i.e. is any type of local development setup possible with adapter-cloudflare?)

[lukeed]

Use svelte-kit on its own for local development. If you need to make use of bindings (eg, KV), then setup miniflare and connect it to the .svelte-kit/cloudflare/_worker.js output file.

wrangler2 is in heavy beta development & currently has a very closed/limited configuration window. Wrangler (1.x) could be used for wrangler dev but would also need a type=javascript and custom build setup so that it watches the same .svelte-kit/cloudflare/_worker.js file for reload. You'd be running npm run dev and wrangler dev at the same time... awkward & not worth the effort IMO. Miniflare is the better investment.

[jaymakes11]

Thanks for the quick and helpful reply, @lukeed.

If you need to make use of bindings (eg, KV), then setup miniflare and connect it to the .svelte-kit/cloudflare/_worker.js output file.

Yes, this is the issue (my project requires KV, DO, etc). It's not clear to me how your suggestion here would work, however, since svelte-kit dev (via Vite) serves everything from memory (as I understand things), rather than building statically on each file change (to .svelte-kit/). How would miniflare pick up file changes from src/* files?

It would be super helpful if you could share any example code (or point to any repositories) that use miniflare with a Sveltekit project using adapter-cloudflare.

[jaymakes11]

Also, it seems that miniflare only supports Workers Sites (i.e. it does not support Cloudflare Pages).

For Cloudflare Pages projects, the miniflare developer is directing people to Wrangler v2.

[lukeed]

It ended up being straightforward with wrangler@beta (wrangler2). There's a proxy-command mode that I wasn't aware of. Here's the necessary changes: lukeed/pages-fullstack@ebdee7e

[jaymakes11]

It ended up being straightforward with wrangler@beta (wrangler2). There's a proxy-command mode that I wasn't aware of. Here's the necessary changes: lukeed/pages-fullstack@ebdee7e

Hmm... I'm seeing that this approach only serves the output of the built site (i.e. the result of running svelte-kit build), not the content of src/*. So when making a change to a file, the change is not updated in the browser. Am I missing something obvious here?

[lukeed]

Thanks for the callout. I added a miniflare-based local server here: lukeed/pages-fullstack@6e53dce

It runs svelte-kit build when any src/** file changes. This means it's definitely nowhere near as fast as npm run dev for development, but it still works & reflects source changes. Personally, I'd continue using npm run dev for raw development speed & then drop into npm run watch whenever I want to check for Workers-runtime compatibility, guaranteed by Miniflare.

[jaymakes11]

@lukeed thanks for the miniflare-based local server. It's a helpful step in the right direction, however, it's unclear to me how to use KV with it.

From this section of the Adapter Cloudflare docs, it seems that platform.env should be available in Svelte hooks and endpoints, however I'm seeing that it's always undefined. That section of the README states that this is only available in production builds. It's unclear to me if it should be available via the miniflare-based local server approach. I've tried testing production builds, as well, but it's still undefined.

A full-stack example that uses KV with a workable local development setup would be super helpful.

[harlantwood]

I'm seeing the same behavior -- actually platform is undefined in development, never mind platform.env.

The best idea I've seen for local dev on a sveltekit project that uses KV is (far from ideally) swapping out with Redis when in local dev; sample code here: https://stackoverflow.com/a/69067406/1533892

[vhscom]

I ended up creating a watch command as @lukeed mentioned earlier but as @jaymakes11 pointed out it's not suitable for development purposes, and I don't believe it's working for integration testing either as I am hitting this issue:

From this section of the Adapter Cloudflare docs, it seems that platform.env should be available in Svelte hooks and endpoints, however I'm seeing that it's always undefined.

I expected platform.env to be populated with at least something using wrangler2 with the following wrangler.toml contents:

[env.dev]
vars = { API_HOST_URI = "https://domain.example", ENDPOINT_PATH = "/path/to/endpoint" }

But the platform.env does not include the environment variables API_HOST_URI nor ENDPOINT_PATH when I run:

wrangler pages dev --env dev .svelte-kit/cloudflare -- pnpm run dev

Has anyone gotten this working? If so, could you please share a link to a working example? Thanks!

[NaNorNull]

I was able to get the local KV working with pages functions. Here is a hacky example that syncs the Cloudflare Pages Function KV to the local dev KV. It looks like the local values are stored in .mf directory in the root of the project.

https://github.com/NaNorNull/Cloudflare-Pages-Functions-With-KV-and-SvelteKit

npx wrangler@beta pages dev .svelte-kit\cloudflare\ -k kvName