KnockOutWhist/KnockOutWhist-Frontend
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 20 Wiki Activity

feat: FRO-28 Integrate Frontend Build as a seperate image (#2)

Browse Source 
Reviewed-on: #2
Co-authored-by: Janis <janis.e.20@gmx.de>
Co-committed-by: Janis <janis.e.20@gmx.de>
This commit is contained in:
Janis
2025-12-07 21:30:59 +01:00
committed by Janis
parent 7bc6ac89f0
commit aa399bf035
6 changed files with 70 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
Dockerfile Normal file
View File

@@ -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"]

19
docker-entrypoint.sh Normal file
View File

@@ -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;'

6
env.d.ts vendored
View File

@@ -1 +1,7 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
declare global {
interface Window { __RUNTIME_CONFIG__?: { API_URL?: string } }
}
export {};

4
index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
@@ -8,6 +8,8 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<!-- runtime config injected at container start -->
<script src="/env.js"></script>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

4
public/env.template.js Normal file
View File

@@ -0,0 +1,4 @@
globalThis.__RUNTIME_CONFIG__ = {
API_URL: "${API_URL}"
};

14
src/runtimeConfig.ts Normal file
View File

@@ -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;
}