Future of Cloudflare and AWS

[rphlmr]

👋 Hello there

The last release took me an entire Saturday to fix pre-rendering for Cloudflare.
I’m not even sure if it works with AWS since I have no experience with that platform.

It’s not the first time it took me a whole day to fix something.

RR sometimes changes its API (the last one was pre-render). It’s fine, but since I rely on RR’s internal implementation to make this package easy to use, it has consequences.

I assume that, doing this forces me to be smart and find solutions. I learn a lot.

I mainly use Node (and Bun) daily, and RR releases have always been “easy” to follow.

Platform providers like CF, AWS, and Vercel are a pain for me to comply with.
It relies too much on external Vite plugins, presets, React-specific imports, or builds.

So,in 3.0, I'm considering removing Cloudflare & AWS support.

I hate to be that guy, but I really can’t waste all my free time on something I don’t even use 😭

The best option for Cloudflare comes from the creator of Hono: https://github.com/yusukebe/hono-react-router-adapter

RR will soon release its middleware API, but I’ll still continue to maintain this package as long as RR supports integration with a custom server 🫡

[agcty]

Thankfully this just came out:

https://x.com/ritakozlov_/status/1909592546285592726

https://github.com/cloudflare/templates/tree/staging/react-router-starter-template

TLDR: Cloudflare now has an official GA vite plugin for deploying to workers. Now I still have to figure out how hono can be used in this setup but i think it works just like express:

import { createRequestHandler } from "react-router";

declare module "react-router" {
  export interface AppLoadContext {
    cloudflare: {
      env: Env;
      ctx: ExecutionContext;
    };
  }
}

const requestHandler = createRequestHandler(
  () => import("virtual:react-router/server-build"),
  import.meta.env.MODE
);

// somehow use hono here
export default {
  async fetch(request, env, ctx) {
    return requestHandler(request, {
      cloudflare: { env, ctx },
    });
  },
} satisfies ExportedHandler<Env>;

EDIT:

It's as easy as such:

import { Hono } from 'hono';
import { logger } from 'hono/logger';
import { createRequestHandler } from "react-router";

declare module "react-router" {
  export interface AppLoadContext {
    cloudflare: {
      env: Env;
      ctx: ExecutionContext;
    };
  }
}

const requestHandler = createRequestHandler(
  () => import("virtual:react-router/server-build"),
  import.meta.env.MODE,
);

const app = new Hono<{ Bindings: Env }>();

app.use('*', logger());

app.all('*', (c) => {
  return requestHandler(c.req.raw, {
    cloudflare: { env: c.env, ctx: c.executionCtx as ExecutionContext },
  });
});

export default app;

[rphlmr]

Thanks! I think it will help people.

[omarkhatibgg]

Hey Raphaël,

Could you please pin this issue?

[rphlmr]

Hey @omarkhatibco it is.
Or do you mean the message of agcty?

[omarkhatibgg]

Sorry, did not noticed it 🙈

thank you anyway, I think since Cloudflare already has their plugin, it does not worth the headache.

[kziemski]

cloudflare vite plugin breaks prerender because it eats the lifecycle hook for prerender so this template is still valid fyi

[thomasgauvin]

@agcty your comment is great, thanks for sharing, this seems to be the right answer for hosting React Router + Hono + Cloudflare at this time, using it in my projects + made it easy to get a project scaffolded with https://github.com/thomasgauvin/react-router-hono-cloudflare