Add config option REACT_APP_URL_BASENAME (#431)

* Add config option REACT_APP_URL_BASENAME

* update preferences class

.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"

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 (
       <PrefContext.Provider value={this.state.pref}>

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<IPreferences> = {
   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();