Cloudflare Pages Functions call 404s #2371

callmetwan · 2024-03-17T15:44:50Z

callmetwan
Mar 17, 2024

I'm building a Cloudflare Pages fullstack app (i.e. not SSG). I'm able to get a local dev environment to respond to requests, with the exception of the client calls to Functions -those always 404. I've cobbled this together from the Hono docs and examples repo. I'm sure I'm just doing something wrong, any hints or tips would be very appreciated!

I noticed that the Hono Cloudflare Pages example uses Wrangler but the Hono default project generated with using the Cloudflare Pages option does not. Maybe it is related to that?

Start dev environment:

yarn vite

vite.config.ts - Derived from the Hono Cloudflare Pages documentation

import pages from "@hono/vite-cloudflare-pages";
import devServer from "@hono/vite-dev-server";
import adapter from "@hono/vite-dev-server/cloudflare";
import { defineConfig } from "vite";

export default defineConfig(({ mode }) => {
  if (mode === "client") {
    return {
      build: {
        rollupOptions: {
          input: "./src/client/index.tsx",
          output: {
            entryFileNames: "static/client.js",
          },
        },
      },
    };
  } else {
    return {
      plugins: [
        pages(),
        devServer({
          entry: "src/index.tsx",
          adapter,
        }),
      ],
    };
  }
});

src/index.tsx - Backend "server"

import { Hono } from "hono";
import type { D1Database } from "@cloudflare/workers-types";

type Bindings = {
  d1primary: D1Database;
};

const app = new Hono<{
  Bindings: Bindings;
}>();
app.get("*", (context) => {
  return context.render(
    <html>
      <head>
        <link href="/static/style.css" rel="stylesheet" />
        <title>Foo</title>
      </head>
      <body>
        <div id="root"></div>
      </body>
      {import.meta.env.PROD ? (
        <script type="module" src="/static/client.js"></script>
      ) : (
        <script type="module" src="/src/client/index.tsx"></script>
      )}
    </html>
  );
});

export default app;

src/client/index.tsx -

import { ApiAuth } from "../../functions/[[route]]";
import { hc } from "hono/client";
import { render } from "hono/jsx/dom";

function App() {
  const client = hc<ApiAuth>("");
  const { $post } = client.api.auth.login;

  async function onClick(e: Event) {
    const response = await $post({   // <---- This always 404s
      json: {
        email: "foo",
        password: "foo",
      },
    });

    console.log(response);
  }

  return (
    <div>
      <button onClick={onClick}>This is a button</button>
    </div>
  );
}

const root = document.getElementById("root") as HTMLElement;
render(<App />, root);

functions/api/[[route]].ts

import { Hono } from "hono";
import { handle } from "hono/cloudflare-pages";

const app = new Hono().post("/api/auth/login", (context) => {
  return context.json({ message: "Hello" });
});

export type ApiAuth = typeof app;

export const onRequest = handle(app);

callmetwan · 2024-03-17T16:14:39Z

callmetwan
Mar 17, 2024
Author

It just occurred to me that I probably don't need the Functions er, functionality if I'm using Hono to respond to requests this way.

I added a route to src/index.tsx and requests to api/auth/login worked. Here is the whole file for context:

src/index.tsx

app                                              // <----- Adding this worked!
  .post("api/auth/login", async (context) => {
    return context.json({ message: "Hello" });
  });

app.get("*", (context) => {
  return context.render(
    <html>
      <head>
        <link href="/static/style.css" rel="stylesheet" />
        <title>misterpoppins</title>
      </head>
      <body>
        <div id="root"></div>
      </body>
      {import.meta.env.PROD ? (
        <script type="module" src="/static/client.js"></script>
      ) : (
        <script type="module" src="/src/client/index.tsx"></script>
      )}
    </html>
  );
});

export default app;

0 replies

yusukebe · 2024-03-22T09:20:35Z

yusukebe
Mar 22, 2024
Maintainer

Hi @callmetwan

Sorry for the confusion! There is a gap between the example, now called Pages Stack, and the starter code. If you use the starter with Vite, I think the functions/api/[[route]].ts will be applied.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hono

Cloudflare Pages Functions call 404s #2371

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Hono

Cloudflare Pages Functions call 404s #2371

callmetwan Mar 17, 2024

Replies: 2 comments

callmetwan Mar 17, 2024 Author

yusukebe Mar 22, 2024 Maintainer

callmetwan
Mar 17, 2024

callmetwan
Mar 17, 2024
Author

yusukebe
Mar 22, 2024
Maintainer