Connecting to D1 in Cloudflare Pages

[callmetwan]

Hello!

I'm trying to build a Cloudflare Pages app using D1. I'm brand new both to Cloudflare and Hono. I'm trying to understand how to connect to D1. I'm also trying to understand how local development works between Wrangler and Vite.

D1 connection

I see this in the documentation

export default defineConfig({
  plugins: [
    pages(),
    devServer({
      entry: 'src/index.tsx',
      env: getEnv({
        d1Databases: ['DB'],
        d1Persist: true,
      }),
    }),
  ],
})

Where do I put the database ID? Is that supposed to go in a separate wrangler.toml file?

Local development

I understand that Wrangler allows us to do local development of Cloudflare Workers/Pages. I understand that Vite is used to build the forntend. How are they intended to work together? When creating a Hono Cloudflare Pages project I see it creates it with these scripts:

    "dev": "vite",
    "build": "vite build",
    "preview": "wrangler pages dev dist",
    "deploy": "$npm_execpath run build && wrangler pages deploy dist"

Is it intended that both the dev and preview commands are intended to be run simultaneously? If not, how when is it appropriate to use dev vs preview?

Thank you!

[yusukebe]

Hi @callmetwan

Updated the document for handling Bindings: https://hono.dev/getting-started/cloudflare-pages#bindings

In that section, using KV, but you can use D1 with the same way.

[callmetwan]

Wow, thank you for updating the documentation with that information!! You’ve done such great work with this project, I’m so excited to use Hono!