Hono•2mo ago

How to build for React + Vite + Cloudflare worker?

I am using this example provided by Cloudflare for Vite + React + Hono https://github.com/cloudflare/templates/tree/main/vite-react-template which works fine if I use it as-is. But I need to change the static index.html to index.tsx to serve the initial html by hono to add title, description, meta tags etc. based on the pathname. So, I changed the index.html with index.tsx

import { Hono } from "hono";

const app = new Hono();

const routes = app.get("/api/clock", (c) => {
  return c.json({
    time: new Date().toLocaleTimeString(),
  });
});

export type AppType = typeof routes;

app.get("/", (c) => {
  return c.html(
    `<html lang="en">
      <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite + React + Hono</title>        
      </head>
      <body>
        <div id="root"/>
        <script type="module" src="/src/app/main.tsx"></script>
      </body>
    </html>`
  );
});

export default app;

import { Hono } from "hono";

const app = new Hono();

const routes = app.get("/api/clock", (c) => {
  return c.json({
    time: new Date().toLocaleTimeString(),
  });
});

export type AppType = typeof routes;

app.get("/", (c) => {
  return c.html(
    `<html lang="en">
      <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite + React + Hono</title>        
      </head>
      <body>
        <div id="root"/>
        <script type="module" src="/src/app/main.tsx"></script>
      </body>
    </html>`
  );
});

export default app;

And, I also tried to change the vite config to add build from import build from "@hono/vite-build/cloudflare-workers" but it doesn't work.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { cloudflare } from "@cloudflare/vite-plugin";
import path from "path";
import tailwindcss from "@tailwindcss/vite";
import devServer from "@hono/vite-dev-server";
import build from "@hono/vite-build/cloudflare-workers";

export default defineConfig({
  plugins: [
    react(),
    cloudflare(),
    tailwindcss(),
    build({
      entry: "index.tsx",
    }),
    devServer({
      entry: "index.tsx",
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { cloudflare } from "@cloudflare/vite-plugin";
import path from "path";
import tailwindcss from "@tailwindcss/vite";
import devServer from "@hono/vite-dev-server";
import build from "@hono/vite-build/cloudflare-workers";

export default defineConfig({
  plugins: [
    react(),
    cloudflare(),
    tailwindcss(),
    build({
      entry: "index.tsx",
    }),
    devServer({
      entry: "index.tsx",
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

GitHub

templates/vite-react-template at main · cloudflare/templates

Templates for Cloudflare Workers. Contribute to cloudflare/templates development by creating an account on GitHub.

13 Replies

ambergristle•2mo ago

what doesn't work?

VikashOP•2mo ago

It doesn't build properly, I see blank screen on browser with this error on console

VikashOP•2mo ago

Here is the full code - https://github.com/vickyRathee/vite-react-template

GitHub

GitHub - vickyRathee/vite-react-template: Vite react template using...

Vite react template using Hono and styling with shadcn to deploy on Cloudflare workers - vickyRathee/vite-react-template

ambergristle•2mo ago

idk if this is the problem, but i don't think this should be a string: https://github.com/vickyRathee/vite-react-template/blob/cd322371ede3055f9695ace5d2da6f08def63548/_index.tsx#L15

VikashOP•2mo ago

this is working fine as string, I can see the HTML in response. So this line is not an issue!

oscarvz•2mo ago

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

VikashOP•2mo ago

I was checking your example and it has lots of imports from hono/jsx, I need to use my application as is because it's a migration from Next JS and lots of shadcn components. So, anyway to just serve the index.html as it's a SPA, so everything else should work as is in given Cloudflare example

oscarvz•2mo ago

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

vitejs

Plugin API

Next Generation Frontend Tooling

VikashOP•2mo ago

I don't think the transformhtml will work, because I need the hono context to get the meta data from KV store to append as per pathname. For example, I have 1000 products page, each product metadata will be stored in D1/KV on cloudflare. So the only solution is initial html render should be done by hono

oscarvz•2mo ago

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

VikashOP•2mo ago

That's not importing my main script <script type="module" src="/src/react-app/main.tsx"></script> can you try running it from my github repo when you have some time?

oscarvz•2mo ago

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;
}

VikashOP•2mo ago

This is resolved by using the new react router example - https://github.com/yusukebe/hono-react-router-adapter/tree/main/examples/cloudflare-workers

GitHub

hono-react-router-adapter/examples/cloudflare-workers at main · yu...

Hono <-> React Router Adapter. Contribute to yusukebe/hono-react-router-adapter development by creating an account on GitHub.

Gaming

Programming

How to build for React + Vite + Cloudflare worker?

Did you find this page helpful?