Add docker build file for UI and associated Actions workflow

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') }
+    ]
+  }
 })