Skip to content

Generate the wrangler.json file automatically from the Hub Cloudflare configuration. #708

@onmax

Description

@onmax

Problem

When self-hosting on Cloudflare, users must manually create and maintain a wrangler.jsonc file alongside nuxt.config.ts. This creates:

  1. Config duplication: features enabled in hub must be matched with bindings in wrangler.jsonc
  2. No build-time validation: if hub.blob: true but R2 binding missing, error only at runtime
  3. Poor DX: no TypeScript support for wrangler config

Proposal

Add hub.cloudflare config option that auto-generates wrangler bindings:

export default defineNuxtConfig({
  compatibilityDate: '2025-01-01',
  
  hub: {
    blob: true,
    kv: true,
    db: 'sqlite',
    cache: true,
    
    cloudflare: {
      name: 'my-worker',
      // D1 database (for hub.db with sqlite)
      database: { databaseId: 'xxx', databaseName: 'my-db' },
      // R2 bucket (for hub.blob)
      blob: { bucketName: 'my-bucket' },
      // KV namespace (for hub.kv)
      kv: { id: 'xxx' },
      // KV namespace (for hub.cache) 
      cache: { id: 'yyy' },
      // Hyperdrive (for hub.db with postgresql/mysql)
      hyperdrive: { id: 'zzz' }
    }
  }
})

Behavior

  1. Build-time only
  2. File takes priority: if wrangler.jsonc/wrangler.toml exists, hub.cloudflare is ignored. We can discuss this.
  3. Validation - error if feature enabled but binding missing:
    ✖ hub.blob is enabled but no blob configured in hub.cloudflare
    
  4. Uses Nitro's wrangler generation - passes config to nitro.cloudflare.wrangler
  5. compatibilityDate - uses nuxt.compatibilityDate automatically
  6. D1 migrations auto-filled

Generated wrangler.json example

Given the config above, the generated wrangler config would be:

{
  "name": "my-worker",
  "compatibility_date": "2025-01-01",
  "compatibility_flags": ["nodejs_compat_v2"],
  "d1_databases": [{ "binding": "DB", "database_id": "xxx", "database_name": "my-db", "migrations_table": "_hub_migrations", "migrations_dir": "server/db/migrations" }],
  "r2_buckets": [{ "binding": "BLOB", "bucket_name": "my-bucket" }],
  "kv_namespaces": [
    { "binding": "KV", "id": "xxx" },
    { "binding": "CACHE", "id": "yyy" }
  ]
}

Implementation notes

  • Feature flags (blob, kv, db, cache) are still required
  • hub.cloudflare only provides Cloudflare-specific binding configuration
  • Binding names are hardcoded to match existing conventions: DB, BLOB, KV, CACHE, POSTGRES...

Let's discuss about this, and let me know what you think. I would love to file a PR!

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions