Merge pull request #1 from DFMoller/docker

Dockerise the application, add github actions

Author: DFMoller

.devcontainer/Dockerfile

@@ -25,7 +25,7 @@ RUN apt-get update && apt-get -y upgrade && apt-get -qqy install \
   gnupg2 \
   tzdata
 
-# Install claude code.
+# Install claude code globally.
 RUN sudo npm install -g @anthropic-ai/claude-code
 
 ########

.devcontainer/docker-compose.yml

@@ -6,7 +6,7 @@ services:
       context: .
       dockerfile: Dockerfile
     ports:
-     - 80:80
+     - 8080:80
     volumes:
       # Mounts the project folder to '/workspace'
       # in devcontainer.json we have specified workspaceFolder=/workspace.

.dockerignore

@@ -0,0 +1,59 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Build output
+dist
+build
+.vite
+
+# Development files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Git
+.git
+.gitignore
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Testing
+coverage
+.nyc_output
+playwright-report
+test-results
+
+# Documentation
+*.md
+
+# Docker
+Dockerfile
+.dockerignore
+docker-compose.yml
+
+# Claude Code
+.claude
+
+# Development containers
+.devcontainer
+
+# GitHub
+.github
+
+# Misc
+.prettierrc
+.eslintrc*

.github/workflows/default.yml

@@ -0,0 +1,96 @@
+# This workflow will install Node.js dependencies, lint, and build the React application.
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js Lint + Build
+
+# Run the default pipeline for any push event.
+on: [push]
+
+env:
+  NODE_VERSION: "20"
+
+permissions:
+  contents: read
+
+jobs:
+  version-check:
+    if: github.ref_name != 'main'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout main branch
+        uses: actions/checkout@v4
+        with:
+          ref: refs/heads/main
+
+      - name: Set up Node.js for main branch
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Check main branch version
+        id: check_main_branch_version
+        run: |
+          echo "MAIN_BRANCH_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+
+      - name: Checkout current branch
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js for current branch
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Check current branch version
+        env:
+          MAIN_BRANCH_VERSION: ${{ steps.check_main_branch_version.outputs.MAIN_BRANCH_VERSION }}
+        run: |
+          CURRENT_VERSION="$(node -p "require('./package.json').version")"
+          CURRENT_CHANGELOG_VERSION="$(cat CHANGELOG.md | grep "^## \[" | tr -d "[]" | cut -d' ' -f2 | head -n1)"
+          echo "Version in package.json: ($CURRENT_VERSION); Version in main branch: ($MAIN_BRANCH_VERSION)."
+          echo "Version in CHANGELOG.md: ($CURRENT_CHANGELOG_VERSION)."
+          if [ "$CURRENT_VERSION" == "$MAIN_BRANCH_VERSION" ]; then
+            echo "Version in package.json matches the version in the main branch. It needs to be updated."
+            exit 1
+          fi
+          if [ "$CURRENT_VERSION" != "$CURRENT_CHANGELOG_VERSION" ]; then
+            echo "Version in package.json ($CURRENT_VERSION) does not match the version in CHANGELOG.md ($CURRENT_CHANGELOG_VERSION)."
+            exit 1
+          fi
+
+  lint-and-build:
+    runs-on: ubuntu-latest
+    steps:
+      # Checkout the code.
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Set up Node.js.
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+
+      # Install dependencies.
+      - name: Install dependencies
+        run: npm ci
+
+      # Run linter.
+      - name: Lint with ESLint
+        run: npm run lint
+
+      # Run TypeScript compilation check.
+      - name: TypeScript compilation check
+        run: npx tsc -b
+
+      # Build the application for production.
+      - name: Build application
+        run: npm run build
+
+      # Optional: Upload build artifacts for inspection.
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist/
+          retention-days: 7

.github/workflows/docker.yml

