utilize better RUNTIME environment variables

felixevers · felixevers · commit c5088eb392e9 · 2025-12-08T20:24:46.000+01:00
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -75,8 +75,8 @@ services:
     ports:
       - "3000:80"
     environment:
-      ISSUER_URI: "http://localhost:8080/realms/tasks"
-      CLIENT_ID: "tasks-web"
+      RUNTIME_ISSUER_URI: "http://localhost:8080/realms/tasks"
+      RUNTIME_CLIENT_ID: "tasks-web"
     depends_on:
       - backend
 
diff --git a/web/.dockerignore b/web/.dockerignore
@@ -0,0 +1,3 @@
+build/
+node_modules/
+.env*
diff --git a/web/Dockerfile b/web/Dockerfile
@@ -1,47 +1,43 @@
 FROM node:22-alpine AS base
 
-
 FROM base AS deps
-
 RUN apk add --no-cache libc6-compat
-
 WORKDIR /app
-
 COPY package.json package-lock.json ./
-
 RUN npm ci
 
-
 FROM base AS builder
-
 WORKDIR /app
-
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-
 RUN npm run build
 
-
 FROM base
-
 WORKDIR /app
-
 ENV NODE_ENV=production
 ENV PORT=80
 ENV HOSTNAME="0.0.0.0"
 
-RUN apk add --no-cache libcap \
-    && setcap 'cap_net_bind_service=+ep' /usr/local/bin/node
+RUN apk add --no-cache libcap && setcap 'cap_net_bind_service=+ep' /usr/local/bin/node
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
-COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
 COPY --from=builder --chown=nextjs:nodejs /app/build/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/build/static ./build/static
 
-USER nextjs
+RUN printf '#!/bin/sh\n\
+echo "window.__ENV = {" > /app/public/env-config.js\n\
+env | grep "^RUNTIME_" | while read -r line; do\n\
+  key=$(echo "$line" | cut -d "=" -f 1)\n\
+  val=$(echo "$line" | cut -d "=" -f 2-)\n\
+  echo "  \"$key\": \"$val\"," >> /app/public/env-config.js\n\
+done\n\
+echo "}" >> /app/public/env-config.js\n\
+exec "$@"' > /app/entrypoint.sh && chmod +x /app/entrypoint.sh
 
+USER nextjs
 EXPOSE 80
-
+ENTRYPOINT ["/app/entrypoint.sh"]
 CMD ["node", "server.js"]
