PUBLIC_URL support

[oleole39]

Hello,

We are maintaining a YunoHost package for FossFLOW, which allows installing the app without Docker.
The last working build dates back from early July (although we probably missed a few other potentially working versions since then) and I am now working on a package adapted to FossFLOW's new monorepo architecture.

It consists of scripts specific to how YunoHost works, but here is basically what it does (inspired by the app's Dockerfile):

    git clone https://github.com/stan-smith/FossFLOW.git
    cd FossFLOW

    npm install -g npm@11.5.2
    npm install
    PUBLIC_URL="https://mydomain.tld/fossflow" npm run build

    mv packages/fossflow-app/build app
    mkdir -p app/backend
    mv packages/fossflow-backend/* app/backend

    mv app /var/www/fossflow

    pushd "/var/www/fossflow/backend"
        npm install --production
    popd
    
    #add nginx config
    #add backend service with required environment variables and start it.

I did not detail the commands related to nginx and the backend because they are specific to Yunohost and seem to work fine (as per the logs).
However the app page shows a white screen. Page and files are loaded but the console shows the following warning:

<Router basename="/https://mydomain.tld/fossflow"> is not able to match the URL "/fossflow/" because it does not start with the basename, so the <Router> won't render anything.

I suspect a bug in the support of PUBLIC_URL which used to work previously. Would you have some clues?

[stan-smith]

hey @oleole39 I'm guessing this is because of this commit:
c893132
Take a look and let me know what you think.
-Stan

[oleole39]

I forgot to mention that the error message was related to lib-router.97d32226.js:2:298. The actual text message comes from this unminified portion:

lib-router.97d32226.js extract

function G({
	basename: e = "/",
	children: t = null,
	location: n,
	navigationType: a = "POP",
	navigator: i,
	static: u = !1
}) {
	o(!M(), "You cannot render a <Router> inside another <Router>. You should never have more than one in your app.");
	let s = e.replace(/^\/*/, "/"),
		h = r.useMemo(() => ({
			basename: s,
			navigator: i,
			static: u,
			future: {}
		}), [s, i, u]);
	"string" == typeof n && (n = c(n));
	let {
		pathname: p = "/",
		search: d = "",
		hash: m = "",
		state: f = null,
		key: y = "default"
	} = n, v = r.useMemo(() => {
		let e = g(p, s);
		return null == e ? null : {
			location: {
				pathname: e,
				search: d,
				hash: m,
				state: f,
				key: y
			},
			navigationType: a
		}
	}, [s, p, d, m, f, y, a]);
	return (l(null != v, `<Router basename="${s}"> is not able to match the URL "${p}${d}${m}" because it does not start with the basename, so the <Router> won't render anything.`), null == v) ? null : r.createElement(F.Provider, {
		value: h
	}, r.createElement(A.Provider, {
		children: t,
		value: v
	}))
}

Take a look and let me know what you think.

In the commit you pointed out, I noticed the e2e-tests/test-base-paths.sh, which checks the following path formats:

FossFLOW/e2e-tests/test-base-paths.sh

Line 16 in 6cb6496

BASE_PATHS=("/" "/fossflow" "/apps/fossflow" "/my-org/projects/fossflow")

After more tests on my side, those paths do work indeed as expected.

However it breaks a current feature of the Yunohost package which allows changing the path (which is basically a "find/replace all" in the app files): replacing / with /fossflow would break the app (a single slash being a too common character in app files), when replacing https://mydomain.tld/ with https://mydomain.tld/fossflow was quite safe. So I am still looking forward to having the full URL as basename, although I don't know much about React router.