[@hono/vite-dev-server] feature request: Support wrangler.toml

[Code-Hex]

Thank you for developing such an incredible toolset and web framework!

I am considering switching from Wrangler to Vite + dev-Server. However, since my wrangler.toml file already contains numerous environment variables and bindings, I thought it would be beneficial if these could be automatically reflected in @hono/vite-dev-server.

Items I would like to be automatically loaded:

• kv_namespaces
• vars
• durable_objects.bindings
• queues.producers
• queues.consumers
• d1_databases

Btw, Wrangler seems to be using @iarna/toml to read toml file.

[cloudkite]

BTW not sure if you are already aware but this should now be much easier to implement as there’s a new getBindingsProxy function in Miniflare https://github.com/cloudflare/workers-sdk/pull/4523 so could be a great opportunity to simplify and remove a lot of code

[Code-Hex]

Wow, I wanted this one!

[stereosteve]

What's best way to do d1 migrations when using the vite setup?

With wrangler you would do: wrangler d1 execute my-db --local --file=./schema.sql.

In the binding docs it says miniflare will create db at .mf/d1/DB/db.sqlite... but in reality the location changes everytime you delete the .mf directory:

.mf
└── d1
    └── miniflare-D1DatabaseObject
        └── e7352547963de7050bd7d94658afc4fe78b61811b7815da12d90be8e863abf4d.sqlite

Is there a way to have a command like npm run dev:migrate that will create the tables?

[stereosteve]

Ah ok, if there is no prior state, it'll create a random d1 object.

But if you create .mf/d1/DB/db.sqlite ahead of time, it will use that instead:

mkdir -p .mf/d1/DB
sqlite3 .mf/d1/DB/db.sqlite < schema.sql

Altho it does move this initial db into a random location when you start server... so after that you either rm -rf .mf or locate file: sqlite3 $(find .mf -name '*.sqlite')

[KaiSpencer]

Hi folks,

Just for clarity, you can make use of wrangler.toml configuration using the getBindingsProxy. And you can implement it like this

Note: the configPath argument shown is the default, so you can use this is the wrangler.toml is in a different location.

export default defineConfig(async () => {
  const { env, dispose } = await getPlatformProxy({ configPath: './wrangler.toml' })

  return {
    plugins: [
      devServer({
        plugins: [
          { onServerClose: dispose, env },
        ],
      }),
    ],
  }
})

[Code-Hex]

@yusukebe Hello, I tried this but I'm getting errors around durable objects. I'm investigating now...

import devServer from '@hono/vite-dev-server';
import { defineConfig } from 'vite';
import { getPlatformProxy } from 'wrangler';

export default defineConfig(async () => {
  const { env, dispose } = await getPlatformProxy();
  return {
    plugins: [
      devServer({
        env,
        plugins: [
          {
            onServerClose: dispose,
          },
        ],
      }),
    ],
  };
});

Error:

service core:user:__WRANGLER_EXTERNAL_DURABLE_OBJECTS_WORKER: Worker "core:user:__WRANGLER_EXTERNAL_DURABLE_OBJECTS_WORKER"'s binding "ChatAutoCompletionSocket" refers to a service "core:user:worker", but no such service is defined.
failed to load config from /Users/codehex/go/src/github.com/notahotel/cf-workers/projects/api/vite.config.ts
error when starting dev server:
MiniflareCoreError [ERR_RUNTIME_FAILURE]: The Workers runtime failed to start. There is likely additional logging output above.
    at #assembleAndUpdateConfig (/Users/codehex/go/src/github.com/notahotel/cf-workers/node_modules/.pnpm/miniflare@3.20240129.3/node_modules/miniflare/dist/src/index.js:8618:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Mutex.runWith (/Users/codehex/go/src/github.com/notahotel/cf-workers/node_modules/.pnpm/miniflare@3.20240129.3/node_modules/miniflare/dist/src/index.js:3411:16)
    at async #waitForReady (/Users/codehex/go/src/github.com/notahotel/cf-workers/node_modules/.pnpm/miniflare@3.20240129.3/node_modules/miniflare/dist/src/index.js:8668:5)
    at async Miniflare._getProxyClient (/Users/codehex/go/src/github.com/notahotel/cf-workers/node_modules/.pnpm/miniflare@3.20240129.3/node_modules/miniflare/dist/src/index.js:8778:5)
    at async Miniflare.getBindings (/Users/codehex/go/src/github.com/notahotel/cf-workers/node_modules/.pnpm/miniflare@3.20240129.3/node_modules/miniflare/dist/src/index.js:8797:25)
    at async getPlatformProxy (/Users/codehex/go/src/github.com/notahotel/cf-workers/node_modules/.pnpm/wrangler@3.28.4_@cloudflare+workers-types@4.20240208.0/node_modules/wrangler/wrangler-dist/cli.js:169352:20)
    at async file:///Users/codehex/go/src/github.com/notahotel/cf-workers/projects/api/vite.config.ts.timestamp-1708782137175-558afd32c5ca7.mjs:6:28
    at async loadConfigFromFile (file:///Users/codehex/go/src/github.com/notahotel/cf-workers/node_modules/.pnpm/vite@5.1.4/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:68009:24)
    at async resolveConfig (file:///Users/codehex/go/src/github.com/notahotel/cf-workers/node_modules/.pnpm/vite@5.1.4/node_modules/vite/dist/node/chunks/dep-jDlpJiMN.js:67619:28)
/Users/codehex/go/src/github.com/notahotel/cf-workers/projects/api:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @cf-workers/api@0.0.0 vite: `vite --port 8787`
Exit status 1

[yusukebe]

@Code-Hex

If you can use Variables, KV, etc. and only Durable Objects are not working, then I think it is a Wrangler issue. I think there was a discussion about that among the Cloudflare team. I don't have time right now, so I'd appreciate it if you could look into it there.

[Code-Hex]

There are still a few issues remaining, but by including the following settings, most cases should work. However, resolving imports like __STATIC_CONTENT_MANIFEST is still not working properly.

import devServer from '@hono/vite-dev-server';
import { defineConfig } from 'vite';
import { getPlatformProxy } from 'wrangler';

export default defineConfig(async () => {
  const { env, dispose, caches } = await getPlatformProxy();
  Object.defineProperties(globalThis, {
    caches: { value: caches, writable: true, configurable: true },
    scheduler: { // To use scheduler.wait API
      value: {
        wait: () => {},
      },
      writable: true,
      configurable: true,
    },
  });
  return {
    build: {
      rollupOptions: {
        external: ['__STATIC_CONTENT_MANIFEST'],
      },
    },
    ssr: {
      external: ['__STATIC_CONTENT_MANIFEST'],
    },
    plugins: [
      devServer({
        adapter: {
          env,
          onServerClose: dispose,
        },
        entry: './src/worker.ts',
      }),
    ],
  };
});

[yusukebe]

@Code-Hex

Are you using a serve-static from hono/cloudflare-workers?

[Code-Hex]

@yusukebe Yes, it works fine on wrangler dev

[ducan-ne]

@Code-Hex Hi, I'm looking for use caches api in vite dev server and found your code, tried but got TypeError: 'get' on proxy: property 'default' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Cache2>' but got '#<Cache2>'). Have you experienced this

[Code-Hex]

@ducan-ne I'm sorry, I don't have the experienced.