Middleware / ignore routes to be server by one when bundled with server

[prabirshrestha]

I'm bundling the one app with a rust server so a single binary serves both the rust server routes and the one spa app. There are some urls that I need one to ignore so GET on those routes would got to the server instead.

Is there something like navigateFallbackDenyList in one similar to the one that VitePWA supports?

https://vite-pwa-org.netlify.app/workbox/generate-sw#exclude-routes

[natew]

For now it's a bit awkward,

In dev you'd make a custom Vite plugin, see createServer in Vite. You can then hook into the vite server before. For production, you'd want to hook into the Hono app itself, and we just removed some of those hooks.

What we need is a middleware feature.

I think a _middleware.ts file anywhere in the fs routes would be good, sort of like Next.js:

• https://nextjs.org/docs/app/building-your-application/routing/middleware

Granted we do have loaders which can act as middleware essentially, they do receive the request and can throw or return Response, though we need better testing/docs around that still. There's also some trade-offs, so we'd need to think over it.

[natew]

You could run your rust server on top of the One server for now too.

[prabirshrestha]

One of my main goal is to have the app be a single binary with rust for speed on the server and rich SPA app for the web and iOS mobile app so bundling the one server would defeat the purpose.

Right now I'm setting the defaultRenderMode to be spa which I means I should be able to bundle the dist/client folder and server just index.html and the assets folder. From the dist folder I'm able to run a random http server and the SPA app does work. python3 -m http.server. There is redirect property for one.web config. I would like to have some mechanism on the client to ignore these routes similar as follows. since this is SPA only there should be no hono/one server configuration and should instead be a static configuration potentially in vite.config.ts.

    one({
      web: {
        defaultRenderMode: 'spa',
        redirects: [],
        ignoreRoutes: ['/signout', /^api/],
      });

The way I usually have done in the past is I have rust server handle all the routes and not found routes goes to the SPA app that is done by the rust proxy middleware. In prod it just always returns the index.html so I don't need another server for the client.

[natew]

Hm ok that makes sense.

I would like to have some mechanism on the client to ignore these routes similar as follows.

Not sure what you mean / what ignoreRoutes does? If you have your own Rust server you can ignore routes there right.

[prabirshrestha]

Here is a minimal repo.

• Create a new Minimal+TamaGui app with bun one@latest.
• Update app/index.ts with the following code to mimic.

import { Image } from "@tamagui/image-next";
import { Text, YStack } from "tamagui";
import { ToggleThemeButton } from "~/interface/ToggleThemeButton";
import oneBall from "../public/app-icon.png";
import { useEffect } from "react";

const makeApiRequest = async () => {
  try {
    const res = await fetch("/api/hello").then((res) => res.json());
    console.log(res);
  } catch (e) {
    console.error(e);
  }
};

export function HomePage() {
  useEffect(() => {
    makeApiRequest();
  }, []);
  return (
    <YStack bg="$color1" mih="100%" gap="$4" ai="center" jc="center" f={1}>
      <Text fontSize={20}>Hello, world</Text>
      <Image src={oneBall} width={128} height={128} />
      <ToggleThemeButton />
    </YStack>
  );
}

• create a new bun app in a new folder. mkdir bun server && bun init && bun add hono.
• update index.ts file with the following.

import { Hono } from "hono";
import { serve } from "bun";

const app = new Hono();

// API routes
app.all("/api/*", (c) => c.json({ ok: true }));

// SPA proxy
app.all("*", async (c) => {
  return await fetch("http://localhost:8081" + c.req.path);
});

serve({
  fetch: app.fetch,
  port: 3000,
});

Run bun dev in the one app. Notice the error in console and network tab. It is returning html with 200.

Now go to the server folder and run the server via bun index.ts. Ideally this would be my rust server with proxy during dev and embedded static files during prod. But right now seems like one is taking over fetch and I don't see any network request at all.