Cloudflare Developers•15mo ago

Is there a way to connect to D1 locally in, say, a Nuxt.js app in dev mode?

I tried running wrangler pages dev --proxy [nuxt dev server port] -- pnpm dev but the context.cloudflare and process.env.[DB_BINDING] don't seem to exist when I try to access them in defineEventHandler(). I read the documentation but I'm still not clear on how exactly to approach this. Any guidance or examples would be appreciated. My wrangler.toml has [[d1_databases]] and everything and I'm logged in.

18 Replies

SylphritzOP•15mo ago

I can see that NODE_EXTRA_CA_CERTS is populated in process.env when running the dev server through wrangler pages dev proxy but that's it.

Hello, I’m Allie!•15mo ago

Atm, the only way to develop with bindings is to build your Nuxt project, then run wrangler pages dev on it.

SylphritzOP•15mo ago

Ah, I see. Thank you for answering

Jure•15mo ago

I'm using this command: npx wrangler pages dev --local --persist-to=./db.sqlite --d1=DB -- npm run dev

Hello, I’m Allie!•15mo ago

Wouldn't that persist all of wrangler's data to a directory called db.sqlite?

Jure•15mo ago

It would... isn't that what you want for local development?

Hello, I’m Allie!•15mo ago

It already persists to .wrangler/state, so you don't need to redefine it. Also, pages dev is always local, so you don't need the flag. But the biggest issue is that unless you build the project first(or use a binding proxy), then the dev process won't have access to any bindings.

Jure•15mo ago

True, it already persists in the .wrangler/ dir but with "random" path to the db.sqlite. For me is convenient to have manually defined path since I'm using Drizzle Studio https://orm.drizzle.team/drizzle-studio/overview - to be able to define path to DB file in the drizzle.config.ts and then browse the DB with simple command npx drizzle-kit studio.

Meet Drizzle Studio - DrizzleORM

Drizzle ORM | %s

Jure•15mo ago

But the biggest issue is that unless you build the project first(or use a binding proxy), then the dev process won't have access to any bindings.

I'm not sure if I understand you correctly... since I'm also a newbie to D1 and the whole development process... but when I run pages dev --d1=DB -- npm run dev I have access to D1 binding --d1=DB and can use local DB over the defined binding.

SylphritzOP•15mo ago

I see. I'll try a bit more then. If I'm out of options, then I'll just run a local sqlite server and have it conditionally switch to D1 in production.

Hello, I’m Allie!•15mo ago

I don't remember the exact path, but if you use --persist-to=./db.sqlite, then your D1 DB might be persisted to /db.sqlite/d1/8132787182.sqlite So db.sqlite is a directory, within which the D1 sqlite file is still randomly named So --persist-to changes where all of wrangler's data for this project is stored, not just the D1 sqlite file

SylphritzOP•15mo ago

Yeah, okay. Nuxt in dev mode doesn't seem to want to recognize the cloudflare context but it works just fine in production. I'll just stick to simple sqlite in local then.

Jure•15mo ago

@sylphritz do you mind asking you how do you apply migrations on production D1? From local CLI and wrangler command npx wrangler d1 migrations apply {dbname}? I'm trying to apply migrations in the CF Pages "deploy script" like npm run build && npx wrangler d1 migrations apply {dbname} so migrations would be executed right after deployment / pushing code.

SylphritzOP•15mo ago

Sorry, I don't really know. I'm still very new to D1 so I've only been messing around and do everything manually.

bllchmbrs•14mo ago

Quick question, are you trying to use a cloudflare binding to access things, and that's what doesn't work locally? I am trying to do the same thing and pulling my hair out doing so. Here's my situation. I think this should be simple. Situation I have a vanilla nuxt app. I want my server routes to have access to KV. I run: npx wrangler pages dev --kv=LINK_STORE -- npm run dev Doesn't work, cloudflare context doesn't show up: Cannot read properties of undefined (reading 'env') I deploy it. Endpoint works fine. How do I get the local version running correctly Do I run npm run build and then npx wrangler pages dev dist --kv=LINK_STORE For some reason, that doesn't startup nuxt / the site. Could someone tell me what I'm doing wrong? Basically how do I get wrangler to ACTUALLY make worker context (e.g., R2, KV) available to nuxt locally.

SylphritzOP•14mo ago

Yeah, there's no way to make it work while running a dev server. You could try building the project with NITRO_PRESET=cloudflare flag and then run it via Wrangler. For R2, you can just connect to it using AWS S3 SDK. It's much easier I wish there was a way to connect to all Cloudflare services directly using some sort of access key like R2 instead of this roundabout way through Wrangler. It's super annoying 😦

bllchmbrs•14mo ago

It's at least a little odd. It just ends up as deployment by prayer and it feels strange. One workaround I'm thinking of is that I can develop workers in one place then copy and paste the files into server and test on the staging branch but I'm not sure.

nicgene•14mo ago

I'm able to use D1 locally with the cloudflare_module preset. https://nitro.unjs.io/deploy/providers/cloudflare#cloudflare-module-workers Using it with Nuxt 3 on Workers in a server route and am able to use D1 like the example:

const { cloudflare } = event.context
const stmt = await cloudflare.env.D1.prepare('SELECT id FROM table')
const { results } = await stmt.all()

const { cloudflare } = event.context
const stmt = await cloudflare.env.D1.prepare('SELECT id FROM table')
const { results } = await stmt.all()

Not able to get nuxt dev with reload/HMR working. wrangler dev will only build for production.

Gaming

Programming

Is there a way to connect to D1 locally in, say, a Nuxt.js app in dev mode?