Adds Docker-based CI/CD for Azure

Automates building and deployment of the React app in Docker containers.
Triggers deployments to Azure on successful builds or manual runs, enabling faster and more consistent releases.
Introduces supporting documentation and configurations for container-based hosting, simplifying setup and maintenance.

Author: mbertelsen

.github/workflows/deploy-azure.yml

@@ -0,0 +1,37 @@
+name: Deploy to Azure App Service
+
+on:
+  workflow_run:
+    workflows: ["Build and Push Docker Image"]
+    types:
+      - completed
+    branches: [ main ]
+  
+  # Allow manual trigger
+  workflow_dispatch:
+
+env:
+  AZURE_WEBAPP_NAME: 'your-app-name'    # Replace with your App Service name
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}/app-scripting-editor
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.workflow_run.conclusion == 'success' || github.event_name == 'workflow_dispatch' }}
+    
+    environment:
+      name: 'production'
+      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
+
+    steps:
+    - name: Lowercase repository name
+      run: echo "IMAGE_NAME_LOWER=$(echo ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} | tr '[:upper:]' '[:lower:]')" >> $GITHUB_ENV
+
+    - name: Deploy to Azure Web App
+      id: deploy-to-webapp
+      uses: azure/webapps-deploy@v2
+      with:
+        app-name: ${{ env.AZURE_WEBAPP_NAME }}
+        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
+        images: '${{ env.IMAGE_NAME_LOWER }}:latest'

.github/workflows/docker-build.yml

@@ -0,0 +1,66 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches: [ main, develop ]
+    paths:
+      - 'editor/**'
+      - '.github/workflows/docker-build.yml'
+  pull_request:
+    branches: [ main ]
+    paths:
+      - 'editor/**'
+  
+  # Allow manual trigger
+  workflow_dispatch:
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}/app-scripting-editor
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+
+    - name: Log in to Container Registry
+      uses: docker/login-action@v3
+      with:
+        registry: ${{ env.REGISTRY }}
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Extract metadata
+      id: meta
+      uses: docker/metadata-action@v5
+      with:
+        images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+        tags: |
+          type=ref,event=branch
+          type=ref,event=pr
+          type=sha,prefix={{branch}}-
+          type=raw,value=latest,enable={{is_default_branch}}
+
+    - name: Build and push Docker image
+      uses: docker/build-push-action@v5
+      with:
+        context: ./editor
+        file: ./editor/Dockerfile
+        push: true
+        tags: ${{ steps.meta.outputs.tags }}
+        labels: ${{ steps.meta.outputs.labels }}
+        cache-from: type=gha
+        cache-to: type=gha,mode=max
+        platforms: linux/amd64,linux/arm64
+
+    - name: Image digest
+      run: echo ${{ steps.build.outputs.digest }}

DOCKER_DEPLOYMENT.md

@@ -0,0 +1,87 @@
+# Docker Deployment Guide
+
+## Overview
+This repository includes GitHub Actions workflows to automatically build and deploy the React application as a Docker container.
+
+## Workflows
+
+### 1. Build and Push Docker Image (`docker-build.yml`)
+- **Triggers**: Push to main/develop, PRs to main, manual dispatch
+- **Output**: Docker image pushed to GitHub Container Registry (ghcr.io)
+- **Tags**: 
+  - `latest` (for main branch)
+  - `<branch-name>` (for branch pushes)
+  - `<branch>-<sha>` (for commit-specific builds)
+
+### 2. Deploy to Azure App Service (`deploy-azure.yml`)
+- **Triggers**: After successful Docker build, manual dispatch
+- **Target**: Azure App Service with container deployment
+
+## Setup Instructions
+
+### For GitHub Container Registry (Automatic)
+The workflow uses `GITHUB_TOKEN` which is automatically available - no additional setup needed.
+
+### For Azure App Service Deployment
+
+1. **Create Azure App Service with Container support:**
+   ```bash
+   # Create resource group
+   az group create --name myResourceGroup --location "East US"
+   
+   # Create App Service plan (Linux with container support)
+   az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1 --is-linux
+   
+   # Create web app with container
+   az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name your-app-name --deployment-container-image-name nginx
+   ```
+
+2. **Get Publish Profile:**
+   ```bash
+   az webapp deployment list-publishing-profiles --name your-app-name --resource-group myResourceGroup --xml
+   ```
+
+3. **Add GitHub Secrets:**
+   - Go to your GitHub repository → Settings → Secrets and variables → Actions
+   - Add `AZURE_WEBAPP_PUBLISH_PROFILE` with the XML content from step 2
+
+4. **Update workflow file:**
+   - Edit `.github/workflows/deploy-azure.yml`
+   - Replace `your-app-name` with your actual Azure App Service name
+
+## Local Development
+
+### Build Docker image locally:
+```bash
+cd editor
+docker build -t app-scripting-editor .
+```
+
+### Run locally:
+```bash
+docker run -p 8080:80 app-scripting-editor
+```
+
+Then visit http://localhost:8080
+
+## Container Registry
+
+Images are pushed to: `ghcr.io/trackman/tps-app-scripting/app-scripting-editor`
+
+You can pull and run the latest image:
+```bash
+docker pull ghcr.io/trackman/tps-app-scripting/app-scripting-editor:latest
+docker run -p 8080:80 ghcr.io/trackman/tps-app-scripting/app-scripting-editor:latest
+```
+
+## Environment Variables
+
+For production deployment, you may need to configure environment variables in your Azure App Service:
+- `WEBSITES_PORT=80` (required for Azure App Service)
+- Any React environment variables (prefixed with `REACT_APP_`)
+
+## Troubleshooting
+
+1. **Build fails**: Check the Actions tab for detailed logs
+2. **Deployment fails**: Ensure Azure App Service is configured for Linux containers
+3. **App doesn't load**: Check that `WEBSITES_PORT=80` is set in App Service configuration

editor/.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+npm-debug.log
+.git
+.gitignore
+README.md
+.env
+.nyc_output
+coverage
+.vscode
+dist

editor/Dockerfile

@@ -0,0 +1,25 @@
+# Build stage
+FROM node:18-alpine as build
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+
+# Copy custom nginx config if needed
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Expose port 80
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

editor/nginx.conf

@@ -0,0 +1,26 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    server {
+        listen 80;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # Handle client-side routing
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        # Cache static assets
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
+    }
+}