BitcreditProtocol · cleot · Dec 3, 2025 · Dec 2, 2025 · Dec 2, 2025 · Dec 2, 2025
diff --git a/.env.example b/.env.example
@@ -8,3 +8,4 @@ VITE_API_BASE_URL=http://127.0.0.1:4242
 VITE_KEYCLOAK_URL=http://localhost:8080/
 VITE_KEYCLOAK_REALM=dev
 VITE_KEYCLOAK_CLIENT_ID=bff-dashboard
+VITE_API_MOCKING_ENABLED=false
diff --git a/Dockerfile b/Dockerfile
@@ -19,8 +19,13 @@ RUN npm run build -- --mode=${VITE_MODE}
 
 FROM nginx:1.27.5-alpine@sha256:65645c7bb6a0661892a8b03b89d0743208a18dd2f3f17a54ef4b76fb8e2f2a10
 
+RUN apk add --no-cache jq
+
 COPY --from=builder /app/dist /usr/share/nginx/html
 
+COPY docker/entrypoint.d/ /docker-entrypoint.d/
+RUN chmod +x /docker-entrypoint.d/*.sh
+
 COPY docker/nginx/snippets/proxy-params.conf /etc/nginx/snippets/proxy-params.conf
 # each time nginx is started it will perform variable substition in all template
 # files found in `/etc/nginx/templates/*.template`, and copy the results (without

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -13,6 +13,8 @@ services:
       - VITE_KEYCLOAK_URL=${VITE_KEYCLOAK_URL}
       - VITE_KEYCLOAK_REALM=${VITE_KEYCLOAK_REALM}
       - VITE_KEYCLOAK_CLIENT_ID=${VITE_KEYCLOAK_CLIENT_ID}
+      - VITE_API_MOCKING_ENABLED=${VITE_API_MOCKING_ENABLED}
+      - VITE_BITCR_DEV_INCLUDE_CROWDIN_IN_CONTEXT_TOOLING=${VITE_BITCR_DEV_INCLUDE_CROWDIN_IN_CONTEXT_TOOLING}
     healthcheck:
       test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:80"]
       interval: 30s

diff --git a/docker/entrypoint.d/00-env-config.sh b/docker/entrypoint.d/00-env-config.sh
@@ -0,0 +1,15 @@
+#!/usr/bin/env sh
+set -e
+
+JSON_ENV=$(jq -n \
+  --arg VITE_API_BASE_URL "$VITE_API_BASE_URL" \
+  --arg VITE_API_MOCKING_ENABLED "$VITE_API_MOCKING_ENABLED" \
+  --arg VITE_KEYCLOAK_URL "$VITE_KEYCLOAK_URL" \
+  --arg VITE_KEYCLOAK_REALM "$VITE_KEYCLOAK_REALM" \
+  --arg VITE_KEYCLOAK_CLIENT_ID "$VITE_KEYCLOAK_CLIENT_ID" \
+  --arg VITE_BITCR_DEV_INCLUDE_CROWDIN_IN_CONTEXT_TOOLING "$VITE_BITCR_DEV_INCLUDE_CROWDIN_IN_CONTEXT_TOOLING" \
+  '{VITE_API_BASE_URL: $VITE_API_BASE_URL, VITE_API_MOCKING_ENABLED: $VITE_API_MOCKING_ENABLED, VITE_KEYCLOAK_URL: $VITE_KEYCLOAK_URL, VITE_KEYCLOAK_REALM: $VITE_KEYCLOAK_REALM, VITE_KEYCLOAK_CLIENT_ID: $VITE_KEYCLOAK_CLIENT_ID, VITE_BITCR_DEV_INCLUDE_CROWDIN_IN_CONTEXT_TOOLING: $VITE_BITCR_DEV_INCLUDE_CROWDIN_IN_CONTEXT_TOOLING}')
+
+cat <<EOF > /usr/share/nginx/html/config.js
+window.__ENV__ = ${JSON_ENV};
+EOF
-EOF
+EOF
+
+if [ ! -f /usr/share/nginx/html/config.js ]; then
+  echo "Error: Failed to generate config.js"
+  exit 1
+fi
-EOF
+EOF
+
+if [ ! -f /usr/share/nginx/html/config.js ]; then
+  echo "Error: Failed to generate config.js"
+  exit 1
+fi
diff --git a/docker/nginx/templates/default.conf.template b/docker/nginx/templates/default.conf.template
@@ -49,6 +49,10 @@ server {
         add_header Cache-Control "no-store";
     }
 
+    location = /config.js {
+        add_header Cache-Control "no-store";
+    }
+
     location ~* \.(?:json)$ {
         expires 1d;
         add_header Cache-Control "public";

diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <script src="/config.js"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/public/config.js b/public/config.js
@@ -0,0 +1 @@
+window.__ENV__ = window.__ENV__ || {}
diff --git a/src/constants/meta.ts b/src/constants/meta.ts
@@ -1,6 +1,8 @@
+import { env } from "@/lib/env"
+
 export default {
-  devModeEnabled: import.meta.env.DEV,
-  apiBaseUrl: import.meta.env.VITE_API_BASE_URL as string,
-  apiMocksEnabled: import.meta.env.VITE_API_MOCKING_ENABLED === "true",
-  crowdinInContextToolingEnabled: import.meta.env.VITE_BITCR_DEV_INCLUDE_CROWDIN_IN_CONTEXT_TOOLING === "true",
+  devModeEnabled: env.devModeEnabled,
+  apiBaseUrl: env.apiBaseUrl,
+  apiMocksEnabled: env.apiMocksEnabled,
+  crowdinInContextToolingEnabled: env.crowdinInContextToolingEnabled,
 }
diff --git a/src/keycloak.tsx b/src/keycloak.tsx
@@ -1,9 +1,10 @@
 import Keycloak from "keycloak-js"
+import { env } from "@/lib/env"
 
 const keycloak = new Keycloak({
-  url: import.meta.env.VITE_KEYCLOAK_URL as string,
-  realm: import.meta.env.VITE_KEYCLOAK_REALM as string,
-  clientId: import.meta.env.VITE_KEYCLOAK_CLIENT_ID as string,
+  url: env.keycloakUrl,
+  realm: env.keycloakRealm,
+  clientId: env.keycloakClientId,
 })
 
 export const initKeycloak = async (): Promise<boolean> => {

diff --git a/src/lib/api-client.ts b/src/lib/api-client.ts
@@ -1,9 +1,10 @@
 import { client as heyApiClient } from "@/generated/client/client.gen"
 import * as sdk from "@/generated/client/sdk.gen"
+import { env } from "@/lib/env"
 import keycloak from "../keycloak"
 
 heyApiClient.setConfig({
-  baseUrl: import.meta.env.VITE_API_BASE_URL as string,
+  baseUrl: env.apiBaseUrl,
 })
 
 // Add the auth token interceptor

diff --git a/src/lib/env.test.ts b/src/lib/env.test.ts
@@ -0,0 +1,86 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+
+const loadEnv = async () => {
+  const module = await import("./env")
+  return module.env
+}
+
+afterEach(() => {
+  vi.resetModules()
+  vi.unstubAllGlobals()
+  vi.unstubAllEnvs()
+})
+
+describe("env runtime resolution", () => {
+  it("prefers runtime env values when provided", async () => {
+    vi.stubEnv("VITE_API_BASE_URL", "https://fallback.example.com")
+    vi.stubEnv("VITE_KEYCLOAK_URL", "https://fallback-keycloak.example.com")
+    vi.stubEnv("VITE_KEYCLOAK_REALM", "fallback-realm")
+    vi.stubEnv("VITE_KEYCLOAK_CLIENT_ID", "fallback-client")
+
+    vi.stubGlobal("window", {
+      __ENV__: {
+        VITE_API_BASE_URL: "https://runtime.example.com",
+        VITE_API_MOCKING_ENABLED: "true",
+        VITE_KEYCLOAK_URL: "https://runtime-keycloak.example.com",
+        VITE_KEYCLOAK_REALM: "runtime-realm",
+        VITE_KEYCLOAK_CLIENT_ID: "runtime-client",
+        VITE_BITCR_DEV_INCLUDE_CROWDIN_IN_CONTEXT_TOOLING: "true",
+      },
+    })
+
+    const env = await loadEnv()
+
+    expect(env.apiBaseUrl).toBe("https://runtime.example.com")
+    expect(env.apiMocksEnabled).toBe(true)
+    expect(env.keycloakUrl).toBe("https://runtime-keycloak.example.com")
+    expect(env.keycloakRealm).toBe("runtime-realm")
+    expect(env.keycloakClientId).toBe("runtime-client")
+    expect(env.crowdinInContextToolingEnabled).toBe(true)
+  })
+
+  it("falls back to build-time env when runtime values are empty", async () => {
+    vi.stubEnv("VITE_API_BASE_URL", "https://fallback.example.com")
+    vi.stubEnv("VITE_API_MOCKING_ENABLED", "true")
+    vi.stubEnv("VITE_KEYCLOAK_URL", "https://fallback-keycloak.example.com")
+    vi.stubEnv("VITE_KEYCLOAK_REALM", "fallback-realm")
+    vi.stubEnv("VITE_KEYCLOAK_CLIENT_ID", "fallback-client")
+    vi.stubEnv("VITE_BITCR_DEV_INCLUDE_CROWDIN_IN_CONTEXT_TOOLING", "false")
+
+    vi.stubGlobal("window", {
+      __ENV__: {
+        VITE_API_BASE_URL: "",
+        VITE_API_MOCKING_ENABLED: "",
+        VITE_KEYCLOAK_URL: "",
+        VITE_KEYCLOAK_REALM: "",
+        VITE_KEYCLOAK_CLIENT_ID: "",
+        VITE_BITCR_DEV_INCLUDE_CROWDIN_IN_CONTEXT_TOOLING: "",
+      },
+    })
+
+    const env = await loadEnv()
+
+    expect(env.apiBaseUrl).toBe("https://fallback.example.com")
+    expect(env.apiMocksEnabled).toBe(true)
+    expect(env.keycloakUrl).toBe("https://fallback-keycloak.example.com")
+    expect(env.keycloakRealm).toBe("fallback-realm")
+    expect(env.keycloakClientId).toBe("fallback-client")
+    expect(env.crowdinInContextToolingEnabled).toBe(false)
+  })
+
+  it("handles SSR where window is undefined", async () => {
+    vi.stubEnv("VITE_API_BASE_URL", "https://fallback.example.com")
+    vi.stubEnv("VITE_KEYCLOAK_URL", "https://fallback-keycloak.example.com")
+    vi.stubEnv("VITE_KEYCLOAK_REALM", "fallback-realm")
+    vi.stubEnv("VITE_KEYCLOAK_CLIENT_ID", "fallback-client")
+
+    vi.stubGlobal("window", undefined)
+
+    const env = await loadEnv()
+
+    expect(env.apiBaseUrl).toBe("https://fallback.example.com")
+    expect(env.keycloakUrl).toBe("https://fallback-keycloak.example.com")
+    expect(env.keycloakRealm).toBe("fallback-realm")
+    expect(env.keycloakClientId).toBe("fallback-client")
+  })
+})
diff --git a/src/lib/env.ts b/src/lib/env.ts
@@ -0,0 +1,34 @@
+type RuntimeEnv = Partial<{
+  VITE_API_BASE_URL: string
+  VITE_API_MOCKING_ENABLED: string
+  VITE_KEYCLOAK_URL: string
+  VITE_KEYCLOAK_REALM: string
+  VITE_KEYCLOAK_CLIENT_ID: string
+  VITE_BITCR_DEV_INCLUDE_CROWDIN_IN_CONTEXT_TOOLING: string
+}>
+
+const runtimeEnv: RuntimeEnv =
+  typeof window !== "undefined" ? (window as { __ENV__?: RuntimeEnv }).__ENV__ ?? {} : {}
+
+const fallbackEnv = import.meta.env as ImportMetaEnv & RuntimeEnv
+
+const getEnvValue = <K extends keyof RuntimeEnv>(key: K): RuntimeEnv[K] | undefined => {
+  const value = runtimeEnv[key]
+
+  if (value !== undefined && value !== null && value !== "") {
+    return value
+  }
+
+  return fallbackEnv[key]
+}
+
+export const env = {
+  devModeEnabled: fallbackEnv.DEV,
+  apiBaseUrl: getEnvValue("VITE_API_BASE_URL")!,
+  apiMocksEnabled: (getEnvValue("VITE_API_MOCKING_ENABLED") ?? "false") === "true",
+  keycloakUrl: getEnvValue("VITE_KEYCLOAK_URL")!,
+  keycloakRealm: getEnvValue("VITE_KEYCLOAK_REALM")!,
+  keycloakClientId: getEnvValue("VITE_KEYCLOAK_CLIENT_ID")!,
+  crowdinInContextToolingEnabled:
+    (getEnvValue("VITE_BITCR_DEV_INCLUDE_CROWDIN_IN_CONTEXT_TOOLING") ?? "false") === "true",
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -58,3 +58,5 @@ void prepare().then(() => {
     </StrictMode>,
   )
 })
+
+export { App }
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,3 +58,5 @@ void prepare().then(() => { @@
         </StrictMode>,
       )
     })
+    export { App }