How to build for React + Vite + Cloudflare worker? #4018

vickyRathee · 2025-03-25T10:09:11Z

vickyRathee
Mar 25, 2025

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;

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"),
    },
  },
});

Any suggestion will be really appreciated.

vovsemenv · 2025-03-26T11:33:03Z

vovsemenv
Mar 26, 2025

/api/index.ts

import { Hono } from "hono";
const app = new Hono<{ Bindings: Env }>();

app.get("/api/status", (c) => {
  return c.json({ status: "ok" });
});

app.get("*", (c) => {
  return c.env.ASSETS.fetch(c.req.raw);
});

export default app;

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

import tailwindcss from "@tailwindcss/vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { cloudflare } from "@cloudflare/vite-plugin";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss(), tsconfigPaths(), cloudflare()],
});

index.html

<html lang="en">
<head>
  <meta charSet="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any" />
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>

</html>

wrangler.jsonc

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "app-name",
  "main": "./src/api/index.ts",
  "compatibility_date": "2025-02-26",
  "compatibility_flags": ["nodejs_compat"],
  "assets": {
    "binding": "ASSETS",
    "directory": "./dist",
    "not_found_handling": "single-page-application"
  },
  "observability": {
    "enabled": true,
    "head_sampling_rate": 1
  }
}

2 replies

vickyRathee Mar 26, 2025
Author

@vovsemenv How/where this is going to add title, description in my index.html? I need to serve the initial index.html by hono to add meta data as per the initial question instead the static html

wmdmark Apr 2, 2025

@vickyRathee I'm not certain this is the ideal way to do this but you can intercept the static asset request for HTML and inject your variables by doing something like this:

const response = await c.env.ASSETS.fetch(url)
if (response.headers.get("Content-Type")?.includes("text/html")) {
  const html = await response.text()
  // assuming your html page has `{{ variable_name }}` placeholders)
  let htmlWithVariables = html.replace("{{ title }}", "My Page Title")
  // ...inject more variable as needed
  return new Response(htmlWithVariables, {
    status: response.status,
    statusText: response.statusText,
    headers: response.headers
  })
}

jldec · 2025-04-11T21:26:56Z

jldec
Apr 11, 2025

@vickyRathee take a look at https://github.com/yusukebe/hono-vite-react-stack

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hono

How to build for React + Vite + Cloudflare worker? #4018

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Hono

How to build for React + Vite + Cloudflare worker? #4018

Uh oh!

vickyRathee Mar 25, 2025

Replies: 2 comments · 2 replies

Uh oh!

vovsemenv Mar 26, 2025

Uh oh!

vickyRathee Mar 26, 2025 Author

Uh oh!

wmdmark Apr 2, 2025

Uh oh!

jldec Apr 11, 2025

vickyRathee
Mar 25, 2025

Replies: 2 comments 2 replies

vovsemenv
Mar 26, 2025

vickyRathee Mar 26, 2025
Author

jldec
Apr 11, 2025