feat: add runtime env injection and wire app to use it

- add runtime env generator script and shell wrappers for local/test
  and container startup
- generate public env config files and load env-config.js before
  app scripts
- add getEnvValue helper with runtime window._env_ fallback to
  process.env
- migrate Matomo, Sentry, feature flags, registration utils, and
  runtime config reads to getEnvValue
- update Dockerfile to include scripts, run env generation on startup,
  and use pnpm install flow
- run runtime env generation in dev/start/test scripts and document
  the workflow
- update ignore and coverage settings for generated/runtime scripts

Refs: LINK-2574

Author: jorilindell

.dockerignore

@@ -4,6 +4,8 @@
 !.sentryclirc
 !public
 !src
+!scripts
+!scripts/**
 !next-i18next.config.js
 !next.config.js
 !package.json

.env

@@ -4,16 +4,25 @@ NEXT_ENV=development
 NEXTAUTH_SECRET=secret
 NEXTAUTH_URL=http://localhost:3001
 
-
+# OIDC configuration
 OIDC_ISSUER=https://tunnistus.hel.fi/auth/realms/helsinki-tunnistus
 OIDC_API_TOKENS_URL=https://tunnistus.hel.fi/auth/realms/helsinki-tunnistus/protocol/openid-connect/token/
 OIDC_CLIENT_ID=linkedregistrations-ui
 OIDC_CLIENT_SECRET=
 OIDC_LINKED_EVENTS_API_SCOPE=linkedevents-api
 
-SENTRY_IGNORE_API_RESOLUTION_ERROR=true
+# Sentry configuration
 SENTRY_PROJECT=linkedregistrations-ui
 
+NEXT_PUBLIC_SENTRY_ENVIRONMENT=local
+NEXT_PUBLIC_SENTRY_DSN=
+NEXT_PUBLIC_SENTRY_TRACES_SAMPLE_RATE=0
+NEXT_PUBLIC_SENTRY_TRACE_PROPAGATION_TARGETS=
+NEXT_PUBLIC_SENTRY_REPLAYS_SESSION_SAMPLE_RATE=0
+NEXT_PUBLIC_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE=0
+NEXT_PUBLIC_SENTRY_RELEASE=
+
+# Matomo configuration
 NEXT_PUBLIC_MATOMO_URL=//matomo.hel.fi/
 NEXT_PUBLIC_MATOMO_SITE_ID=70
 NEXT_PUBLIC_MATOMO_JS_TRACKER_FILE=matomo.js
@@ -23,6 +32,7 @@ NEXT_PUBLIC_MATOMO_ENABLED=false
 NEXT_PUBLIC_LINKED_EVENTS_URL=https://linkedevents-api.dev.hel.ninja/linkedevents-dev/v1
 NEXT_PUBLIC_WEB_STORE_INTEGRATION_ENABLED=false
 NEXT_PUBLIC_WEB_STORE_API_BASE_URL=https://checkout-test-api.test.hel.ninja/v1
+NEXT_PUBLIC_USE_IMAGE_PROXY=false
 
 NEXT_PUBLIC_ATTENDANCE_LIST_LOGIN_METHODS=suomi_fi
 NEXT_PUBLIC_SIGNUPS_LOGIN_METHODS=helsinki_tunnus,helsinkiad

.gitignore

@@ -32,6 +32,10 @@ yarn-error.log*
 .env.test.local
 .env.production.local
 
+# generated runtime env files
+public/env-config.js
+public/test-env-config.js
+
 # vercel
 .vercel
 

Dockerfile

@@ -17,6 +17,7 @@ USER default
 RUN pnpm install --frozen-lockfile --ignore-scripts
 
 COPY .env* next-i18next.config.js next.config.js sentry.edge.config.ts sentry.properties sentry.server.config.ts tsconfig.json /app/
+COPY /scripts/ /app/scripts
 COPY /public/ /app/public
 COPY /src/ /app/src
 
@@ -40,44 +41,15 @@ USER default:root
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry during the build.
-ENV NEXT_TELEMETRY_DISABLED 1
-
-# Set environmental variables (when building image on Azure) 
-# specified in pipelines/library files 
-ARG NEXT_PUBLIC_LINKED_EVENTS_URL
-ARG NEXT_PUBLIC_SENTRY_DSN
-ARG NEXT_PUBLIC_SENTRY_TRACES_SAMPLE_RATE
-ARG NEXT_PUBLIC_SENTRY_TRACE_PROPAGATION_TARGETS
-ARG NEXT_PUBLIC_SENTRY_REPLAYS_SESSION_SAMPLE_RATE
-ARG NEXT_PUBLIC_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE
-ARG NEXT_PUBLIC_SENTRY_RELEASE
-ARG NEXT_PUBLIC_SENTRY_ENVIRONMENT
-ARG NEXT_PUBLIC_ATTENDANCE_LIST_LOGIN_METHODS
-ARG NEXT_PUBLIC_SIGNUPS_LOGIN_METHODS
-
-ARG OIDC_ISSUER
-ARG OIDC_API_TOKENS_URL
-ARG OIDC_CLIENT_ID
-ARG OIDC_CLIENT_SECRET
-ARG OIDC_LINKED_EVENTS_API_SCOPE
+ENV NEXT_TELEMETRY_DISABLED=1
 
+# Build-time values injected by Azure pipelines (via --build-arg).
+ARG PORT
 ARG SENTRY_PROJECT
-
-ARG NEXT_PUBLIC_MATOMO_URL
-ARG NEXT_PUBLIC_MATOMO_SITE_ID
-ARG NEXT_PUBLIC_MATOMO_JS_TRACKER_FILE
-ARG NEXT_PUBLIC_MATOMO_PHP_TRACKER_FILE
-ARG NEXT_PUBLIC_MATOMO_ENABLED
-
-ARG NEXTAUTH_SECRET
-ARG NEXTAUTH_URL
-
+ARG SENTRY_ORG
+ARG SENTRY_URL
 ARG NEXT_ENV
-
-ARG NEXT_PUBLIC_WEB_STORE_INTEGRATION_ENABLED
-ARG NEXT_PUBLIC_WEB_STORE_API_BASE_URL
-
-ARG NEXT_PUBLIC_USE_IMAGE_PROXY
+ARG NEXT_PUBLIC_SENTRY_RELEASE
 
 # When building locally with Docker Compose, the auth token can be provided using SENTRY_AUTH_TOKEN environment variable.
 # Our AzDO pipeline uses /secrets/SENTRY_AUTH_TOKEN to pass the auth token so this works there too.
@@ -96,10 +68,16 @@ RUN microdnf install -y shadow-utils && microdnf clean all && \
 
 USER default
 
-ENV NODE_ENV production
-ENV NEXT_TELEMETRY_DISABLED 1
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+COPY --from=builder --chown=default:root /app/public ./public
+COPY --from=builder --chown=default:root /app/scripts ./scripts
 
-COPY --from=builder /app/public ./public
+# Allow OpenShift/Azure-style random non-root users (gid 0) to write runtime env file.
+RUN chmod -R g=u /app/public /app/scripts && \
+    rm -f /app/public/env-config.js && \
+    ln -s /tmp/env-config.js /app/public/env-config.js
 
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
@@ -109,4 +87,5 @@ COPY --from=builder --chown=default:nodejs /app/.next/static ./.next/static
 # Expose port
 EXPOSE $PORT
 
-CMD node server.js -p ${PORT}
+ENTRYPOINT ["sh", "/app/scripts/docker-entrypoint.sh"]
+CMD ["sh", "-c", "node server.js -p ${PORT}"]

README.md

@@ -64,7 +64,7 @@ Run `pnpm i && pnpm dev`
 
 ## Running development environment locally without docker
 
-Run `pnpm i && pnpm start`
+Run `pnpm i && pnpm dev`
 
 ## Configurable environment variables
 
@@ -134,7 +134,7 @@ In the project directory, you can run:
 ### `pnpm dev`
 
 Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Open [http://localhost:3001](http://localhost:3001) to view it in the browser.
 
 The page will reload if you make edits.<br />
 You will also see any lint errors in the console.
@@ -146,7 +146,7 @@ Builds the app for production to the `build` folder.
 ### `pnpm start`
 
 Runs the built app in the production mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Open [http://localhost:3001](http://localhost:3001) to view it in the browser.
 
 ### `pnpm test`
 
@@ -156,33 +156,25 @@ Launches the test runner in the interactive watch mode.
 
 Run tests and generate coverage report
 
+### `pnpm update-runtime-env`
+
+Generates `public/env-config.js` (and in test mode `public/test-env-config.js`) from runtime environment variables.
+This is run automatically by `pnpm dev`, `pnpm start`, `pnpm test`, and `pnpm test:coverage`, but can also be run manually when needed.
+
 ## Debugging
 
 ### Debugging project in VS Code
 
 To debug in VS Code:
 
-1. Install the "Debugger for Chrome" extension to VS Code
-2. Run `pnpm dev`
+1. Run `pnpm dev`
+2. Use one of the provided Next.js debug configurations in VS Code
 3. Set a breakpoint
-4. Run "Chrome" debug configuration in VS Code
-5. Reload the project in your browser
+4. Reload the project in your browser
 
 ### Debugging Tests in VS Code
 
 No plugin is needed.
 
 1. Set a breakpoint
 2. Run the "Run tests" debugger configuration
-
-### Debugging Tests in Chrome
-
-We recommend using VS Code's debugger.
-
-1. Place a `debugger;` statement in any test
-2. Run pnpm `test:debug`
-3. Open `about:inspect` in Chrome
-4. Select `inspect` on you process, press Play and you're good to go.
-
-See more detailed instructions here:
-https://create-react-app.dev/docs/debugging-tests#debugging-tests-in-chrome

package.json

@@ -8,17 +8,18 @@
     "pnpm": ">=11.1.3"
   },
   "scripts": {
-    "dev": "next dev -p 3001",
+    "dev": "pnpm update-runtime-env && next dev -p 3001",
     "build": "next build",
-    "start": "next start -p 3001",
+    "start": "pnpm update-runtime-env && next start -p 3001",
     "lint": "eslint .",
     "prepare": "husky",
-    "test": "TZ=UTC vitest --watch",
-    "test:coverage": "TZ=UTC vitest run --coverage",
+    "test": "NODE_ENV=test pnpm update-runtime-env && TZ=UTC vitest --watch",
+    "test:coverage": "NODE_ENV=test pnpm update-runtime-env && TZ=UTC vitest run --coverage",
     "test:e2e:install": "playwright install",
     "test:e2e:ci": "playwright test",
     "test:e2e:start": "playwright test",
-    "test:e2e:record": "playwright codegen https://linkedregistrations.dev.hel.ninja/"
+    "test:e2e:record": "playwright codegen https://linkedregistrations.dev.hel.ninja/",
+    "update-runtime-env": "node scripts/update-runtime-env.js . ./public"
   },
   "dependencies": {
     "@sentry/nextjs": "^10.47.0",

scripts/docker-entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+set -eu
+
+sh ./scripts/env.sh /app /app/public
+
+exec "$@"

scripts/env.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+
+set -eu
+
+ENVDIR=${1:-.}
+TARGETDIR=${2:-public}
+
+node "$ENVDIR/scripts/update-runtime-env.js" "$ENVDIR" "$TARGETDIR"

scripts/update-runtime-env.js

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const USE_TEST_ENV = process.env.NODE_ENV === 'test';
+const PUBLIC_PREFIX = 'NEXT_PUBLIC_';
+
+const envDir = process.argv[2] || process.cwd();
+const targetDir = process.argv[3] || path.resolve(process.cwd(), 'public');
+const configFile = USE_TEST_ENV ? 'test-env-config.js' : 'env-config.js';
+const targetFile = path.resolve(targetDir, configFile);
+
+const envFiles = USE_TEST_ENV ? ['.env', '.env.test'] : ['.env', '.env.local'];
+
+const parseEnvContent = (content) => {
+  const parsed = {};
+
+  content.split(/\r?\n/).forEach((line) => {
+    const trimmed = line.trim();
+
+    if (!trimmed || trimmed.startsWith('#')) {
+      return;
+    }
+
+    const separatorIndex = trimmed.indexOf('=');
+
+    if (separatorIndex < 0) {
+      return;
+    }
+
+    const key = trimmed.slice(0, separatorIndex).trim();
+    let value = trimmed.slice(separatorIndex + 1).trim();
+
+    if (
+      (value.startsWith('"') && value.endsWith('"')) ||
+      (value.startsWith("'") && value.endsWith("'"))
+    ) {
+      value = value.slice(1, -1);
+    }
+
+    parsed[key] = value;
+  });
+
+  return parsed;
+};
+
+const loadEnvFromFiles = () => {
+  const env = {};
+
+  envFiles.forEach((fileName) => {
+    const filePath = path.resolve(envDir, fileName);
+    if (!fs.existsSync(filePath)) {
+      return;
+    }
+
+    const parsed = parseEnvContent(fs.readFileSync(filePath, 'utf8'));
+    Object.assign(env, parsed);
+  });
+
+  return env;
+};
+
+const pickPublicEnv = (source) => {
+  return Object.fromEntries(
+    Object.entries(source).filter(([key, value]) => {
+      return key.startsWith(PUBLIC_PREFIX) && value !== undefined;
+    })
+  );
+};
+
+const start = async () => {
+  try {
+    const fileEnv = loadEnvFromFiles();
+    const processPublicEnv = pickPublicEnv(process.env);
+    const defaultPublicEnv = pickPublicEnv(fileEnv);
+
+    const envVariables = {
+      ...defaultPublicEnv,
+      ...processPublicEnv,
+      NODE_ENV: process.env.NODE_ENV || (USE_TEST_ENV ? 'test' : 'development'),
+    };
+
+    fs.mkdirSync(targetDir, { recursive: true });
+    fs.writeFileSync(
+      targetFile,
+      `window._env_ = ${JSON.stringify(envVariables, null, 2)};\n`,
+      'utf8'
+    );
+
+    console.log(`Runtime env file created: ${targetFile}`);
+  } catch (error) {
+    console.error(error && error.message ? error.message : error);
+    process.exit(1);
+  }
+};
+
+start();

sonar-project.properties

@@ -20,5 +20,6 @@ sonar.test.inclusions= \
   **/*.test.tsx
 
 sonar.coverage.exclusions= \
+  scripts/**/*, \
   src/tests/**/*, \
   src/utils/mockDataUtils.ts