@@ -0,0 +1,73 @@
+name: Docker Build + Push
+
+# Build and push Docker images when version tags are pushed.
+on:
+  push:
+    tags:
+      - 'v*'
+
+# Environment variables for GitHub Container Registry.
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    # Permissions for pushing to GHCR and creating attestations.
+    permissions:
+      contents: read
+      packages: write
+      attestations: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Set up Docker Buildx for multi-platform builds and layer caching.
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      # Log in to GitHub Container Registry.
+      - name: Log in to the Container registry
+        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for the Docker image.
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            # Get the version from the tag (e.g., v0.1.0 -> 0.1.0).
+            type=pep440,pattern={{version}}
+            # Set latest tag for main branch.
+            type=raw,value=latest,enable=${{ github.ref == format('refs/heads/{0}', 'main') }}
+            type=ref,event=branch
+            type=ref,event=pr
+            type=sha
+          labels: |
+            org.opencontainers.image.title=SDC Web
+            org.opencontainers.image.description=Supermarket Data Collector Web Application
+            org.opencontainers.image.vendor=DFMoller
+            org.opencontainers.image.source=https://github.com/${{ github.repository }}
+            org.opencontainers.image.revision=${{ github.sha }}
+            org.opencontainers.image.created=${{ github.event.head_commit.timestamp }}
+
+      # Build and push Docker image with multi-platform support and caching.
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          # Enable layer caching to speed up builds.
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

sdc-web/.gitignore .gitignoresdc-web/.gitignore renamed to .gitignore

@@ -0,0 +1,22 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2025-10-22
+
+### Added
+
+- Added `Dockerfile` to containerize the application production deployment.
+- Introduced `docker-compose.yml` for easy multi-container orchestration.
+- Implemented environment variable support for configuration settings.
+- Added health check endpoint for monitoring container status.
+- Created documentation for Docker setup and usage.
+- Addef GitHub Actions workflow for automated linting, Docker image building etc.
+- Better documentation.
+
+### Changed
+
+- Flatten the project structure. It was unnecessarily nested with sub-folders.

CHANGELOG.md

@@ -0,0 +1,68 @@
+# Multi-stage Docker build for SDC Web React application.
+# Stage 1: Build Caddy with transform-encoder module.
+# Stage 2: Build the React application.
+# Stage 3: Serve with Caddy web server.
+
+# Build arguments for version control.
+ARG NODE_VERSION=20
+ARG CADDY_VERSION=2-alpine
+
+# --------------------------------------------------------------------------------
+# Stage 1: Caddy Builder - Build Caddy with transform-encoder module.
+# This module is required for transforming logs to a more readable format.
+# To optimise logs for machine parsing, just use the normal caddy image
+# with the json logger.
+FROM caddy:builder AS caddy-builder
+
+RUN xcaddy build \
+    --with github.com/caddyserver/transform-encoder
+
+# -------------------------------------------------------------------------------- 
+# Stage 2: React Builder - Build the React app.
+FROM node:${NODE_VERSION}-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files for dependency installation.
+COPY package*.json ./
+
+# Install dependencies. Use clean install for reproducible builds.
+RUN npm ci
+
+# Copy source code.
+COPY . .
+
+# Build the application.
+RUN npm run build
+
+# --------------------------------------------------------------------------------
+# Stage 3: Production - Serve with Caddy.
+FROM caddy:${CADDY_VERSION}
+
+# Copy custom-built Caddy binary with transform-encoder module.
+COPY --from=caddy-builder /usr/bin/caddy /usr/bin/caddy
+
+# Copy built static files from builder stage.
+COPY --from=builder /app/dist /usr/share/caddy
+
+# Copy Caddyfile for server configuration.
+COPY configs/Caddyfile /etc/caddy/Caddyfile
+
+# Extract version from package.json for labeling.
+COPY --from=builder /app/package.json /tmp/package.json
+
+# Add labels for container metadata.
+LABEL org.opencontainers.image.title="SDC Web"
+LABEL org.opencontainers.image.description="Supermarket Data Collector Web Application"
+LABEL org.opencontainers.image.source="https://github.com/dfmoller/sdc-web"
+
+# Expose HTTP and HTTPS ports.
+EXPOSE 80
+EXPOSE 443
+
+# Health check endpoint.
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD wget --no-verbose --tries=1 --spider http://localhost:80/ || exit 1
+
+# Caddy runs as non-root by default and serves from /usr/share/caddy.
+# No CMD needed, the base caddy image handles it.