stack-service-base 0.0.98 → 0.0.100

data/lib/stack-service-base/frontend_template/home/docker/frontend/Dockerfile

@@ -0,0 +1,46 @@
+FROM node:24.18-alpine AS base
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+
+FROM base AS tests
+CMD ["npm", "run", "check"]
+
+FROM base AS build
+
+RUN npm run build
+
+FROM nginxinc/nginx-unprivileged:1.28.1-alpine AS deploy
+
+USER root
+RUN apk add --no-cache ca-certificates curl jq \
+    && rm -rf /usr/share/nginx/html/*
+
+ENV PORT=8080 \
+    NODE_ENV=production \
+    PATH_PREFIX= \
+    API_BASE_URL= \
+    LOG_LEVEL=info \
+    BACKEND_URL=http://127.0.0.1:65535
+
+COPY --from=docker /frontend/nginx.conf.template /etc/nginx/templates/default.conf.template
+COPY --chmod=755 --from=docker /frontend/15-runtime-settings.envsh /docker-entrypoint.d/
+COPY --chmod=755 --from=docker /frontend/40-path-prefix-settings.sh /docker-entrypoint.d/
+COPY --chmod=755 --from=docker /frontend/45-runtime-config-settings.sh /docker-entrypoint.d/
+RUN rm -f /etc/nginx/conf.d/default.conf \
+    && chown -R 101:101 /etc/nginx/conf.d /usr/share/nginx/html
+
+COPY --chown=101:101 --from=build /app/dist /usr/share/nginx/html
+
+USER 101:101
+
+HEALTHCHECK --interval=30s --timeout=5s --retries=3 --start-period=10s \
+  CMD curl -fsS "http://127.0.0.1:${PORT}/healthcheck" || exit 1
+
+EXPOSE 8080
+
+CMD ["nginx", "-g", "daemon off;"]

data/lib/stack-service-base/frontend_template/home/docker/frontend/nginx.conf.template

@@ -0,0 +1,75 @@
+server {
+    listen ${PORT};
+    server_name _;
+
+    resolver ${DNS_RESOLVER} valid=30s ipv6=off;
+    resolver_timeout 10s;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    gzip on;
+    gzip_min_length 1024;
+    gzip_types text/plain text/css application/javascript application/json image/svg+xml;
+
+    add_header Content-Security-Policy "default-src 'self'; base-uri 'self'; connect-src 'self'; font-src 'self' data:; form-action 'self'; frame-ancestors 'self'; img-src 'self' data: blob:; object-src 'none'; script-src 'self'; style-src 'self'; worker-src 'self' blob:" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-Frame-Options "SAMEORIGIN" always;
+
+    location = /healthcheck {
+        access_log off;
+        default_type application/json;
+        return 200 '{"Status":"Healthy"}';
+    }
+
+    location ^~ /api {
+        set $backend_origin "${BACKEND_PROTO}://${BACKEND_HOST}:${BACKEND_PORT}";
+
+        proxy_pass $backend_origin;
+        proxy_http_version 1.1;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host ${BACKEND_HOST};
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Host $host;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_ssl_name ${BACKEND_HOST};
+        proxy_ssl_server_name on;
+        proxy_ssl_trusted_certificate /etc/ssl/certs/ca-certificates.crt;
+        proxy_ssl_verify on;
+        proxy_cookie_domain ~.* $host;
+        proxy_cookie_path / /;
+    }
+
+    location = /runtime-config.js {
+        expires -1;
+        add_header Cache-Control "no-store" always;
+        add_header Content-Security-Policy "default-src 'self'; base-uri 'self'; connect-src 'self'; font-src 'self' data:; form-action 'self'; frame-ancestors 'self'; img-src 'self' data: blob:; object-src 'none'; script-src 'self'; style-src 'self'; worker-src 'self' blob:" always;
+        add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        try_files $uri =404;
+    }
+
+    location = /index.html {
+        expires -1;
+        add_header Cache-Control "no-store" always;
+        add_header Content-Security-Policy "default-src 'self'; base-uri 'self'; connect-src 'self'; font-src 'self' data:; form-action 'self'; frame-ancestors 'self'; img-src 'self' data: blob:; object-src 'none'; script-src 'self'; style-src 'self'; worker-src 'self' blob:" always;
+        add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        try_files $uri =404;
+    }
+
+    location /assets/ {
+        expires 1y;
+        try_files $uri =404;
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    ${PATH_PREFIX_RULE}
+}

data/lib/stack-service-base/frontend_template/home/src/.dockerignore

@@ -0,0 +1,9 @@
+node_modules
+dist
+.env
+.env.*
+!.env.example
+*.log
+coverage
+test-results
+playwright-report

data/lib/stack-service-base/frontend_template/home/src/.env.example

@@ -0,0 +1,7 @@
+# Browser-visible runtime configuration.
+PATH_PREFIX=
+API_BASE_URL=
+LOG_LEVEL=info
+
+# Development proxy target. This value is not exposed to browser code.
+BACKEND_URL=http://localhost:8080

data/lib/stack-service-base/frontend_template/home/src/.version

@@ -0,0 +1 @@
+0.1

data/lib/stack-service-base/frontend_template/home/src/app/main.ts

@@ -0,0 +1,4 @@
+import './style.css';
+
+await import(/* @vite-ignore */ `${import.meta.env.BASE_URL}runtime-config.js`);
+await import('./runtime-config');

