oscarvz Comments - Answer Overflow

oscarvz

•Created by Vikash on 3/26/2025 in #help

How to build for React + Vite + Cloudflare worker?

I don't see you use the React renderer in your repo. Here's a snippet of an app I started building yesterday:

import { App } from "@/client/App";
import favicon from "@/client/assets/favicon.svg?url";
import { reactRenderer } from "@hono/react-renderer";
import { Hono } from "hono";
import type { ReactNode } from "react";
import type { Manifest } from "vite";

const app = new Hono();

app.use(
  "*",
  reactRenderer(({ children }) => (
    <html lang="en">
      <head>
        <title>Hello Hono!</title>
        <link rel="icon" href={favicon} />
        <AssetTags />
      </head>
      <body>
        <div id="root">{children}</div>
      </body>
    </html>
  )),
);

app.get("/", async (c) => c.render(<App />));

export default app;

/**
 * Helper component that reads the Vite manifest and returns the import tags for
 * the JS/CSS assets processed by Vite.
 * Setting `build.manifest` to `true` in the Vite config is required for this.
 * Borrowed from Honox's excellent link component:
 * https://github.com/honojs/honox/blob/main/src/server/components/link.tsx
 */
function AssetTags() {
  if (import.meta.env.DEV) {
    return <script type="module" src="/src/client/index.tsx" />;
  }

  const rootManifest = import.meta.glob<{ default: Manifest }>(
    "/public/.vite/manifest.json",
    { eager: true },
  );

  const manifest = Object.values(rootManifest).at(0)?.default;
  if (!manifest) {
    return null;
  }

  const importTags = Object.values(manifest).reduce<ReactNode[]>(
    (tags, { file, css }) =>
      tags.concat([
        <script key={file} type="module" src={file} />,

        ...(css?.map((cssPath) => (
          <link key={cssPath} rel="stylesheet" href={cssPath} />
        )) || []),
      ]),
    [],
  );

  return importTags;
}

import { App } from "@/client/App";
import favicon from "@/client/assets/favicon.svg?url";
import { reactRenderer } from "@hono/react-renderer";
import { Hono } from "hono";
import type { ReactNode } from "react";
import type { Manifest } from "vite";

const app = new Hono();

app.use(
  "*",
  reactRenderer(({ children }) => (
    <html lang="en">
      <head>
        <title>Hello Hono!</title>
        <link rel="icon" href={favicon} />
        <AssetTags />
      </head>
      <body>
        <div id="root">{children}</div>
      </body>
    </html>
  )),
);

app.get("/", async (c) => c.render(<App />));

export default app;

/**
 * Helper component that reads the Vite manifest and returns the import tags for
 * the JS/CSS assets processed by Vite.
 * Setting `build.manifest` to `true` in the Vite config is required for this.
 * Borrowed from Honox's excellent link component:
 * https://github.com/honojs/honox/blob/main/src/server/components/link.tsx
 */
function AssetTags() {
  if (import.meta.env.DEV) {
    return <script type="module" src="/src/client/index.tsx" />;
  }

  const rootManifest = import.meta.glob<{ default: Manifest }>(
    "/public/.vite/manifest.json",
    { eager: true },
  );

  const manifest = Object.values(rootManifest).at(0)?.default;
  if (!manifest) {
    return null;
  }

  const importTags = Object.values(manifest).reduce<ReactNode[]>(
    (tags, { file, css }) =>
      tags.concat([
        <script key={file} type="module" src={file} />,

        ...(css?.map((cssPath) => (
          <link key={cssPath} rel="stylesheet" href={cssPath} />
        )) || []),
      ]),
    [],
  );

  return importTags;
}

15 replies

HHono

•Created by Vikash on 3/26/2025 in #help

How to build for React + Vite + Cloudflare worker?

In that case, get rid of the React Vite plugin & make use of the React rendererer middleware. If you need to ship JS to those pages, the article I shared should help you out

15 replies

HHono

•Created by Vikash on 3/26/2025 in #help

How to build for React + Vite + Cloudflare worker?

Correct, I didn't dive into React specifically - though the same concept applies here as the API is more or less the same. If you're stuck with the static index.html file, I'd suggest looking into https://vite.dev/guide/api-plugin.html#transformindexhtml

15 replies

HHono

•Created by Vikash on 3/26/2025 in #help

How to build for React + Vite + Cloudflare worker?

I answered in #cloudflare, didn't see this post. You're getting that error @Vikash as mentioned in my first reply. The Vite React plugin expects an HTML file - which isn't here, because you're rendering the HTML now upon request using Hono. You can't have both

15 replies

HHono

•Created by akashpatil7596 on 11/22/2024 in #help

I want to return component to API response which contsin useState.

Hi, this is because your component is built on the server, but no JS is shipped to your browser to make the component interactive. I wrote this article that can help you out: https://dev.to/fiberplane/step-by-step-guide-adding-client-side-logic-to-your-hono-app-14eh

5 replies

Gaming

Programming