Use AWS Amplify to deploy PRs

.github/workflows/chromatic.yml

@@ -2,10 +2,10 @@ name: 'Chromatic'
 
 on:
   pull_request:
-    branches: [ "main" ]
+    branches: ['main']
     types: [opened, synchronize, reopened, closed, ready_for_review]
   push:
-    branches: [ "main" ]
+    branches: ['main']
 
   workflow_dispatch:
 
@@ -24,7 +24,7 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
           cache: 'yarn'
       - name: Install dependencies
         run: yarn install --immutable

.github/workflows/ci.yml

@@ -2,9 +2,9 @@ name: CI
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
-    branches: [ "main" ]
+    branches: ['main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
           cache: 'yarn'
 
       # Set up GitHub Actions caching for Wireit.

.github/workflows/release.yml

@@ -30,7 +30,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
           cache: 'yarn'
           registry-url: 'https://npm.pkg.github.com'
           scope: '@sl-design-system'

.github/workflows/storybook.yml

@@ -15,9 +15,8 @@ on:
   workflow_dispatch:
 
 env:
-  CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-  FONT_AWESOME_AUTH_TOKEN: ${{ secrets.FONT_AWESOME_AUTH_TOKEN }}
   FIGMA_TOKEN: ${{ secrets.FIGMA_AUTH_TOKEN }}
+  FONT_AWESOME_AUTH_TOKEN: ${{ secrets.FONT_AWESOME_AUTH_TOKEN }}
   HUSKY: 0
   TOKENS_STUDIO_API_KEY: ${{ secrets.TOKENS_STUDIO_2_API_KEY }}
 
@@ -35,50 +34,126 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
           cache: 'yarn'
 
-      # Set up GitHub Actions caching for Wireit.
       - uses: google/wireit@setup-github-actions-caching/v2
 
       - run: yarn install --immutable
 
       - run: yarn storybook
 
-      - uses: azure/static-web-apps-deploy@v1
-        id: deploy
+      - uses: aws-actions/configure-aws-credentials@v6
         with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
-          action: upload
-          app_location: dist
-          production_branch: main
-          skip_api_build: true
-          skip_app_build: true
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+
+      - name: Set branch name
+        id: branch
+        run: |
+          if [ "${{ github.event_name }}" == "pull_request" ]; then
+            echo "name=pr-${{ github.event.pull_request.number }}" >> "$GITHUB_OUTPUT"
+          else
+            echo "name=main" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Debug amplify
+        run: aws amplify list-apps
+
+      - name: Debug amplify branches
+        run: aws amplify list-branches --app-id "${{ secrets.AWS_AMPLIFY_APP_ID }}"
+
+      - name: Ensure Amplify branch exists
+        if: github.event_name == 'pull_request'
+        run: |
+          if aws amplify get-branch \
+            --app-id "${{ secrets.AWS_AMPLIFY_APP_ID }}" \
+            --branch-name "${{ steps.branch.outputs.name }}" >/dev/null 2>&1; then
+            echo "Amplify branch '${{ steps.branch.outputs.name }}' already exists."
+          else
+            aws amplify create-branch \
+              --app-id "${{ secrets.AWS_AMPLIFY_APP_ID }}" \
+              --branch-name "${{ steps.branch.outputs.name }}"
+          fi
+
+      - name: Deploy to AWS Amplify
+        id: deploy
+        run: |
+          DEPLOYMENT=$(aws amplify create-deployment \
+            --app-id "${{ secrets.AWS_AMPLIFY_APP_ID }}" \
+            --branch-name "${{ steps.branch.outputs.name }}" \
+            --output json)
+
+          JOB_ID=$(echo "$DEPLOYMENT" | jq -r '.jobId')
+          ZIP_URL=$(echo "$DEPLOYMENT" | jq -r '.zipUploadUrl')
+
+          cd dist && zip -qr ../deployment.zip . && cd ..
+          curl -sSf -T deployment.zip "$ZIP_URL"
+
+          aws amplify start-deployment \
+            --app-id "${{ secrets.AWS_AMPLIFY_APP_ID }}" \
+            --branch-name "${{ steps.branch.outputs.name }}" \
+            --job-id "$JOB_ID"
+
+          DEFAULT_DOMAIN=$(aws amplify get-app \
+            --app-id "${{ secrets.AWS_AMPLIFY_APP_ID }}" \
+            --query 'app.defaultDomain' \
+            --output text)
+          echo "preview_url=https://${{ steps.branch.outputs.name }}.${DEFAULT_DOMAIN}" >> "$GITHUB_OUTPUT"
 
       - if: github.event_name == 'pull_request'
         uses: peter-evans/find-comment@v3
         id: fc
         with:
           issue-number: ${{ github.event.pull_request.number }}
           comment-author: 'github-actions[bot]'
-          body-includes: Storybook preview
+          body-includes: '### 🕸 Preview deploys'
+
+      - if: github.event_name == 'pull_request'
+        name: Build comment body
+        id: comment
+        env:
+          EXISTING_BODY: ${{ steps.fc.outputs.comment-body }}
+          PREVIEW_URL: ${{ steps.deploy.outputs.preview_url }}
+        run: |
+          BODY="### 🕸 Preview deploys"
+          BODY="$BODY
+          - **Storybook:** $PREVIEW_URL"
+
+          WEBSITE_LINE=$(echo "$EXISTING_BODY" | grep '^- \*\*Website:\*\*' || true)
+          if [ -n "$WEBSITE_LINE" ]; then
+            BODY="$BODY
+          $WEBSITE_LINE"
+          fi
+
+          {
+            echo "body<<EOF"
+            echo "$BODY"
+            echo "EOF"
+          } >> "$GITHUB_OUTPUT"
 
       - if: github.event_name == 'pull_request'
         uses: peter-evans/create-or-update-comment@v4
         with:
           comment-id: ${{ steps.fc.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}
-          body: |
-            ### 🕸 Storybook preview
-            You can view a preview [here](${{ steps.deploy.outputs.static_web_app_url }}) (commit [`${{ github.event.pull_request.head.sha }}`](https://github.com/sl-design-system/components/commit/${{ github.event.pull_request.head.sha }})).
+          body: ${{ steps.comment.outputs.body }}
           edit-mode: replace
 
   cleanup:
     if: github.event_name == 'pull_request' && github.event.action == 'closed'
     runs-on: ubuntu-latest
     name: Cleanup
     steps:
-      - uses: azure/static-web-apps-deploy@v1
+      - uses: aws-actions/configure-aws-credentials@v6
         with:
-          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
-          action: close
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+
+      - name: Delete PR branch from Amplify
+        run: |
+          aws amplify delete-branch \
+            --app-id "${{ secrets.AWS_AMPLIFY_APP_ID }}" \
+            --branch-name "pr-${{ github.event.pull_request.number }}"

.github/workflows/website.yml

@@ -40,7 +40,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
           cache: 'yarn'
       - run: yarn install --immutable
       - run: NODE_ENV=production yarn website
@@ -58,7 +58,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
           cache: 'yarn'
       - run: yarn install --immutable
       - run: NODE_ENV=production yarn website
@@ -78,16 +78,38 @@ jobs:
         with:
           issue-number: ${{ github.event.pull_request.number }}
           comment-author: 'github-actions[bot]'
-          body-includes: Website preview
+          body-includes: '### 🕸 Preview deploys'
+
+      - if: github.event_name == 'pull_request'
+        name: Build comment body
+        id: comment
+        env:
+          EXISTING_BODY: ${{ steps.fc.outputs.comment-body }}
+          PREVIEW_URL: ${{ steps.deploy.outputs.static_web_app_url }}
+        run: |
+          BODY="### 🕸 Preview deploys"
+
+          STORYBOOK_LINE=$(echo "$EXISTING_BODY" | grep '^- \*\*Storybook:\*\*' || true)
+          if [ -n "$STORYBOOK_LINE" ]; then
+            BODY="$BODY
+          $STORYBOOK_LINE"
+          fi
+
+          BODY="$BODY
+          - **Website:** $PREVIEW_URL"
+
+          {
+            echo "body<<EOF"
+            echo "$BODY"
+            echo "EOF"
+          } >> "$GITHUB_OUTPUT"
 
       - if: github.event_name == 'pull_request'
         uses: peter-evans/create-or-update-comment@v4
         with:
           comment-id: ${{ steps.fc.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}
-          body: |
-            ### 🕸 Website preview
-            You can view a preview [here](${{ steps.deploy.outputs.static_web_app_url }}) (commit [`${{ github.event.pull_request.head.sha }}`](https://github.com/sl-design-system/components/commit/${{ github.event.pull_request.head.sha }})).
+          body: ${{ steps.comment.outputs.body }}
           edit-mode: replace
 
   cleanup: