Merge config from multiple nitro layers

[serhii-chernenko]

Current implementation doesn't support a case when all wrangler.jsonc files have to be collected from each layer in nuxt.options._layers and merged to one.
https://github.com/nitrojs/nitro-cloudflare-dev/blob/main/src/index.ts#L29

E.g. I have DDD architecture with Nuxt Layers in a monorepo:

• apps/app
• layers/cms
• layers/ecommerce

I want to have different bindings per each layer

• layers/core/wrangler.jsonc // KV_CORE
• layers/cms/wrangler.jsonc // D1_DB_CMS
• layers/ecommerce/wrangler.jsonc D1_DB_ECOMMERCE

But in current implementation I have to store all bindings definitely at apps/app/wrangler.jsonc that breaks the idea of the architecture.

---

Another potential option that could be even better.
I'd like to have something like in nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nitro-cloudflare-dev'],
  nitro: {
    preset: 'cloudflare-pages',
    cloudflareDev: {
      wrangler: {
       bindings: {
        kv_namespaces: [],
        d1_databases: [],
        // other bindings
       }
      }
    }
  },
})

It will allow to put this info per each layer like
layers/cms/nuxt.config.ts:

// nitro -> cloudflareDev -> wrangler -> bindings
d1_databases: [{
 binding: 'D1_DB_CMS',
 database_name: 'cms',
 database_id: process.env.D1_DB_CMS_ID,
 // migrations_dir: '' // this field has to be auto-generated during merging to put the migrations dir in the end application apps/app
}]

layers/ecommerce/nuxt.config.ts:

// nitro -> cloudflareDev -> wrangler -> bindings
d1_databases: [{
 binding: 'D1_DB_ECOMMERCE',
 database_name: 'ecommerce',
 database_id: process.env.D1_DB_ECOMMERCE_ID,
 // migrations_dir: '' // this field has to be auto-generated during merging to put the migrations dir in the end application apps/app
}]

As a result, all values have to be merged to the result apps/app/wrangler.jsonc file.

[serhii-chernenko]

Not sure also to whom address the issue, but npx wrangler types doesn't support worker-configuration.d.ts merging from Nuxt layers. maybe it has to be included somehow from the layers perspective here.

[pi0]

You can leverage new deployConfig feature to achieve this using main nitro/nuxt config for production deployments:

export default defineNitroConfig({
  cloudflare: {
    deployConfig: true,
    nodeCompat: true,
    wrangler: {
      d1_databases: []
    },
  }
});

export default defineNuxtConfig({
  nitro: {
    cloudflare: {
      deployConfig: true,
      nodeCompat: true,
      wrangler: {
        d1_databases: []
      },
    }
  }
});

[serhii-chernenko]

@pi0 interesting. I tried to check types in the repo but maybe missed it. I'll try and give feedback later. Thank you!

[serhii-chernenko]

hi @pi0. Sorry, for long answer, it was a busy week. It works as you said, thank you for sharing!

I want to integrate D1 database and use together with Drizzle ORM. But I’m still completely stuck due to issues with Nuxt layers in the monorepo.

I had to prepare a repo for you:
https://github.com/serhii-chernenko/nuxt-layers-cloudflare

Please check README.md where you can test all the issues I mentioned here:

• Issue 1: ERROR D1_ERROR: no such table: items: SQLITE_ERROR
• Issue 2: [ERROR] TypeError: Cannot read properties of undefined (reading 'env')

Preview URL
https://nuxt-layers-cloudflare.pages.dev/

[serhii-chernenko]

@pi0 I found that I have the same issues even with single Nuxt application. Actually, I'm not even sure that it's related to Nitro at all. But I have no idea how to make it working:
https://github.com/serhii-chernenko/falling-hall-643e

[serhii-chernenko]

Created a topic in Cloudflare Community as well:
https://community.cloudflare.com/t/cloudflare-d1-database-is-not-found-in-env-that-breaks-integrations/781902

[serhii-chernenko]

hi @pi0, I already have updates.

• Related repo: https://github.com/serhii-chernenko/falling-hall-643e
• PR: fix(drizzle): db env issues fixed for local and prod envs serhii-chernenko/falling-hall-643e#1
• URL to preview: https://falling-hall-643e.pages.dev

The main issue is in destination of auto-generated wrangler.json file that available only in:

dist/_worker.js/wrangler.json

It could be automatically found for the commands like

npx wrangler pages dev
npx wrangler pages deploy

But it could NOT be found for the command:

npx wrangler d1 migrations apply falling-hall-643e

There are no errors, but also there are no any actions as well.

To fix it, I have to specify wrangler.json file path:

npx wrangler d1 migrations apply falling-hall-643e -c dist/_worker.js/wrangler.json

But as you can see on the screen, it generates the state to

./dist/_worker.js/.wrangler/state/v3/d1

instead of

.wrangler/state/v3/d1

So, to make it working, I have to manually move it to the root dir

rm -rf .wrangler/state
mv dist/_worker.js/.wrangler/state .wrangler

