Add docker build file for UI and associated Actions workflow

.github/workflows/api-docker-image.yml

@@ -5,8 +5,10 @@ on:
     branches: [ "main" ]
     # Publish semver tags as releases.
     tags: [ 'v*.*.*' ]
+    paths: [ 'barkmanAPI/**' ]
   pull_request:
     branches: [ "main" ]
+    paths: [ 'barkmanAPI/**' ]
 
 env:
   # Use docker.io for Docker Hub if empty

.github/workflows/ui-docker-image.yml

@@ -0,0 +1,88 @@
+name: Publish Docker Image
+
+on:
+  push:
+    branches: [ "main" ]
+    # Publish semver tags as releases.
+    tags: [ 'v*.*.*' ]
+    paths: [ 'barkmanui/**' ]
+  pull_request:
+    branches: [ "main" ]
+    paths: [ 'barkmanui/**' ]
+env:
+  # Use docker.io for Docker Hub if empty
+  REGISTRY: ghcr.io
+  # github.repository as <account>/<repo>
+  IMAGE_NAME: Pup-Ion-Dev/barkman-ui
+
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      # This is used to complete the identity challenge
+      # with sigstore/fulcio when running outside of PRs.
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install cosign
+        if: github.event_name != 'pull_request'
+        uses: sigstore/cosign-installer@59acb6260d9c0ba8f4a2f9d9b48431a222b68e20 #v3.5.0
+        with:
+          cosign-release: 'v2.2.4'
+
+      # Set up BuildKit Docker container builder to be able to build
+      # multi-platform images and export cache
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@f95db51fddba0c2d1ec667646a06c2ce06100226 # v3.0.0
+
+      # Login against a Docker registry except on PR
+      - name: Log into registry ${{ env.REGISTRY }}
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@343f7c4344506bcbf9b4de18042ae17996df046d # v3.0.0
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@96383f45573cb7f253c731d3b3ab81c87ef81934 # v5.0.0
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=latest,enable={{is_default_branch}}
+            type=sha,format=long
+
+      # Build and push Docker image with Buildx (don't push on PR)
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@0565240e2d4ab88bba5387d719585280857ece09 # v5.0.0
+        with:
+          context: ./barkmanUI
+          file: ./barkmanUI/release.Dockerfile
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      # Sign the resulting Docker image digest except on PRs.
+      # This will only write to the public Rekor transparency log when the Docker
+      # repository is public to avoid leaking data.  If you would like to publish
+      # transparency data even for private images, pass --force to cosign below.
+      - name: Sign the published Docker image
+        if: ${{ github.event_name != 'pull_request' }}
+        env:
+          # https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions#using-an-intermediate-environment-variable
+          TAGS: ${{ steps.meta.outputs.tags }}
+          DIGEST: ${{ steps.build-and-push.outputs.digest }}
+        # This step uses the identity token to provision an ephemeral certificate
+        # against the sigstore community Fulcio instance.
+        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}

.gitignore

@@ -5,3 +5,5 @@ riderModule.iml
 /_ReSharper.Caches/
 **/app.db*
 **/.idea
+**/.DS_Store
+**/*.DotSettings.user

barkmanui/.dockerignore

@@ -0,0 +1 @@
+*.env

barkmanui/.env.docker

@@ -0,0 +1 @@
+VITE_API_URL=VITE_API_URL

barkmanui/ops/docker/caddy/Caddyfile

@@ -0,0 +1,6 @@
+http://* {
+	root * /app
+	encode
+	try_files {path} /index.html
+	file_server
+}

barkmanui/ops/docker/entrypoint.sh

@@ -0,0 +1,27 @@
+#!/bin/sh
+# Generate sed script file
+sed_script="/tmp/sed_script.sed"
+> "$sed_script"
+
+# Ensure the sed script file is cleaned up on exit
+trap 'rm -f "$sed_script"' EXIT
+
+# Extract VITE_ environment variables and build the sed expression
+env | grep '^VITE_' | while IFS='=' read -r key value; do
+    # Escape slashes and other special characters in key and value
+    escaped_key=$(printf '%s' "$key" | sed 's/[\/&]/\\&/g')
+    escaped_value=$(printf '%s' "$value" | sed 's/[\/&]/\\&/g')
+    # Append to sed script file
+    echo "s|${escaped_key}|${escaped_value}|g;" >> "$sed_script"
+done
+
+# Check if the sed script file was created and is not empty
+if [ ! -s "$sed_script" ]; then
+    echo "No VITE_ environment variables found. Exiting with error."
+    exit 1
+fi
+
+# sed All files
+find /app -type f -exec sed -i -f "$sed_script" '{}' +
+
+caddy run --config /etc/caddy/Caddyfile --adapter caddyfile

barkmanui/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },

barkmanui/release.Dockerfile

@@ -0,0 +1,17 @@
+# Stage 1: Build Image
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build -- --mode docker
+
+# Stage 2, use the compiled app, ready for production with caddy
+FROM caddy:latest
+COPY ops/docker/caddy/Caddyfile /etc/caddy/Caddyfile
+COPY --from=build /app/dist /app
+COPY ops/docker/entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+EXPOSE 80
+
+ENTRYPOINT ["/bin/sh", "/entrypoint.sh"]

barkmanui/src/common/components/BarkHeader.tsx

@@ -2,6 +2,7 @@ import {Burger, Container, Group, Image} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import classes from './BarkHeader.module.css';
 import {NavLink} from "react-router";
+import BarkLogo from '@/assets/barklogo.png';
 
 
 const links = [
@@ -22,7 +23,7 @@ export function BarkHeader() {
     return (
         <header className={classes.header}>
             <Container fluid className={classes.inner}>
-                <Image ml="lg" src="/barklogo.png" h={55} w={55}/>
+                <Image ml="lg" src={BarkLogo} h={55} w={55}/>
                 <Group gap={5} visibleFrom="xs">
                     {items}
                 </Group>

barkmanui/tsconfig.app.json

@@ -20,7 +20,12 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }

barkmanui/vite.config.ts

@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import path from 'path'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: [
+      { find: '@', replacement: path.resolve(__dirname, 'src') }
+    ]
+  }
 })