Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[suggestion] Add Cloudflare DevServer config to Docs #39

Closed
bruceharrison1984 opened this issue Feb 10, 2024 · 7 comments
Closed

[suggestion] Add Cloudflare DevServer config to Docs #39

bruceharrison1984 opened this issue Feb 10, 2024 · 7 comments

Comments

@bruceharrison1984
Copy link
Contributor

bruceharrison1984 commented Feb 10, 2024

My previous Hono app used the @hono/vite-dev-server package to setup local Cloudflare services. HonoX includes this, and it is all configured via the honox plugin, but the docs don't make this immediately obvious.

import { defineConfig } from 'vite';
import client from 'honox/vite/client';
import honox from 'honox/vite';
import pages from '@hono/vite-cloudflare-pages';

export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      plugins: [client()],
    };
  } else {
    return {
      plugins: [
        honox({
          devServer: {
            cf: {
              d1Databases: { TORCH_DATABASE: 'TORCH_DATABASE' },
              d1Persist: '../../.wrangler/state/v3/d1',
              r2Buckets: ['TORCH_R2'],
              r2Persist: '../../.wrangler/state/v3/r2',
              kvNamespaces: ['TORCH_AUTH'],
              kvPersist: '../../.wrangler/state/v3/kv',
            },
          },
        }),
        pages(),
      ],
    };
  }
});
chilitreat added a commit to chilitreat/sun that referenced this issue Feb 11, 2024
@yusukebe
Copy link
Member

@bruceharrison1984

Ah, yeah. I also think these should be written. Can you write them and create a PR?

@bruceharrison1984
Copy link
Contributor Author

Yeah, I should be able to carve out 30 minutes to put this together

@yusukebe
Copy link
Member

Hey @bruceharrison1984

Now, we can use the new API getPlatformProxy() in Wrangler. This will automatically read variables from wrangler.toml without having to write Bindings in vite.config.ts. The vite.config.ts can be written simply as follows:

import honox from 'honox/vite'
import { defineConfig } from 'vite'
import { getPlatformProxy } from 'wrangler'

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

Below is an example project. Please try it out. If it looks good, write it in the README.

https://github.com/yusukebe/honox-playground/tree/main/projects/cloudflare-bindings

@KaiSpencer
Copy link

Happy to throw something in the docs if you are stuck for time @bruceharrison1984 👌

@bruceharrison1984
Copy link
Contributor Author

Go for it man! I won't have time to swing back to this until next week.

@yusukebe
Copy link
Member

yusukebe commented Mar 7, 2024

I've updated the website to explain a new way of using Cloudflare Bindings:

https://hono.dev/getting-started/cloudflare-pages#bindings

I think we can add the description to HonoX's README like that.

@yusukebe
Copy link
Member

This was fixed by #113

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants