Issue When Setting basename on RR Config

[s-cochrane]

We have our RR server instance behind a reverse proxy and use the basename property in react-router.config.ts as well as the base property in vite.config.ts to make this work. This moves the RR base path as well as the base for the static assets. When following the docs for setting this same property with react-router-hono-server, the route moves to the new path set by 'basename', but all the static assets continue to be served at the root path. This breaks the app when placed behind the reverse proxy as the asset requests aren't routed properly. Is there a way to get all assets as well as the RR app routes served based on the basename?

I cloned the repo and ran the custom-mount example app while changing the basename config to /v2. This resulted in the /v2 path resolving correctly for RR, but the first asset request was for http://localhost:5173/app/styles/tailwind.css, and all the other assets follow the same pattern. Setting the base config in vite.config.ts to match results in the request path from the client being correct, but the assets aren't resolved and result in a 404, http://localhost:5173/v2/app/styles/tailwind.css.

Running a production build with the basename change only also results in the static assets still being requested to the root, http://127.0.0.1:3000/assets/tailwind-p7bQns9R.css.

[rphlmr]

👋 Thanks for reporting

I will double-check because I don't remember why I intentionally did that. Maybe it was because the client-side code was not able to fetch assets with the base name.

Let's try again, I will ping you asap.

[rphlmr]

Update

It's still an issue remix-run/react-router#12295

[s-cochrane]

We're also monitoring the associated fix, remix-run/react-router/pull/12898. We've applied the patch associated with that thread @rphlmr mentioned with good results until the fix is merged.

[rphlmr]

@s-cochrane I will try to patch a demo project and see how I can solve this ticket 👀

[rphlmr]

Okay, so this issue is now closed and should be released in the next RR version.

I will work on it when it's published.

[rphlmr]

Reviewing this again, it seems that it is still an issue for resources 🧐

Front end still try to load from / and not /{basename}

[s-cochrane]

Just confirming on our end that the 7.3.0 release of RR did indeed fix the basename issue for us when used without rr-hono-server. We were using a patch that we've since been able to remove.

[rphlmr]

I think I haven’t re-read carefully and I forgot the vite config part 🤦‍♂️

I will try again to see if I need to set the basename to “resources” middleware as well.

[tale]

Update on this, I encountered this same issue and I sort of fixed it in my own hacky way with a custom patch on my shipped version of react-router-hono-server. I'm only running on Node, so I don't really know much about the other platforms but this is how I fixed it:

react-router-hono-server/src/adapters/node.ts

Lines 135 to 148 in 07c7eb7

	app.use(
	`/${import.meta.env.REACT_ROUTER_HONO_SERVER_ASSETS_DIR}/*`,
	cache(60 * 60 * 24 * 365), // 1 year
	serveStatic({ root: clientBuildPath, ...mergedOptions.serveStaticOptions?.clientAssets })
	);
	/**
	* Serve public files
	*/
	app.use(
	"*",
	cache(60 * 60), // 1 hour
	serveStatic({ root: PRODUCTION ? clientBuildPath : "./public", ...mergedOptions.serveStaticOptions?.publicAssets })
	);

.

That first app.use was changed to account for my basename before the / and the Hono module to serve static files on Node.js supports a rewriteRequestPath function, so for both the app.use calls here, I added this:

# __vitedef_BASENAME is my own custom define thing.
rewriteRequestPath: path => path.replace(__vitedef_BASENAME, "/")