diff --git a/web/api/gql/fetcher.ts b/web/api/gql/fetcher.ts
@@ -17,13 +17,10 @@ export const fetcher = <TData, TVariables extends object | undefined>(
 
     const headers: HeadersInit = {};
 
-    console.log(token, user);
-
     if (token) {
       headers['Authorization'] = `Bearer ${token}`;
       document.cookie = `access_token=${token}; path=/; secure; samesite=strict`;
     }
-    console.log(headers);
 
     const hasFile =
       variables &&
diff --git a/web/environment.d.ts b/web/environment.d.ts
diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
@@ -3,20 +3,25 @@ import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 class MyDocument extends Document {
   render() {
-    const publicEnv = Object.keys(publicEnvSchema.shape).reduce((acc, key) => {
+    const isDev = process.env.NODE_ENV !== 'production'
+
+    const devEnv = isDev ? Object.keys(publicEnvSchema.shape).reduce((acc, key) => {
       acc[key] = process.env[key]
       return acc
-    }, {} as Record<string, string | undefined>)
-
+    }, {} as Record<string, string | undefined>) : {}
     return (
       <Html>
         <Head>
-          <script
-            id="env-vars"
-            dangerouslySetInnerHTML={{
-              __html: `window.__ENV = ${JSON.stringify(publicEnv)}`,
-            }}
-          />
+          {isDev ? (
+            <script
+              id="env-vars-dev"
+              dangerouslySetInnerHTML={{
+                __html: `window.__ENV = ${JSON.stringify(devEnv)}`,
+              }}
+            />
+          ) : (
+            <script src="/env-config.js" />
+          )}
           <meta name="og:title" property="og:title" content="helpwave tasks" />
           <meta name="description" content="The first open-source team management platform for healthcare workers" />
           <meta property="og:description" content="The first open-source team management platform for healthcare workers" />
diff --git a/web/utils/config.ts b/web/utils/config.ts
@@ -1,47 +1,44 @@
 import { z } from 'zod'
 
 export const publicEnvSchema = z.object({
-  NODE_ENV: z.literal('production').or(z.literal('development')).default('production'),
-  NEXT_PUBLIC_SHOW_STAGING_DISCLAIMER_MODAL: z.literal('true').or(z.literal('false')).optional(),
-  NEXT_PUBLIC_FEATURES_FEED_URL: z.string().url().default('https://cdn.helpwave.de/feed.json'),
-  NEXT_PUBLIC_IMPRINT_URL: z.string().url().default('https://cdn.helpwave.de/imprint.html'),
-  NEXT_PUBLIC_PRIVACY_URL: z.string().url().default('https://cdn.helpwave.de/privacy.html'),
-  NEXT_PUBLIC_GRAPHQL_ENDPOINT: z.string().url().default('http://localhost:8000/graphql'),
-  NEXT_PUBLIC_ISSUER_URI: z.string().url().default('http://localhost:8080/realms/tasks'),
-  NEXT_PUBLIC_CLIENT_ID: z.string().min(1).default('tasks-web'),
-  NEXT_PUBLIC_REDIRECT_URI: z.string().min(1).default('http://localhost:3000/auth/callback'),
-  NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI: z.string().min(1).default('http://localhost:3000/'),
+  NODE_ENV: z.string().default('production'),
+  RUNTIME_SHOW_STAGING_DISCLAIMER_MODAL: z.literal('true').or(z.literal('false')).optional(),
+  RUNTIME_FEATURES_FEED_URL: z.string().url().default('https://cdn.helpwave.de/feed.json'),
+  RUNTIME_IMPRINT_URL: z.string().url().default('https://cdn.helpwave.de/imprint.html'),
+  RUNTIME_PRIVACY_URL: z.string().url().default('https://cdn.helpwave.de/privacy.html'),
+  RUNTIME_GRAPHQL_ENDPOINT: z.string().url().default('http://localhost:8000/graphql'),
+  RUNTIME_ISSUER_URI: z.string().url().default('http://localhost:8080/realms/tasks'),
+  RUNTIME_CLIENT_ID: z.string().min(1).default('tasks-web'),
+  RUNTIME_REDIRECT_URI: z.string().min(1).default('http://localhost:3000/auth/callback'),
+  RUNTIME_POST_LOGOUT_REDIRECT_URI: z.string().min(1).default('http://localhost:3000/'),
 })
 
 const configSchema = publicEnvSchema.transform(obj => ({
   env: obj.NODE_ENV,
-  showStagingDisclaimerModal: obj.NEXT_PUBLIC_SHOW_STAGING_DISCLAIMER_MODAL === 'true',
-  featuresFeedUrl: obj.NEXT_PUBLIC_FEATURES_FEED_URL,
-  imprintUrl: obj.NEXT_PUBLIC_IMPRINT_URL,
-  privacyUrl: obj.NEXT_PUBLIC_PRIVACY_URL,
-  graphqlEndpoint: obj.NEXT_PUBLIC_GRAPHQL_ENDPOINT,
+  showStagingDisclaimerModal: obj.RUNTIME_SHOW_STAGING_DISCLAIMER_MODAL === 'true',
+  featuresFeedUrl: obj.RUNTIME_FEATURES_FEED_URL,
+  imprintUrl: obj.RUNTIME_IMPRINT_URL,
+  privacyUrl: obj.RUNTIME_PRIVACY_URL,
+  graphqlEndpoint: obj.RUNTIME_GRAPHQL_ENDPOINT,
   auth: {
-    issuer: obj.NEXT_PUBLIC_ISSUER_URI,
-    clientId: obj.NEXT_PUBLIC_CLIENT_ID,
-    redirect_uri: obj.NEXT_PUBLIC_REDIRECT_URI,
-    post_logout_redirect_uri: obj.NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI,
+    issuer: obj.RUNTIME_ISSUER_URI,
+    clientId: obj.RUNTIME_CLIENT_ID,
+    redirect_uri: obj.RUNTIME_REDIRECT_URI,
+    post_logout_redirect_uri: obj.RUNTIME_POST_LOGOUT_REDIRECT_URI,
   }
 }))
 
 const getConfig = () => {
-  const localOverrides: Partial<z.output<typeof configSchema>> = {}
-
-  const source = (typeof window !== 'undefined' && window.__ENV)
-    ? window.__ENV
-    : process.env
+  if (typeof window !== 'undefined' && window.__ENV) {
+    return configSchema.parse({
+      ...window.__ENV,
+      NODE_ENV: process.env.NODE_ENV
+    })
+  }
 
-  const maybeConfig = configSchema.safeParse(source)
 
-  if (!maybeConfig.success) {
-    throw new Error(`Invalid environment variables:\n${maybeConfig.error}`)
-  } else {
-    return Object.assign(maybeConfig.data, localOverrides)
-  }
+  const result = publicEnvSchema.safeParse(process.env)
+  return configSchema.parse(result.data)
 }
 
 export { getConfig }
