diff --git a/.env.example b/.env.example index 2ae183ae..06203a2f 100644 --- a/.env.example +++ b/.env.example @@ -22,6 +22,11 @@ REACT_APP_SHOW_AUTH_BUTTON=true REACT_APP_LOGOUT_PAGE_URL=http://localhost:8080/conda-store/logout?next=/ REACT_APP_ROUTER_TYPE=browser +# If you need to mount the React app at some URL path other than "/". This value +# is passed directly to React Router, see: +# https://reactrouter.com/en/main/routers/create-browser-router#optsbasename +# REACT_APP_URL_BASENAME="/conda-store" + # If you want to use a version other than the pinned conda-store-server version # Set the CONDA_STORE_SERVER_VERSION to the package version that you want # CONDA_STORE_SERVER_VERSION="2024.3.1" diff --git a/src/App.tsx b/src/App.tsx index e62cec36..7d534c14 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -68,10 +68,12 @@ export class App< // } render(): React.ReactNode { + const { routerType, urlBasename: basename } = this.state.pref; + const router = - this.state.pref.routerType === "memory" + routerType === "memory" ? createMemoryRouter(routes, { initialEntries: ["/"] }) - : createBrowserRouter(routes); + : createBrowserRouter(routes, { basename }); return ( diff --git a/src/preferences.tsx b/src/preferences.tsx index 34d0ba94..6365c40c 100644 --- a/src/preferences.tsx +++ b/src/preferences.tsx @@ -15,6 +15,10 @@ export interface IPreferences { // the URL routes in the browser address bar are for JupyterLab, not for // conda-store-ui. routerType: "browser" | "memory"; + + // urlBasename - Defaults to "/" but can be changed if the app needs to be + // mounted at a different URL path, such as "/conda-store" + urlBasename: string; } const { condaStoreConfig = {} } = @@ -61,7 +65,12 @@ export const prefDefault: Readonly = { routerType: process.env.REACT_APP_ROUTER_TYPE ?? condaStoreConfig.REACT_APP_ROUTER_TYPE ?? - "browser" + "browser", + + urlBasename: + process.env.REACT_APP_URL_BASENAME ?? + condaStoreConfig.REACT_APP_URL_BASENAME ?? + "/" }; export class Preferences implements IPreferences { @@ -101,6 +110,10 @@ export class Preferences implements IPreferences { return this._routerType; } + get urlBasename() { + return this._urlBasename; + } + set(pref: IPreferences) { this._apiUrl = pref.apiUrl; this._authMethod = pref.authMethod; @@ -110,6 +123,7 @@ export class Preferences implements IPreferences { this._showAuthButton = pref.showAuthButton; this._logoutUrl = pref.logoutUrl; this._routerType = pref.routerType; + this._urlBasename = pref.urlBasename; } private _apiUrl: IPreferences["apiUrl"]; @@ -120,6 +134,7 @@ export class Preferences implements IPreferences { private _showAuthButton: IPreferences["showAuthButton"]; private _logoutUrl: IPreferences["logoutUrl"]; private _routerType: IPreferences["routerType"]; + private _urlBasename: IPreferences["urlBasename"]; } export const prefGlobal = new Preferences();