How do I use Cloudflare's react-router RequestHandler?
So I've built a javascript react SPA using the Cloudflare vite plugin and it retrieves files from R2 and works well. I have been studying the react-router addressbook tutorial[1] and I am pretty comfortable with it. I created a react-router application per the instructions on the Just Use Vite page[2] and it creates a RequestHandler:
const requestHandler = createRequestHandler(
() => import("virtual:react-router/server-build"),
import.meta.env.MODE
);
export default {
async fetch(request, env, ctx) {
return requestHandler(request, {
cloudflare: { env, ctx },
});
},
} satisfies ExportedHandler<Env>;
I must be dense, but I don't understand what the RequestHandler is doing at all, and the only documentation I can find for it [3] is no help at all. Using the provided fetch() function in the SPA is easy. How do I use the async fetch() function above to make remote requests? Suppose I just want to GET a file from a remote host? Should I rip out the RequestHandler() and simply treat it like a normal fetch? I can't find any examples on the internet using this function to make remote requests, let alone get files from R2.
Suggestions or pointers to docs or sample code welcome.
Thanks!
[1] https://reactrouter.com/tutorials/address-book
[2] https://blog.cloudflare.com/introducing-the-cloudflare-vite-plugin/
[3] https://api.reactrouter.com/v7/types/_react_router_express.RequestHandler.htmlThe Cloudflare Blog
“Just use Vite”… with the Workers runtime
The Cloudflare Vite plugin integrates Vite, one of the most popular build tools for web development, with the Workers runtime. Today, we are announcing the 1.0 release and official support for React Router v7.
RequestHandler | React Router API Reference
Documentation for React Router API Reference
1 Reply
Oops I think I should have posted this under #vite-plugin ...
It looks like
env above (the fetch() arg) is used to provide bindings to assets setup in wrangler.jsonc, but it's not clear how one would discern between (say) KV and R2 bindings? Is this up to the calling loader()?
The answer to my question is yes, we process the Cloudflare bindings in the env object sent to the caller.