data/lib/stack-service-base/frontend_template/home/src/app/runtime-config.ts

@@ -0,0 +1,22 @@
+import { normalizePathPrefix } from '../tools/vite/path-prefix';
+import type { RuntimeConfig } from './runtime-config.types';
+
+declare global {
+  interface Window {
+    __APP_CONFIG__?: RuntimeConfig;
+  }
+}
+
+const runtimeConfig = window.__APP_CONFIG__ ?? {};
+const pathPrefix = normalizePathPrefix(runtimeConfig.PATH_PREFIX);
+
+export const environment = Object.freeze({
+  serviceName: '${service_name}',
+  pathPrefix,
+  apiBaseUrl: runtimeConfig.API_BASE_URL?.trim() || joinPath(pathPrefix, 'api'),
+  logLevel: runtimeConfig.LOG_LEVEL?.trim() || 'info'
+});
+
+function joinPath(prefix: string, path: string): string {
+  return `${prefix}/${path}`.replace(/\/+/gu, '/');
+}

data/lib/stack-service-base/frontend_template/home/src/app/runtime-config.types.ts

@@ -0,0 +1,5 @@
+export type RuntimeConfig = {
+  PATH_PREFIX?: string;
+  API_BASE_URL?: string;
+  LOG_LEVEL?: string;
+};

data/lib/stack-service-base/frontend_template/home/src/app/style.css

@@ -0,0 +1,82 @@
+:root {
+  --color-background: #f3f4f6;
+  --color-text: #1f2937;
+  --color-muted: #6b7280;
+  --color-running: #166534;
+  --color-running-indicator: #22c55e;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+
+  color: var(--color-text);
+  background: var(--color-background);
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-synthesis: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  display: grid;
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+  place-items: center;
+}
+
+.page {
+  width: min(640px, calc(100% - var(--space-8)));
+  padding: var(--space-8) 0;
+}
+
+.page__header {
+  margin-bottom: var(--space-6);
+}
+
+h1,
+p {
+  margin: 0;
+}
+
+h1 {
+  margin-top: var(--space-1);
+  font-size: clamp(28px, 5vw, 40px);
+  font-weight: 600;
+  letter-spacing: -0.025em;
+}
+
+.eyebrow {
+  color: var(--color-muted);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--color-running);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.status__indicator {
+  width: var(--space-2);
+  height: var(--space-2);
+  border-radius: 50%;
+  background: var(--color-running-indicator);
+}
+
+@media (max-width: 640px) {
+  .page {
+    width: calc(100% - var(--space-6));
+    padding: var(--space-6) 0;
+  }
+}

data/lib/stack-service-base/frontend_template/home/src/app/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

data/lib/stack-service-base/frontend_template/home/src/eslint.config.js

@@ -0,0 +1,34 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  {
+    ignores: ['dist/**', 'node_modules/**']
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }]
+    }
+  },
+  {
+    files: ['app/**/*.{js,ts}', 'public/**/*.js'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: globals.browser
+    }
+  },
+  {
+    files: ['tests/**/*.{js,ts}', 'tools/**/*.{js,ts}', '*.config.{js,ts}'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: globals.node
+    }
+  }
+);

data/lib/stack-service-base/frontend_template/home/src/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light" />
+    <title>${service_name}</title>
+  </head>
+  <body>
+    <main class="page">
+      <header class="page__header">
+        <p class="eyebrow">Frontend service</p>
+        <h1>${service_name}</h1>
+      </header>
+
+      <p class="status" role="status">
+        <span class="status__indicator" aria-hidden="true"></span>
+        Running
+      </p>
+    </main>
+
+    <script type="module" src="/app/main.ts"></script>
+  </body>
+</html>