diff --git a/Dockerfile b/Dockerfile index 3a58bc5..fef42de 100644 --- a/Dockerfile +++ b/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;"] \ No newline at end of file +ENTRYPOINT [ "./entrypoint.sh" ] +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/README.md b/README.md index 5d265d2..fe5f0d7 100644 --- a/README.md +++ b/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.** diff --git a/entrypoint.sh b/entrypoint.sh new file mode 100755 index 0000000..7ba962c --- /dev/null +++ b/entrypoint.sh @@ -0,0 +1,9 @@ +#!/bin/bash +set -eo pipefail + +# Create api.json file with API_URL +cat < api.json +{"apiUrl": "${API_URL}"} +EOF + +exec "$@" diff --git a/src/index.tsx b/src/index.tsx index d6e90af..0736f37 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,19 +7,39 @@ import {App} from "./layouts/App"; const store = configureStore(); export const useThunkDispatch = () => useDispatch(); -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( - - - - - - - , - 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( + + + + + + + , + document.getElementById("root") + ); +}); \ No newline at end of file