react router and cloudflare pages

[samadadi]

Hi. Is there a template setup or documentation for cloudflare pages?

[jcarrano]

After searching around I found a few repos that show how to do this:

• https://github.com/mnara-solutions/utiliti.dev
• https://github.com/benvinegar/counterscale/tree/main/packages/server
• https://github.com/xmflsct/terradelft-website

Summary:

• Your repo must have a file functions/[[path]].ts at the root.
• You must have a custom server entry point like: https://github.com/benvinegar/counterscale/blob/main/packages/server/app/entry.server.tsx
• Set up your routes in _routes.json. Example:

  {
    "version": 1,
    "include": ["/*"],
    "exclude": ["/favicon.ico", "/favicon.png", "/assets/*", "robots.txt", "/images/*"]
  }

• Configure the vite build with cloudflareDevProxy: https://github.com/mnara-solutions/utiliti.dev/blob/6a5f3af70b821ecad5605ff3339f4d4b0e93ee73/vite.config.ts#L27
  Otherwise you get Cloudflare Adapter unable to resolve node:fs.
• Test locally with wrangler pages dev ./build/client
• On Cloudflare, the build directory is /build/client

Notes

• What does build do in https://github.com/benvinegar/counterscale/blob/c47ce0599bd0ccb84e6a68c6779655fb896b2a1b/packages/server/functions/%5B%5Bpage%5D%5D.ts#L9 ?
• It would be great to have this in the official docs. It works mostly the same as in Remix, but the remix docs don't mention the server entry point.
• Some of the examples add /build/* to the routes exclude paths, but AFAIU this is a leftover from remix.

[Xazu001]

Hi! I just made a template that you can use! https://github.com/Xazu001/react-router-cf

[samadadi]

Thank you so much for help.