I also tried to set the state path via persistDir

// nuxt.config.ts
nitro: {
  cloudflareDev: {
    configPath: 'dist/_worker.js/wrangler.json',
    persistDir: 'dist/_worker.js/.wrangler/state/v3', // this one
  },
},

But it's not the option, because the dist directory is recreated every time and I lose my state.
At least, I already know the nature of the recent issues.

I'd recommend a solution for nitro in general:
Allow to specify wrangler.json path where it has to be generated. Not where it's located for cloudflareDev in the current repository of nitro-cloudflare-dev but for general Nitro repo:
https://github.com/nitrojs/nitro.

Something like:

nitro: {
  preset: 'cloudflare-pages',
  cloudflare: {
    deployConfigPath: 'wrangler.json'
  }
}

Because currently it depends on serverDir:
https://github.com/nitrojs/nitro/blob/v3/src/presets/cloudflare/utils.ts#L253C1-L254C71

const wranglerConfigDir = nitro.options.output.serverDir;
const wranglerConfigPath = join(wranglerConfigDir, "wrangler.json");

That's a reason why I created this PR:
nitrojs/nitro#3245

It allows to specify a nitro root dir as a directory where the wrangler.json file has to be located. It avoids usage of custom option -c dist/_worker.js/wrangler.json for commands npx wrangler.
And, it solves the issue of saving state in the right root directory that won't be wiped every time on build.

When the PR will be merged to Nitro, this issue could be closed.

[serhii-chernenko]

@pi0 Another strange thing I forgot to mention is event.context.cloudflare.env object that is missed when I run npx wrangler pages dev or npx wrangler pages deploy.

Docs reference:
https://nitro.build/deploy/providers/cloudflare#direct-access-to-cloudflare-bindings

That's a reason why I used

const db = (globalThis as any).__env__.DB_ITEMS as D1Database

https://github.com/serhii-chernenko/falling-hall-643e/pull/1/files#diff-9f354a75cba61b0375be47e89bf3f6f12824c8efc1f5e88b3916e639d86d0d91R10
Because it works as expected in all cases but it's not completely intuitive.

Let's put some console logs:

console.log('process.env.DB_ITEMS', process.env.DB_ITEMS)
console.log('globalThis.__env__.DB_ITEMS', (globalThis as any).__env__.DB_ITEMS)
console.log('event.context.cloudflare.env.DB_ITEMS', event.context.cloudflare.env.DB_ITEMS)

Run npm run dev (equals to nuxt dev).
Output:

process.env.DB_ITEMS undefined
globalThis.__env__.DB_ITEMS ProxyStub { name: 'D1Database', poisoned: false }
event.context.cloudflare.env.DB_ITEMS ProxyStub { name: 'D1Database', poisoned: false }

Run npm run preview (equals to nuxt build && npx wrangler pages dev).
Output:

process.env.DB_ITEMS D1Database {
  alwaysPrimarySession: D1DatabaseSessionAlwaysPrimary {
    fetcher: Fetcher {},
    bookmarkOrConstraint: 'first-primary'
  },
  fetcher: Fetcher {}
}
globalThis.__env__.DB_ITEMS D1Database {
  alwaysPrimarySession: D1DatabaseSessionAlwaysPrimary {
    fetcher: Fetcher {},
    bookmarkOrConstraint: 'first-primary'
  },
  fetcher: Fetcher {}
}
ERROR] TypeError: Cannot read properties of undefined (reading 'env')

It means that the cloudflare object is undefined

event.context.cloudflare undefined

Run npm run deploy (equals to nuxt build && npx wrangler pages deploy).
The run the debugging:
https://developers.cloudflare.com/pages/functions/debugging-and-logging/

npx wrangler pages deployment tail ec5baae4-a955-4e16-b289-276d4a83eeb2

Output:

(log) process.env.DB_ITEMS [object Object]
(log) globalThis.__env__.DB_ITEMS [object Object]
(log) event.context.cloudflare null

For unknown reason it's just lost when npx wrangler pages used. But it has to be fixed to provide the same flow for local and deployed environments without the kludge:

(globalThis as any).__env__

[pi0]

Thanks for all the context and followups.

Moving from nitrojs/nitro#3245 (comment), could you try ln -s dist/_worker.js/wrangler.json wrangler.json as workaround?

If you happen to be able to make a nitro only repo (ideally also without drizzle just simple access) it would be easier to work on all these.

[serhii-chernenko]

@pi0 symlink is a good idea. I'll try it.
Regarding complexity, I'm building my product and I need this complex architecture for it with Nuxt 3 layers in monorepo. That's why I met such issues. Probably it wasn't supposed to happen if I use only a single Nuxt/Nitro based app. My work is currently unblocked and maybe I collect new issues as well when proceed.
This is a fine line between Nuxt, Nitro, and Cloudflare Workers SDK, where to mentioned related issues.
I'll try to prepare a new only Nitro repo when I have time and describe all the issues I meet later.

[serhii-chernenko]

