Changed Utilplex to be hosted in storage account

timothydodd · timothydodd · commit 057bdd895199 · 2025-11-05T16:55:19.000-05:00
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
@@ -0,0 +1,9 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(cat:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}
diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml
@@ -1,100 +1,126 @@
-# This is a workflow to build a Docker image and deploy it to Docker Hub
+# Build and Deploy to Azure Storage Static Website
 
-name: Docker CI/CD
+name: Build and Deploy to Azure Storage
 
 # Controls when the workflow will run
 on:
-  # Triggers the workflow on push or pull request events but only for the "main" branch
+  # Triggers the workflow on push events but only for the "main" branch
   push:
     branches: ["main"]
-  pull_request:
-    branches: ["main"]
-  
+
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 env:
   PROJECT_NAME: utilplex
-  DOCKER_HUB_USERNAME: ${{ secrets.DOCKER_HUB_USERNAME }}
-  DOCKER_HUB_REPOSITORY: ${{ vars.DOCKER_HUB_REPOSITORY || 'utilplex' }}
-  IMAGE_TAG: ${{ github.sha }}
+  AZURE_STORAGE_ACCOUNT: ${{ secrets.AZURE_STORAGE_ACCOUNT_NAME }}
 
 jobs:
   build:
-    name: Build and test
+    name: Build Angular Application
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      
+
       - name: Set up Node 20.x
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: "20.x"
           cache: 'npm'
-      
+
       - name: Install dependencies
         run: npm ci
-      
-      - name: Build
+
+      - name: Build application
         run: npm run build:ci
-      
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-      
-      - name: Build and export Docker image
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          load: true
-          tags: ${{ env.DOCKER_HUB_USERNAME }}/${{ env.DOCKER_HUB_REPOSITORY }}:${{ env.IMAGE_TAG }}
-      
-      - name: Test Docker image
-        run: |
-          docker run --rm ${{ env.DOCKER_HUB_USERNAME }}/${{ env.DOCKER_HUB_REPOSITORY }}:${{ env.IMAGE_TAG }} echo "Docker image built successfully"
-      
-      - name: Archive build
+
+      - name: Archive build artifacts
         if: success()
         uses: actions/upload-artifact@v4
         with:
-          name: docker_meta
-          path: |
-            .docker/
-            Dockerfile
-            docker-compose.yml
-          if-no-files-found: ignore
+          name: browser-build
+          path: dist/utilplex/browser/
+          retention-days: 1
 
   deploy:
-    name: Deploy to Docker Hub
+    name: Deploy to Azure Storage
     runs-on: ubuntu-latest
     needs: build
-    if: github.event_name != 'pull_request'
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      
       - name: Download build artifacts
         uses: actions/download-artifact@v4
         with:
-          name: docker_meta
-          path: .
-      
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-      
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKER_HUB_USERNAME }}
-          password: ${{ secrets.DOCKER_HUB_TOKEN }}
-      
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          push: true
-          tags: |
-            ${{ env.DOCKER_HUB_USERNAME }}/${{ env.DOCKER_HUB_REPOSITORY }}:${{ env.IMAGE_TAG }}
-            ${{ env.DOCKER_HUB_USERNAME }}/${{ env.DOCKER_HUB_REPOSITORY }}:latest
+          name: browser-build
+          path: ./browser
+
+      - name: Install Azure CLI
+        run: |
+          curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
+
+      - name: Login to Azure
+        run: |
+          az storage account show \
+            --name ${{ secrets.AZURE_STORAGE_ACCOUNT_NAME }} \
+            --query 'name' \
+            --output tsv
+        env:
+          AZURE_STORAGE_ACCOUNT: ${{ secrets.AZURE_STORAGE_ACCOUNT_NAME }}
+          AZURE_STORAGE_KEY: ${{ secrets.AZURE_STORAGE_ACCOUNT_KEY }}
+
+      - name: Enable static website hosting
+        run: |
+          az storage blob service-properties update \
+            --account-name ${{ secrets.AZURE_STORAGE_ACCOUNT_NAME }} \
+            --account-key ${{ secrets.AZURE_STORAGE_ACCOUNT_KEY }} \
+            --static-website \
+            --index-document index.html \
+            --404-document index.html
+
+      - name: Upload files to Azure Storage
+        run: |
+          # Upload index.html with short cache (5 minutes)
+          az storage blob upload-batch \
+            --account-name ${{ secrets.AZURE_STORAGE_ACCOUNT_NAME }} \
+            --account-key ${{ secrets.AZURE_STORAGE_ACCOUNT_KEY }} \
+            --destination '$web' \
+            --source ./browser \
+            --pattern "index.html" \
+            --content-cache-control "public, max-age=300, must-revalidate" \
+            --overwrite
+
+          # Upload hashed JS/CSS files with long cache (1 year)
+          az storage blob upload-batch \
+            --account-name ${{ secrets.AZURE_STORAGE_ACCOUNT_NAME }} \
+            --account-key ${{ secrets.AZURE_STORAGE_ACCOUNT_KEY }} \
+            --destination '$web' \
+            --source ./browser \
+            --pattern "*.js" \
+            --content-cache-control "public, max-age=31536000, immutable" \
+            --overwrite
+
+          az storage blob upload-batch \
+            --account-name ${{ secrets.AZURE_STORAGE_ACCOUNT_NAME }} \
+            --account-key ${{ secrets.AZURE_STORAGE_ACCOUNT_KEY }} \
+            --destination '$web' \
+            --source ./browser \
+            --pattern "*.css" \
+            --content-cache-control "public, max-age=31536000, immutable" \
+            --overwrite
+
+          # Upload all other files with medium cache (1 day)
+          az storage blob upload-batch \
+            --account-name ${{ secrets.AZURE_STORAGE_ACCOUNT_NAME }} \
+            --account-key ${{ secrets.AZURE_STORAGE_ACCOUNT_KEY }} \
+            --destination '$web' \
+            --source ./browser \
+            --content-cache-control "public, max-age=86400" \
+            --overwrite
+
+      - name: Display deployment URL
+        run: |
+          echo "🚀 Deployment successful!"
+          echo "Static website URL: https://${{ secrets.AZURE_STORAGE_ACCOUNT_NAME }}.z13.web.core.windows.net/"
+          echo "Note: The exact URL format depends on your Azure region."
diff --git a/README.md b/README.md
@@ -95,11 +95,80 @@ All tools feature:
 
 - `npm start` - Start development server
 - `npm run build` - Production build
-- `npm run build:ci` - CI production build  
+- `npm run build:ci` - CI production build
 - `npm test` - Run unit tests
 - `npm run lint` - Run ESLint
 - `npm run serve:ssr:utilplex` - Serve SSR build
 
+## Deployment
+
+UtilPlex is configured for automated deployment to Azure Storage static website hosting via GitHub Actions.
+
+### Azure Storage Setup
+
+1. **Create Azure Storage Account**:
+   ```bash
+   az storage account create \
+     --name <your-storage-account-name> \
+     --resource-group <your-resource-group> \
+     --location <your-region> \
+     --sku Standard_LRS \
+     --kind StorageV2
+   ```
+
+2. **Enable Static Website Hosting**:
+   ```bash
+   az storage blob service-properties update \
+     --account-name <your-storage-account-name> \
+     --static-website \
+     --index-document index.html \
+     --404-document index.html
+   ```
+
+3. **Get Storage Account Key**:
+   ```bash
+   az storage account keys list \
+     --account-name <your-storage-account-name> \
+     --query "[0].value" \
+     --output tsv
+   ```
+
+### GitHub Secrets Configuration
+
+Add the following secrets to your GitHub repository (Settings → Secrets and variables → Actions):
+
+- `AZURE_STORAGE_ACCOUNT_NAME` - Your Azure Storage account name
+- `AZURE_STORAGE_ACCOUNT_KEY` - Your Azure Storage account access key
+
+### Deployment Workflow
+
+The GitHub Actions workflow automatically:
+1. Builds the Angular application on push to `main` branch
+2. Deploys pre-rendered static files to Azure Storage `$web` container
+3. Configures optimal cache headers:
+   - `index.html`: 5 minutes (frequent updates)
+   - Hashed JS/CSS: 1 year (immutable content)
+   - Other assets: 1 day (moderate caching)
+
+### Manual Deployment
+
+To deploy manually:
+```bash
+# Build the application
+npm run build:ci
+
+# Upload to Azure Storage
+az storage blob upload-batch \
+  --account-name <your-storage-account-name> \
+  --account-key <your-storage-account-key> \
+  --destination '$web' \
+  --source dist/utilplex/browser/
+```
+
+Your site will be available at: `https://<your-storage-account-name>.z13.web.core.windows.net/`
+
+Note: The exact URL format depends on your Azure region. Check your storage account properties for the correct endpoint.
+
 ### Project Structure
 
 ```
