Test static website preview

.github/actions/build-workspace/action.yaml

@@ -0,0 +1,54 @@
+name: 'Build Workspace'
+description: 'Builds a workspace in a monorepo and handles dependencies.'
+
+inputs:
+  workspace_name:
+    description: 'The name of the workspace to build.'
+    required: true
+
+outputs:
+  package-manager:
+    description: 'The package manager used in the monorepo (npm, yarn, or pnpm).'
+    value: ${{ steps.node-setup.outputs.package-manager }}
+  workspace-path:
+    description: 'The path to the built workspace.'
+    value: ${{ steps.get-workspace-path.outputs.workspace-path }}
+
+runs:
+  using: "composite"
+  steps:
+    - name: Setup Node.js
+      id: node-setup
+      uses: pagopa/dx/.github/actions/node-setup@main
+
+    - name: Install dependencies (pnpm)
+      if: ${{ steps.node-setup.outputs.package-manager == 'pnpm' }}
+      shell: bash
+      run: pnpm --filter $WORKSPACE_NAME install
+      env:
+        WORKSPACE_NAME: ${{ inputs.workspace_name }}
+
+    - name: Install dependencies (yarn)
+      if: ${{ steps.node-setup.outputs.package-manager == 'yarn' }}
+      shell: bash
+      run: yarn install --immutable
+
+    - name: Install dependencies (npm)
+      if: ${{ steps.node-setup.outputs.package-manager == 'npm' }}
+      shell: bash
+      run: npm ci
+
+    - name: Build
+      shell: bash
+      run: npx turbo build --filter $WORKSPACE_NAME
+      env:
+        WORKSPACE_NAME: ${{ inputs.workspace_name }}
+
+    - name: Get Workspace path
+      id: get-workspace-path
+      shell: bash
+      run: |
+        WORKSPACE_PATH=$(npx turbo ls --output=json | jq -sr --arg NAME "$WORKSPACE_NAME" '.[].packages.items[] | select(.name == $NAME).path')
+        echo "workspace-path=$WORKSPACE_PATH" >> $GITHUB_OUTPUT
+      env:
+        WORKSPACE_NAME: ${{ inputs.workspace_name }}

.github/workflows/release-typescript-static-website-deploy-v1.yaml

@@ -19,6 +19,7 @@ name: Deploy Static Site to Azure
 #       - "apps/my-static-app/**"
 # To be sure that during a PR the preview will be triggered
 
+
 on:
   workflow_call:
     inputs:
@@ -30,7 +31,7 @@ on:
         description: The name of the build output directory.
         type: string
         required: false
-        default: 'dist'
+        default: "dist"
       static_web_app_name:
         description: Azure Static Web App name where the assets will be deployed.
         type: string
@@ -57,10 +58,10 @@ on:
         description: Needed for special cases where the environment alone is not sufficient as a distinguishing label
         type: string
         required: false
-        default: ''
+        default: ""
 
 concurrency:
-  group: ${{ github.workflow }}-ci
+  group: ${{ github.workflow }}-${{ github.ref }}-cd
   cancel-in-progress: true
 
 env:
@@ -76,61 +77,39 @@ jobs:
       - name: Checkout
         uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - name: Prune
-        run: npx turbo prune --scope=$WORKSPACE
-        env:
-          WORKSPACE: ${{ inputs.workspace_name }}
-
-      - name: Node Setup
-        id: node-setup
-        uses: pagopa/dx/.github/actions/node-setup@main
+      - name: Build Package
+        id: build-package
+        uses: pagopa/dx/.github/actions/build-workspace@main
         with:
-          working_dir: ./out
-
-      - name: Install dependencies (npm)
-        if: steps.node-setup.outputs.package-manager == 'npm'
-        run: npm ci
-        working-directory: ./out
-
-      - name: Install dependencies (yarn)
-        if: steps.node-setup.outputs.package-manager == 'yarn'
-        run: yarn install --immutable
-        working-directory: ./out
-
-      - name: Install dependencies (pnpm)
-        if: steps.node-setup.outputs.package-manager == 'pnpm'
-        run: pnpm install
-        working-directory: ./out
-
-      - name: Build project
-        run: npx turbo build
-        working-directory: ./out
-
-      - name: Find build output directory path
-        id: find_package
+          workspace_name: ${{ env.WORKSPACE_NAME }}
         env:
-          TURBO_PRINT_VERSION_DISABLED: 1
-          WORKSPACE: ${{ inputs.workspace_name }}
+          WORKSPACE_NAME: ${{ inputs.workspace_name }}
+
+      - name: Get Artifact path
+        id: get-artifact-path
+        working-directory: ${{ steps.build-package.outputs.workspace-path }}
         run: |
-          packages_path=$(npx turbo ls --output json | jq -sr --arg WORKSPACE "$WORKSPACE" '.[].packages.items[] | select(.name==$WORKSPACE).path')
-          echo "Found $OUTPUT_DIR directory at: ./out/$packages_path/$OUTPUT_DIR"
-          echo "packages_path=./out/$packages_path/$OUTPUT_DIR" >> $GITHUB_OUTPUT
+          echo "::debug::Packaging for static deployment"
+          echo "artifact-path=$(realpath ./$OUTPUT_DIR)" >> $GITHUB_OUTPUT
+        env:
+          OUTPUT_DIR: ${{ env.OUTPUT_DIR }}
 
       - name: Upload Artifact
         uses: pagopa/dx/.github/actions/upload-artifact@main
         with:
           bundle_name: ${{ env.BUNDLE_NAME }}
-          file_path: ${{ steps.find_package.outputs.packages_path }}
+          file_path: ${{ steps.get-artifact-path.outputs.artifact-path }}
 
   deploy:
-    name: Deploy
-    runs-on: ${{ inputs.use_labels && inputs.use_private_agent && (inputs.override_labels != '' && inputs.override_labels || inputs.environment) || inputs.use_private_agent && 'self-hosted' || 'ubuntu-latest' }}
+    name: Deploy Static Website
+    runs-on: ubuntu-latest
     needs: [build]
     if: ${{ !github.event.act }}
-    environment: ${{ inputs.environment }}-ci
+    environment: ${{ inputs.environment }}-${{ github.event.action == 'closed' && 'cd' || 'ci' }}
     permissions:
       id-token: write
       contents: read
+      pull-requests: write
 
     steps:
       - name: Checkout
@@ -155,16 +134,28 @@ jobs:
       - name: Find API Key
         id: find_api_key
         run: |
-          api_key=$(az staticwebapp secrets list --name ${{ inputs.static_web_app_name }} --resource-group ${{ inputs.resource_group_name }} | jq -r '.properties.apiKey')
+          api_key=$(az staticwebapp secrets list --name $STATIC_WEB_APP_NAME --resource-group $RESOURCE_GROUP_NAME | jq -r '.properties.apiKey')
           echo "::add-mask::$api_key"
-          echo "sensitive-value=$api_key" >> $GITHUB_OUTPUT
+          echo "api_key=$api_key" >> $GITHUB_OUTPUT
+        env:
+          STATIC_WEB_APP_NAME: ${{ inputs.static_web_app_name }}
+          RESOURCE_GROUP_NAME: ${{ inputs.resource_group_name }}
 
-      - name: Deploy
-        id: builddeploy
-        uses: Azure/static-web-apps-deploy@v1
+      - name: Deploy Preview
+        if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+        uses: Azure/static-web-apps-deploy@4d27395796ac319302594769cfe812bd207490b1 # v1
         with:
-          azure_static_web_apps_api_token: ${{ steps.find_api_key.outputs.sensitive-value }}
+          azure_static_web_apps_api_token: ${{ steps.find_api_key.outputs.api_key }}
           repo_token: ${{ secrets.GITHUB_TOKEN }}
           action: "upload"
           app_location: "./${{ env.OUTPUT_DIR }}"
-          api_location: ""
+
+      - name: Delete Preview and Deploy production
+        if: github.event_name == 'pull_request' && github.event.action == 'closed'
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ steps.find_api_key.outputs.api_key }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          app_location: "./${{ env.OUTPUT_DIR }}"
+          action: "close"
+

.github/workflows/test-azure-deploy-static-website.yaml

@@ -27,7 +27,7 @@ on:
 #           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
 #           repo_token: ${{ secrets.GITHUB_TOKEN }}
 #           action: "upload"
-          
+
 #           app_location: "/apps/static-test-app/"
 #           api_location: ""
 #           output_location: "dist"
@@ -41,4 +41,5 @@ jobs:
       output_dir: "dist"
       static_web_app_name: "dx-d-itn-test-preview-sapp-01"
       resource_group_name: "dx-d-itn-test-rg-01"
-      environment: "infra-dev"
+      environment: "infra-dev"
+

apps/static-test-app/public/index.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="it">
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Il Mio Portfolio di Prova</title>
+    <title>My Test Portfolio</title>
     <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -71,30 +71,30 @@
     <div class="container">
         <header>
             <!-- MAIN TITLE -->
-            <h1>Il Mio Fantastico Portfolio</h1>
-            <p>Sviluppatore Web & Amante del Cloud</p>
+            <h1>My Super Awesome Portfolio</h1>
+            <p>Web Developer & Cloud Enthusiast</p>
         </header>
 
         <main>
             <div id="preview-banner" class="preview-banner">
-                ⚠️ Attenzione: Stai visualizzando un'anteprima di una Pull Request. ⚠️
+                ⚠️ Warning: You are viewing a Pull Request preview. ⚠️
             </div>
 
-            <h2>I Miei Progetti</h2>
+            <h2>My Projects</h2>
 
             <div class="project">
-                <h3>Progetto Alpha</h3>
-                <p>Una web app innovativa costruita con le più moderne tecnologie per risolvere un problema complesso.</p>
+                <h3>Project Alpha</h3>
+                <p>An innovative web app built with the most modern technologies to solve a complex problem.</p>
             </div>
 
             <div class="project">
-                <h3>Progetto Beta</h3>
-                <p>Un sito di e-commerce performante e facile da usare, ottimizzato per la conversione.</p>
+                <h3>Project Beta</h3>
+                <p>A high-performance and user-friendly e-commerce site, optimized for conversion.</p>
             </div>
         </main>
 
         <footer>
-            <p>&copy; 2025 Il Mio Portfolio. Tutti i diritti riservati.</p>
+            <p>&copy; 2025 My Portfolio. All rights reserved.</p>
         </footer>
     </div>