CD
Cloudflare Developers•2y ago
GoodGoodMan

How can i use d1 locally(for test) on sveltekit?

I use sveltekit on cloudflare(with cloudflare adapter). Recently i fall in love on cloudflare serverless echo system. I want to test my code on dev mode but evnet.platform is always undefined. run script: npx wrangler pages dev --local --d1=DB -- npm run dev result: 
> npx wrangler pages dev --local --d1=DB -- npm run dev

Running npm run dev...
Sleeping 5 seconds to allow proxy process to start before attempting to automatically determine port...
To skip, specify the proxy port with --proxy.
[proxy]:
> vite dev


[proxy]:
  VITE v4.3.9  ready in 602 ms


[proxy]:   ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

[proxy]: {
  cookies: {
    get: [Function: get],
    getAll: [Function: getAll],
    set: [Function: set],
    delete: [Function: delete],
    serialize: [Function: serialize]
  },
  fetch: [AsyncFunction (anonymous)],
  getClientAddress: [Function: getClientAddress],
  locals: {},
  params: {},
  platform: undefined,
}

Automatically determined the proxy port to be 5173.
▲ [WARNING] No compatibility_date was specified. Using today's date: 2023-07-06.

  Pass it in your terminal:
  
> npx wrangler pages dev --local --d1=DB -- npm run dev

Running npm run dev...
Sleeping 5 seconds to allow proxy process to start before attempting to automatically determine port...
To skip, specify the proxy port with --proxy.
[proxy]:
> vite dev


[proxy]:
  VITE v4.3.9  ready in 602 ms


[proxy]:   ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

[proxy]: {
  cookies: {
    get: [Function: get],
    getAll: [Function: getAll],
    set: [Function: set],
    delete: [Function: delete],
    serialize: [Function: serialize]
  },
  fetch: [AsyncFunction (anonymous)],
  getClientAddress: [Function: getClientAddress],
  locals: {},
  params: {},
  platform: undefined,
}

Automatically determined the proxy port to be 5173.
▲ [WARNING] No compatibility_date was specified. Using today's date: 2023-07-06.

  Pass it in your terminal:
--compatibility-date=2023-07-06 
  See https://developers.cloudflare.com/workers/platform/compatibility-dates/ for more information.


No functions. Shimming...
 ⛅️ wrangler 3.1.1
------------------

    - D1 Bindings are currently in alpha to allow the API to evolve before general availability.
      Please report any issues to https://github.com/cloudflare/workers-sdk/issues/new/choose
      Note: Run this command with the environment variable NO_D1_WARNING=true to hide this message

      For example: `export NO_D1_WARNING=true && wrangler <YOUR COMMAND HERE>`


Your worker has access to the following bindings:
- D1 Databases:
  - DB: cozyimg (18898400-dd0c-41ed-a725-9e4ac104ac54)
  - DB: local-DB (DB)
  See https://developers.cloudflare.com/workers/platform/compatibility-dates/ for more information.


No functions. Shimming...
 ⛅️ wrangler 3.1.1
------------------

    - D1 Bindings are currently in alpha to allow the API to evolve before general availability.
      Please report any issues to https://github.com/cloudflare/workers-sdk/issues/new/choose
      Note: Run this command with the environment variable NO_D1_WARNING=true to hide this message

      For example: `export NO_D1_WARNING=true && wrangler <YOUR COMMAND HERE>`


Your worker has access to the following bindings:
- D1 Databases:
  - DB: cozyimg (18898400-dd0c-41ed-a725-9e4ac104ac54)
  - DB: local-DB (DB)
How can i use d1 locally? refer: - https://kit.svelte.dev/docs/adapter-cloudflare#bindings
SvelteKit docs
Cloudflare Pages • SvelteKit documentation
6 Replies
Hello, I’m Allie!
Hello, I’m Allie!•2y ago
At the moment, you have to build SvelteKit before running wrangler
GoodGoodMan
GoodGoodManOP•2y ago
Then, should i use this method? --- 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 wrangler pages dev .svelte-kit/cloudflare --live-reload - this starts the app --- https://stackoverflow.com/questions/74904528/how-to-run-sveltekit-cloudflare-page-locally
Stack Overflow
How to run SvelteKit & Cloudflare Page locally?
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 ...
Trixrabbit
Trixrabbit•2y ago
Sorry for reviving this, but I've been trying for a couple days now to get this working and wrangler live-reload spits errors whenever vite rebuilds... it looks like wrangler reloads too fast and the files are not yet built. Did you experience this ?
divby0
divby0•16mo ago
I've got similar issues, yes. Did you solve them yet? I am so close to just keeping cloudflare pages but no bindings, just http coms to the other cloudflare services because I can have real good DX while locally developing then
Trixrabbit
Trixrabbit•16mo ago
Are you ready for a janky solution 😛 Let me find what I ended up doing I've decided to use nodemon to automate some stuff. These are my commands in package.json. I run both commands in 2 different terminals when doing local dev, first one builds, second one serves. The idea is to make the build + serve steps syncrhonous. To do that I monitor my /src folder for changes and build the app on change.Then I create a dummy file (in this case reload.trigger) when the build is done. Second, I monitor for the dummy file creation then trigger wrangler to serve my pages. Then delete the trigger file. (note I also make sure to kill workerd because of some weird port already in use error than wrangler gets into sometimes) Disclaimer: I haven't worked with this since the date of my post and it is possible wrangler does this better now 
    "build:watch": "nodemon --watch src -e ts,svelte --exec \"vite build; touch reload.trigger\"",
    "wrangler": "nodemon -e trigger --exec \"pkill workerd; rm reload.trigger;export NO_D1_WARNING=true && wrangler pages dev .svelte-kit/cloudflare \"",
    "build:watch": "nodemon --watch src -e ts,svelte --exec \"vite build; touch reload.trigger\"",
    "wrangler": "nodemon -e trigger --exec \"pkill workerd; rm reload.trigger;export NO_D1_WARNING=true && wrangler pages dev .svelte-kit/cloudflare \"",
divby0
divby0•16mo ago
I had something similar as well 🙂 I researched a bunch yesterday and finally figured out how to have the super fast hotreload and still use cf bindings: https://github.com/sveltejs/kit/issues/4292#issuecomment-1732643660. Just if anyone reads this later, this is probably the best solution with near to now drawbacks
GitHub
Platform context fallbacks · Issue #4292 · sveltejs/kit
Describe the problem When developing with svelte-kit dev, the event.platform object is always empty, with no great way to mock it. When building using an adapter like Cloudflare Workers, event.plat...

Did you find this page helpful?