5

I'm trying to create a new app using SvelteKit & Cloudflare Pages and I'm struggling with running the application locally in a proper manner. Currently, in order to get the app running locally I run 2 scripts in 2 different terminals:

  1. vite build --watch
    • this creates the cloudflare directories in the .svelte-kit directory
    • vite dev doesn't seem to create the cloudflare directories so I've used vite build
  2. wrangler pages dev .svelte-kit/cloudflare --live-reload
    • this starts the app

The above approach works, namely, it starts the app as expected. The problem is that any changes I'm making to the code are visible in the browser tab after 3-4 seconds which from a DX point of view is far from enjoying. Ideally, when running locally, any code changes should be visible in the browser tab in 1-sec-ish.

This is the first time I'm tinkering with SvelteKit & Cloudflare Pages so I'm sure I'm missing something. Therefore, the question is: how should one run a SvelteKit & Cloudflare Pages app locally "the right way"? "The right way" means that I can see the effect of my code changes in 1-sec-ish and I can run the app locally using something like wrangler or miniflare in order for the local environment to resemble as much as possible the production one.

P.s.: I've checked docs like https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site/ and https://www.npmjs.com/package/@sveltejs/adapter-cloudflare readme.md but they focus mainly on how to run the app in production
P.p.s: I believe the 2 scripts can be merged into a single one using something like concurrently but at the moment my focus is on having quick feedback when it comes to code changes
P.p.p.s.: bundling and tinkering with the javascript modules themselves is not one of my strong points yet so if you have any helpful articles, they're more than welcome

mccuna
  • 471
  • 7
  • 11
  • 1
    The `vite dev` command doesn't do any bundling, but `vite build` bundles all the code with Rollup, which makes it comparably slow. I sympathize with your wish to make the local environment resemble the production one, but if I understand the Cloudflare pages adapter correctly it "just" compiles the SvelteKit server endpoints into a single `_worker.js` file in production, so if running `vite dev` locally differs from the production environment in functionality it will be a bug in the framework. – Tholle Dec 23 '22 at 23:16

1 Answers1

1

Had the same requirement, and a quick Google which brought me here, didn't help; however, it turns out the solution can be found in the current Cloudflare docs:

https://developers.cloudflare.com/pages/platform/functions/local-development/

In summary, running the following should do the trick:

npx wrangler pages dev -- npm run dev
Chris Wilson
  • 77
  • 1
  • 1
  • 3
    Did this actually make any cloudflare pages functionality work for you locally? Running like this doesn't seem to make `platform.env` available in `+page.server.ts` files as far as I can tell... – SmileyChris Jun 10 '23 at 05:44
  • @SmileyChris is right . I'm also having problems that platform.env is not available. – Dinko Pehar Jul 16 '23 at 11:26
  • @DinkoPehar did you find a solution for this? – eirik Aug 02 '23 at 11:13
  • @eirik This is issue I opened https://github.com/sveltejs/kit/issues/10389 . In short, platform.env is available on Cloudflare, but for local, you can mock it. There is an example in issue linked. In hooks, you just modify the env. – Dinko Pehar Aug 02 '23 at 12:15