Additional idea to improve DX:
I'm using Drizzle ORM and the drizzle.config.ts file is stored per each layer. The migrations' directory is stored in the same layer app .drizzle. In such cases, I have to create a new d1 binding but with a reference to the same database id.
I'd suggest another option is allowing a few migrations directories for the same binding. I know, it's more wrangler's stuff, but also has to be supported by the nitro.cloudflare.wrangler interface.

Example

Layers

Core/languages layer

// src/layers/core/languages/admin/nuxt.config.ts
nitro: {
  cloudflare: {
    wrangler: {
      d1_databases: [
        {
          binding: 'DB_CORE_LANGUAGES_BINDING',
          database_id: process.env.DB_ID ?? '__SET_IN_ENV__DB_ID__',
          preview_database_id: process.env.DB_ID_PREVIEW ?? '__SET_IN_ENV__DB_ID_PREVIEW__',
          migrations_dir: resolve('.drizzle/migrations/core/languages'),
        },
      ],
    },
  },
},

// src/layers/core/languages/admin/drizzle.config.ts
import { defineConfig } from 'drizzle-kit'

export default defineConfig({
  dialect: 'sqlite',
  schema: './server/db/schema/languages.ts',
  out: '.drizzle/migrations/core/languages',
})

CMS/pages layer

// src/layers/cms/pages/admin/nuxt.config.ts
nitro: {
  cloudflare: {
    wrangler: {
      d1_databases: [
        {
          binding: 'DB_CMS_PAGES_BINDING',
          database_id: process.env.DB_ID ?? '__SET_IN_ENV__DB_ID__',
          preview_database_id: process.env.DB_ID_PREVIEW ?? '__SET_IN_ENV__DB_ID_PREVIEW__',
          migrations_dir: resolve('.drizzle/migrations/cms/pages'),
        },
      ],
    },
  },
},

// src/layers/cms/pages/admin/drizzle.config.ts
import { defineConfig } from 'drizzle-kit'

export default defineConfig({
  dialect: 'sqlite',
  schema: './server/db/schema/pages.ts',
  out: '.drizzle/migrations/cms/pages',
})

Merge

// src/apps/app/wrangler.jsonc
{
  "d1_databases": [
    {
      "binding": "DB_CORE_LANGUAGES",
      "database_id": "__SET_IN_ENV__DB_ID__",
      "preview_database_id": "__SET_IN_ENV__DB_ID_PREVIEW__'",
      "migrations_dir": "/project-root/src/layers/core/languages/shared/.drizzle/migrations/core/languages"
    },
    {
      "binding": "DB_CMS_PAGES_BINDING",
      "database_id": "__SET_IN_ENV__DB_ID__",
      "preview_database_id": "__SET_IN_ENV__DB_ID_PREVIEW__'",
      "migrations_dir": "/project-root/src/layers/cms/pages/shared/.drizzle/migrations/cms/pages"
    },
  ],
}

Explanation

As you can see, I'm referencing to the same DB id DB_ID from the .env file. But I have to create different bindings for the same DB because wrangler.json doesn't support a few definitions with the same binding name.

Suggestion

I recently created a new issue where I mentioned that it'd be nice to filter duplicated bindings:
nitrojs/nitro#3316

But now I'm thinking, what if we can have the ability to merge them if the database_id and preview_database_id are the same. The only difference is having migrations_dir as an array, not a string, like

// src/layers/core/languages/admin/nuxt.config.ts
nitro: {
  cloudflare: {
    wrangler: {
      d1_databases: [
        {
          binding: 'DB',
          database_id: process.env.DB_ID ?? '__SET_IN_ENV__DB_ID__',
          preview_database_id: process.env.DB_ID_PREVIEW ?? '__SET_IN_ENV__DB_ID_PREVIEW__',
          migrations_dir: resolve('.drizzle/migrations/core/languages'),
        },
      ],
    },
  },
},

// src/layers/cms/pages/admin/nuxt.config.ts
nitro: {
  cloudflare: {
    wrangler: {
      d1_databases: [
        {
          binding: 'DB',
          database_id: process.env.DB_ID ?? '__SET_IN_ENV__DB_ID__',
          preview_database_id: process.env.DB_ID_PREVIEW ?? '__SET_IN_ENV__DB_ID_PREVIEW__',
          migrations_dir: resolve('.drizzle/migrations/cms/pages'),
        },
      ],
    },
  },
},

Expected output:

// src/apps/app/wrangler.jsonc
{
  "d1_databases": [
    {
      "binding": "DB_CORE_LANGUAGES",
      "database_id": "__SET_IN_ENV__DB_ID__",
      "preview_database_id": "__SET_IN_ENV__DB_ID_PREVIEW__'",
      "migrations_dir": [
         "/project-root/src/layers/core/languages/shared/.drizzle/migrations/core/languages",
         "/project-root/src/layers/cms/pages/shared/.drizzle/migrations/cms/pages"
      ]
    },
  ],
}

It allows applying migrations from different layers in the strict order as layers are imported in the end application to avoid issues of missed tables and can improve and simplify DX.