Add dynamic API_URL loading

Dockerfile

@@ -14,8 +14,9 @@ FROM nginx:1.20
 WORKDIR /usr/share/nginx/html
 
 RUN rm -rf ./*
-
+COPY entrypoint.sh .
 COPY --from=builder /app/build .
 COPY --from=builder /app/nginx.conf /etc/nginx/conf.d/default.conf
 
-ENTRYPOINT ["nginx", "-g", "daemon off;"]
+ENTRYPOINT [ "./entrypoint.sh" ]
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -29,7 +29,7 @@ The Docker-Image features a nginx server to enabled browser-routing in React.
 To start the Dashboard just run:
 
 ```
-docker run -p 80:80 ghcr.io/privacyengineering/hawk-core-monitor
+docker run -e API_URL=http://localhost:8000 -p 80:80 ghcr.io/privacyengineering/hawk-core-monitor
 ```
 
 **Note: The Dashboard needs a running Hawk-Service instance reverse-proxied on the same port by default.**

entrypoint.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+set -eo pipefail
+
+# Create api.json file with API_URL
+cat <<EOF > api.json
+{"apiUrl": "${API_URL}"}
+EOF
+
+exec "$@"

src/index.tsx

@@ -7,19 +7,39 @@ import {App} from "./layouts/App";
 
 const store = configureStore();
 export const useThunkDispatch = () => useDispatch<typeof store.dispatch>();
-export const URL_BASE = process.env.REACT_APP_API_URL || "";
+export let URL_BASE = "";
 export const HEADER_JSON = {
     'Accept': 'application/json',
     'Content-Type': 'application/json'
 };
 
-ReactDOM.render(
-    <React.StrictMode>
-        <Provider store={store}>
-            <BrowserRouter>
-                <App/>
-            </BrowserRouter>
-        </Provider>
-    </React.StrictMode>,
-    document.getElementById("root")
-);
+const fetchApiUrl = async () => {
+    const url = process.env.REACT_APP_API_URL;
+    if (!url) {
+        try {
+            const meta = await fetch("api.json").then(r => r.json())
+            if (meta?.apiUrl) {
+                return meta.apiUrl;
+            }
+        } catch (e) {
+            console.error("failed to fetch api url from api.json", e);
+        }
+    }
+    return url;
+}
+
+fetchApiUrl().then(url => {
+    console.log("fetched api url: ", url);
+    URL_BASE = url;
+
+    ReactDOM.render(
+        <React.StrictMode>
+            <Provider store={store}>
+                <BrowserRouter>
+                    <App/>
+                </BrowserRouter>
+            </Provider>
+        </React.StrictMode>,
+        document.getElementById("root")
+    );
+});