From aa399bf035d4c0f2702c2adf296865ec99e03fbb Mon Sep 17 00:00:00 2001 From: Janis Date: Sun, 7 Dec 2025 21:30:59 +0100 Subject: [PATCH] feat: FRO-28 Integrate Frontend Build as a seperate image (#2) Reviewed-on: https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/pulls/2 Co-authored-by: Janis Co-committed-by: Janis --- Dockerfile | 24 ++++++++++++++++++++++++ docker-entrypoint.sh | 19 +++++++++++++++++++ env.d.ts | 6 ++++++ index.html | 4 +++- public/env.template.js | 4 ++++ src/runtimeConfig.ts | 14 ++++++++++++++ 6 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 Dockerfile create mode 100644 docker-entrypoint.sh create mode 100644 public/env.template.js create mode 100644 src/runtimeConfig.ts diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..500c0cf --- /dev/null +++ b/Dockerfile @@ -0,0 +1,24 @@ +FROM node:lts-alpine3.23 AS builder + +WORKDIR /app + +COPY package*.json ./ +COPY pnpm-lock.yaml* yarn.lock* ./ + +RUN npm install +COPY . . +RUN npm run build + +FROM nginx:stable-alpine AS production + +RUN apk add --no-cache gettext + +RUN rm -rf /usr/share/nginx/html/* +COPY --from=builder /app/dist /usr/share/nginx/html + +COPY public/env.template.js /usr/share/nginx/html/env.template.js +COPY docker-entrypoint.sh /docker-entrypoint.sh +RUN chmod +x /docker-entrypoint.sh + +EXPOSE 80 +ENTRYPOINT ["/docker-entrypoint.sh"] diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh new file mode 100644 index 0000000..91709d5 --- /dev/null +++ b/docker-entrypoint.sh @@ -0,0 +1,19 @@ +#!/bin/sh +set -e + +# Replace placeholders in env.template.js with environment variables and write env.js +TEMPLATE_PATH="/usr/share/nginx/html/env.template.js" +TARGET_PATH="/usr/share/nginx/html/env.js" + +if [ -f "$TEMPLATE_PATH" ]; then + echo "Rendering runtime config from $TEMPLATE_PATH" + # export all variables for envsubst to access + # only substitute variables present in the template + envsubst < "$TEMPLATE_PATH" > "$TARGET_PATH" +else + echo "No runtime template found at $TEMPLATE_PATH, skipping" +fi + +# Start nginx in foreground +exec nginx -g 'daemon off;' + diff --git a/env.d.ts b/env.d.ts index 11f02fe..70b745d 100644 --- a/env.d.ts +++ b/env.d.ts @@ -1 +1,7 @@ /// + +declare global { + interface Window { __RUNTIME_CONFIG__?: { API_URL?: string } } +} + +export {}; diff --git a/index.html b/index.html index 9e5fc8f..7468429 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -8,6 +8,8 @@
+ + diff --git a/public/env.template.js b/public/env.template.js new file mode 100644 index 0000000..9da9e66 --- /dev/null +++ b/public/env.template.js @@ -0,0 +1,4 @@ +globalThis.__RUNTIME_CONFIG__ = { + API_URL: "${API_URL}" +}; + diff --git a/src/runtimeConfig.ts b/src/runtimeConfig.ts new file mode 100644 index 0000000..ce5dca0 --- /dev/null +++ b/src/runtimeConfig.ts @@ -0,0 +1,14 @@ +// runtimeConfig.ts +// Reads runtime configuration injected into window.__RUNTIME_CONFIG__ (created by env.js at container start) + +declare global { + interface Window { __RUNTIME_CONFIG__?: { API_URL?: string } } +} + +const runtime = (globalThis as any).__RUNTIME_CONFIG__ || {}; + +export const API_URL = runtime.API_URL || (import.meta.env.VITE_API_URL as string) || 'http://localhost:9000'; + +export function getApiUrl(): string { + return API_URL; +}