Vikash Posts - Answer Overflow

Vikash

Explore posts from servers

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

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

15 replies

CDCloudflare Developers

•Created by Vikash on 2/24/2025 in #pages-help

Caching rsc routes in Next.js

5 replies

CDCloudflare Developers

•Created by Vikash on 11/8/2024 in #pages-help

Unable to connect to any of the browser sessions

1 replies

CDCloudflare Developers

•Created by Vikash on 4/18/2024 in #workers-help

How to implement code-level caching service?

How to use caching on code-level? I need to cache the getAuthUser(userId) function result on code level to avoid querying D1 again and again as the getAuthUser is a middleware used on all the API routes. So, I built a get/set caching function using a fake url, user/1, user/2 etc. But it doesn't seems to be working and I see undefined in cache.match(cacheKey) response always.

export const getCached = async (request: HonoRequest, key: string) => {
  const cacheUrl = new URL(request.url);
  cacheUrl.pathname = '/' + key;

  const cacheKey = new Request(cacheUrl.toString(), {
    method: 'GET',
    cf: {
      cacheEverything: true,
      cacheTtl: 86400,
    },
  });

  const cache = caches.default;
  const response = await cache.match(cacheKey);
  console.log('r', response);
  if (response) {
    const json = await response.json();
    console.log('json', json);
  }
};

export const setCached = async (
  request: HonoRequest,
  key: string,
  data: any
) => {
  const cacheUrl = new URL(request.url);
  cacheUrl.pathname = '/' + key;

  const cacheKey = new Request(cacheUrl.toString(), {
    method: 'GET',
    cf: {
      cacheEverything: true,
      cacheTtl: 86400,
    },
  });
  const cache = caches.default;
  const response = new Response(data);
  response.headers.append('Cache-Control', 's-maxage=30');
  await cache.put(cacheKey, response);
};

export const getCached = async (request: HonoRequest, key: string) => {
  const cacheUrl = new URL(request.url);
  cacheUrl.pathname = '/' + key;

  const cacheKey = new Request(cacheUrl.toString(), {
    method: 'GET',
    cf: {
      cacheEverything: true,
      cacheTtl: 86400,
    },
  });

  const cache = caches.default;
  const response = await cache.match(cacheKey);
  console.log('r', response);
  if (response) {
    const json = await response.json();
    console.log('json', json);
  }
};

export const setCached = async (
  request: HonoRequest,
  key: string,
  data: any
) => {
  const cacheUrl = new URL(request.url);
  cacheUrl.pathname = '/' + key;

  const cacheKey = new Request(cacheUrl.toString(), {
    method: 'GET',
    cf: {
      cacheEverything: true,
      cacheTtl: 86400,
    },
  });
  const cache = caches.default;
  const response = new Response(data);
  response.headers.append('Cache-Control', 's-maxage=30');
  await cache.put(cacheKey, response);
};

6 replies

CDCloudflare Developers

•Created by Vikash on 3/27/2024 in #workers-help

Catch-All email routing not working

11 replies

CDCloudflare Developers

•Created by Vikash on 10/22/2023 in #pages-help

Uncaught Error: No such module "__STATIC_CONTENT_MANIFEST".

20 replies

CDCloudflare Developers

•Created by Vikash on 10/2/2023 in #workers-help

How to allow customers to use custom domain?

For example, I have my application hosted on Cloudflare worker with domain dayschedule.com and each customer get their subdomain on signup with wildcard routing - For example vikash.dayschedule.com How can I use Cloudflare to allow our customers to map their domain via CNAME mapping? For example - - vikash.com > vikash.dayschedule.com - alpha.com > alpha.dayschedule.com I will use D1 to store mapping when reigstered by customers, also the HTTPS expected to work on all links.

6 replies

CDCloudflare Developers

•Created by Vikash on 9/9/2023 in #pages-help

How to deploy functions with Pages?

3 replies

Gaming

Programming