Add configurable default basename so app can run under /glpi/

[ramdaniAli]

Summary

We would like the app to be accessible at a sub-path like https://example.com/glpi/ (instead of only /).
Request: make the router / build base path configurable via an environment variable (e.g. APP_BASENAME / REACT_APP_BASENAME) so deployments behind a path prefix such as /glpi/ are supported.

Motivation

• Our deployment uses host nginx that proxies /glpi/ → http://127.0.0.1:8081/. Currently the app assumes it runs at / and emits root-relative links and cookies, causing redirects and 404s when served under /glpi/.
• Supporting a basename makes it possible to host the app under a path prefix without requiring hacks like HTML response text rewriting in nginx (sub_filter), which is brittle.
• This change would also simplify running multiple apps on the same domain (e.g., example.com/client, example.com/installer, example.com/glpi) and is a common production need.

Proposed solution

1. Add a new environment variable (name proposal: APP_BASENAME, fallback "/").
2. Read that variable at runtime/build and configure:
   • the router basename (so internal routes work), and
   • the build base / public URL for static assets (so CSS/JS assets load correctly).
3. Make sure Set-Cookie path generation and redirects are compatible (cookie path / vs APP_BASENAME).
4. Document the new env variable in README / deployment docs.

Example implementations (pick the one matching the stack)

React (React Router v6) — runtime router basename

// src/main.jsx or similar
import { BrowserRouter } from 'react-router-dom';

const basename = process.env.REACT_APP_BASENAME || process.env.APP_BASENAME || '/';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter basename={basename}>
    <App />
  </BrowserRouter>
);

Create React App — ensure correct asset paths on build

• Use PUBLIC_URL (or set homepage in package.json) at build time:

# build for /glpi/
REACT_APP_BASENAME=/glpi/ PUBLIC_URL=/glpi/ npm run build

or set homepage in package.json:

"homepage": "/glpi/"

Vite — base config

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  const base = process.env.APP_BASENAME || '/';
  return { base };
});

Next.js — basePath

// next.config.js
module.exports = {
  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
}

Angular

• Pass --base-href=/glpi/ to ng build and set APP_BASE_HREF provider if needed.

Deployment / nginx notes

If you proxy /glpi/ to the app root, ensure nginx rewrites Location headers and cookie paths if the backend or app emits root-relative values. The ideal approach is for the app to generate correct roots so nginx does not need sub_filter.

Backwards compatibility

• Default should remain / (no breaking change).
• Document the env var and examples in docs/deploy.md.

Tests & acceptance criteria

• App works unchanged when APP_BASENAME is unset or /.
• App works when APP_BASENAME=/glpi/: page assets (css/js/images) load from /glpi/....
• Routing (links, client-side navigation) works at /glpi/.
• Login flow and session cookies work (no redirects to / and cookies path scoped correctly).
• Add small CI step or manual test instructions to verify the two modes.

Request

Could maintainers:

• approve adding APP_BASENAME (or an equivalent approach you prefer),
• advise if you prefer a different environment variable name or approach,
• and let me know if you want this as a small PR (I can open one) with example changes for the frontend and docs.

Thanks!