Serving a single-page app via create-react-app from a subdirectory using Cloudflare Workers

Developers Workers
#1

Hi everyone,

I’m currently serving a single-page app via create-react-app from the root of my domain (with the route set up as https://domain.com/*), but I would like it to be hosted from a subdomain (https://domain.com/subdomain/*).

To enable single-page functionality, I’m following the guidance here: https://github.com/cloudflare/kv-asset-handler#servesinglepageapp.

To try to get the subdomain working, I tried following the guidance here: https://create-react-app.dev/docs/deployment/#building-for-relative-paths (setting the homepage field in package.json and setting basename on the ReactRouter). However, when I build and deploy, the assets are still being served from the root.

In the long run, I would like to be able to have different workers handle different subdomains (kind of like namespaces). For example:

`/`         => root-worker   (handles only the root homepage)
`/route1/*` => route1-worker (handles all routes under the `route1` namespace)
`/route2/*` => route2-worker (handles all routes under the `route2` namespace)
...

Each worker app should not know about the others or rely on their existence and they would just handle their own namespaced routes while Cloudflare Workers handles the top-most level routes.

I would really appreciate any help I could get to make this work.

Thank you!

#2

Hi there,

I’m Oz and I’ll take a look at this. I just need time to do tests on my own. Please let me know if you have further questions.

#3

Hi, is there any news on the issue? What is the best way to deploy a separate Worker for the same domain, but for different subfolders?

#4

This was completely oversight. It is explained here https://developers.cloudflare.com/workers/platform/routes#matching-behavior

When more than one route pattern could match a request URL, the most specific route pattern wins. For example, the pattern www.example.com/* would take precedence over *.example.com/* when matching a request for https://www.example.com/ .

So this configuration should work

/ => root-worker (handles only the root homepage)
/route1/* => route1-worker (handles all routes under the route1 namespace)
/route2/* => route2-worker (handles all routes under the route2 namespace)
…

Let us know if you have further questions.

#5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.