Merge pull request #239 from conda-incubator/runtime_configuration

Runtime configuration

src/docs/markdown/CONFIGURATION.md

@@ -1,11 +1,14 @@
 # Configuration
 
-The configuration for conda-store-ui, including the connection details to conda-store currently use `.env` files.
+The configuration for conda-store-ui, including the connection details to conda-store, can be done : 
+- either at compile time, using a `.env` file.
+- or at runtime, using `condaStoreConfig` variable
 
-## Using `.env`
 
-conda-store-ui looks for a `.env` file at runtime. Below, you'll find the options and the listed descriptions. You are welcome to copy
-this configuration, otherwise, you can copy and rename the `.env.example` file provided in the repository.
+## At compile time, using `.env`
+
+conda-store-ui looks for a `.env` file when packing the bundle. 
+Below, you'll find the options and the listed descriptions. You are welcome to copy this configuration, otherwise, you can copy and rename the `.env.example` file provided in the repository.
 
 Sample File:
 
@@ -18,6 +21,25 @@ REACT_APP_STYLE_TYPE=grayscale
 REACT_APP_SHOW_LOGIN_ICON=true
 ```
 
+## At runtime, using `condaStoreConfig`
+
+When using a webpacked version of `conda-store-ui`, you might want to pass it a configuration. 
+In your HTML file, add the following **before** loading the react app :  
+
+```html
+<script>
+    const condaStoreConfig = {
+        REACT_APP_AUTH_METHOD: "cookie",
+        REACT_APP_AUTH_TOKEN: "",
+        REACT_APP_STYLE_TYPE: "grayscale",
+        REACT_APP_SHOW_LOGIN_ICON: "true",
+        REACT_APP_API_URL: "http://localhost:5000/conda-store",
+        REACT_APP_LOGIN_PAGE_URL: "http://localhost:5000/conda-store/login?next=",
+    };
+</script>
+```
+
+
 ## Options
 
 The possible options are stored in a key-value format.

src/preferences.tsx

@@ -9,18 +9,40 @@ export interface IPreferences {
   showLoginIcon: boolean;
 }
 
+const { condaStoreConfig = {} } =
+  typeof window !== "undefined" && (window as any);
+
 export const prefDefault: Readonly<IPreferences> = {
-  apiUrl: process.env.REACT_APP_API_URL ?? "http://localhost:5000/conda-store/",
+  apiUrl:
+    process.env.REACT_APP_API_URL ??
+    condaStoreConfig.REACT_APP_API_URL ??
+    "http://localhost:5000/conda-store/",
+
   authMethod:
     (process.env.REACT_APP_AUTH_METHOD as IPreferences["authMethod"]) ??
+    (condaStoreConfig.REACT_APP_AUTH_METHOD as IPreferences["authMethod"]) ??
     "cookie",
-  authToken: process.env.REACT_APP_AUTH_TOKEN ?? "",
+
+  authToken:
+    process.env.REACT_APP_AUTH_TOKEN ??
+    condaStoreConfig.REACT_APP_AUTH_TOKEN ??
+    "",
+
   loginUrl:
     process.env.REACT_APP_LOGIN_PAGE_URL ??
+    condaStoreConfig.REACT_APP_LOGIN_PAGE_URL ??
     "http://localhost:5000/conda-store/login?next=",
-  styleType: process.env.REACT_APP_STYLE_TYPE ?? "grayscale",
+
+  styleType:
+    process.env.REACT_APP_STYLE_TYPE ??
+    condaStoreConfig.REACT_APP_STYLE_TYPE ??
+    "grayscale",
+
   showLoginIcon: process.env.REACT_APP_SHOW_LOGIN_ICON
     ? JSON.parse(process.env.REACT_APP_SHOW_LOGIN_ICON)
+    : condaStoreConfig !== undefined &&
+      condaStoreConfig.REACT_APP_SHOW_LOGIN_ICON !== undefined
+    ? JSON.parse(condaStoreConfig.REACT_APP_SHOW_LOGIN_ICON)
     : true
 };