Inject API base URL at runtime via VALIDATION_SERVICE_BASE_URL env var

apdavison · apdavison · commit 10289a6efdf4 · 2026-04-03T17:11:40.000+02:00
- globals.js reads baseUrl from window.__env?.baseUrl (set by env-config.js)
- index.html loads /env-config.js before the app bundle
- vite.config.js serves /env-config.js from VALIDATION_SERVICE_BASE_URL in dev
- docker-entrypoint.sh writes env-config.js at container start
- Dockerfile.staging: add entrypoint, make html dir writable, remove globals-staging.js copy
- Delete globals-staging.js (no longer needed)
diff --git a/apps/deployment/Dockerfile.staging b/apps/deployment/Dockerfile.staging
@@ -13,7 +13,6 @@ COPY model_catalog/package-lock.json ./
 RUN npm ci --legacy-peer-deps
 
 COPY model_catalog ./
-COPY model_catalog/src/globals-staging.js ./src/globals.js
 RUN node --max-old-space-size=4096 `which npm` run build
 
 WORKDIR /curation-dashboard
@@ -28,16 +27,21 @@ RUN npm run build
 # production environment
 FROM docker-registry.ebrains.eu/model-catalog/nginx:stable-alpine
 
-# Make nginx dirs writable for non-root user (UID 1001)
-RUN chown -R 1001:0 /var/cache/nginx /var/log/nginx /etc/nginx/conf.d && \
-    chmod -R g+w /var/cache/nginx /var/log/nginx /etc/nginx/conf.d && \
-    sed -i 's/^user  nginx;/#user  nginx;/' /etc/nginx/nginx.conf && \
+RUN sed -i 's/^user  nginx;/#user  nginx;/' /etc/nginx/nginx.conf && \
     sed -i 's|/var/run/nginx.pid|/tmp/nginx.pid|' /etc/nginx/nginx.conf
 
 COPY deployment/nginx-app-staging.conf /etc/nginx/conf.d/default.conf
 COPY --from=build /model-catalog/dist /usr/share/nginx/html/model-catalog
 COPY --from=build /curation-dashboard/dist /usr/share/nginx/html/curation-dashboard
 
+# Make nginx dirs writable for non-root user (UID 1001) — must come after COPY to preserve ownership
+RUN chown -R 1001:0 /var/cache/nginx /var/log/nginx /etc/nginx/conf.d /usr/share/nginx/html && \
+    chmod -R g+w /var/cache/nginx /var/log/nginx /etc/nginx/conf.d /usr/share/nginx/html
+
+COPY deployment/docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh
+
 EXPOSE 8080
 USER 1001
+ENTRYPOINT ["/docker-entrypoint.sh"]
 CMD ["nginx", "-g", "daemon off;"]
diff --git a/apps/deployment/docker-entrypoint.sh b/apps/deployment/docker-entrypoint.sh
@@ -0,0 +1,8 @@
+#!/bin/sh
+set -e
+
+cat > /usr/share/nginx/html/model-catalog/env-config.js <<EOF
+window.__env = { baseUrl: "${VALIDATION_SERVICE_BASE_URL:-https://model-validation-api.apps.ebrains.eu}" };
+EOF
+
+exec "$@"
diff --git a/apps/model_catalog/index.html b/apps/model_catalog/index.html
@@ -47,6 +47,7 @@
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
+        <script src="/env-config.js"></script>
         <script type="module" src="/src/index.jsx"></script>
     </body>
 </html>
diff --git a/apps/model_catalog/src/globals-staging.js b/apps/model_catalog/src/globals-staging.js
diff --git a/apps/model_catalog/src/globals.js b/apps/model_catalog/src/globals.js
@@ -1,6 +1,6 @@
 // NOTE: dummy data (in 'dev_data' directory) for DevMode is from v1 APIs; needs to be updated for v2 usage
 export const DevMode = false; // TODO: change to false for production
-export const baseUrl = "https://model-validation-api.apps.ebrains.eu";
+export const baseUrl = window.__env?.baseUrl ?? "https://model-validation-api.apps.ebrains.eu";
 export const querySizeLimit = 1000000;
 export const collaboratoryOrigin = "https://wiki.ebrains.eu";
 export const hashChangedTopic = "/clb/community-app/hashchange";
diff --git a/apps/model_catalog/vite.config.js b/apps/model_catalog/vite.config.js
@@ -11,6 +11,16 @@ export default defineConfig({
     react(),
     nodePolyfills(),
     commonjs(),
+    {
+      name: 'dev-env-config',
+      configureServer(server) {
+        server.middlewares.use('/env-config.js', (req, res) => {
+          res.setHeader('Content-Type', 'application/javascript');
+          const baseUrl = process.env.VALIDATION_SERVICE_BASE_URL || "https://model-validation-api.apps.dev-adacloud.ebrains.eu";
+          res.end(`window.__env = { baseUrl: "${baseUrl}" };`);
+        });
+      },
+    },
     {
       name: 'dev-cors-proxy',
       configureServer(server) {
