[CI workflow] automate generating, configurating, and deploying build from develop branch (@W-19170135@) (#3058)

* Add new performance metrics workflow

* Add comment

* Disable some steps that are not needed

* Update todos

* Generate the project

* Avoid dirtying workspace and remove unnecessary step

* Tweak parameters

* Allow for internal short codes

* Align with the order of answers to the extensibility question

* Create update-csp-directives.js

* Rename script for clarity

* Schedule it to run before the performance tests

* Move constant into the config file

* Move CSP directives into the config file

* Make sure the corresponding .hbs files are up to date

* Now scripts looks for the config file

* Fix linting errors

* Add auto lint fixing

* For backward compatibility

* New step to add CSP directives

* Log where the file is at

* Add a new script

* Address a few todos

* Allow updating property with the same value

* Finish and clean up the workflow

* Move scripts and remove default value for config path

* No longer assume default value for config path

And no longer preserving comments

* No longer support null, undefined values

* Delete unnecessary comments

* Revert changes in retail-react-app

* Create a new generator preset

* Revert changes to the generator

* Add csp directives to ssr.js.hbs

* Update app/constants.js files to support the new preset

* No longer needing these scripts

* Workflow now uses the new generator preset

* No need to validate app in this case

* Add the preset to more files

* Revert some changes and keep one change

* Delete extra space

* Empty commit

* Simplify the handlebar template logic

* No more hardcoding the `generated-projects` path

* Move feature toggle for partial hydration into the config file

* Remove unnecessary tests

* Update CHANGELOG.md

* Make sure all ssr.js related files are in sync

* Fix linting error

I wanted to preserve the comma at the end of the line because otherwise, I'm worried that it's easy to overlook it later.

---------

Co-authored-by: Jainam Sheth <j.sheth@salesforce.com>

Author: vmarta

.github/actions/e2e_generate_app/action.yml

@@ -10,14 +10,24 @@ inputs:
     required: false
     type: string
 
+outputs:
+  project_path:
+    description: Path to the generated project directory
+    value: ${{ steps.generate_project.outputs.project_path }}
+
 runs:
   using: composite
   steps:
   - name: Generate new project based on project-key
+    id: generate_project
     run: |
       COMMAND="node e2e/scripts/generate-project.js --project-key ${{ inputs.PROJECT_KEY }}"
       if [[ -n "${{ inputs.TEMPLATE_VERSION }}" ]]; then
         COMMAND="$COMMAND --templateVersion ${{ inputs.TEMPLATE_VERSION }}"
       fi
       $COMMAND
+
+      # Return path to the generated project
+      GENERATED_PROJECTS_DIR=$(node -e "console.log(require('./e2e/config.js').GENERATED_PROJECTS_DIR)")
+      echo "project_path=$GENERATED_PROJECTS_DIR/${{ inputs.PROJECT_KEY }}" >> $GITHUB_OUTPUT
     shell: bash

.github/actions/generate_app/action.yml

@@ -22,6 +22,11 @@ inputs:
   project_dir:
     description: Project Directory
 
+outputs:
+  project_path:
+    description: Path to the generated project directory
+    value: ${{ steps.generate_project.outputs.project_path }}
+
 runs:
   using: composite
   steps:
@@ -31,20 +36,20 @@ runs:
       run: |
         use_extensibility_input="${{ inputs.use_extensibility }}"
         if [ "use_extensibility_input" = "true" ]; then
-         use_extensibility_value=2
-        else
          use_extensibility_value=1
+        else
+         use_extensibility_value=2
         fi
-        echo "USE_EXTENSIBILITY_VALUE=$use_extensibility_value" >> $GITHUB_ENV 
-        
+        echo "USE_EXTENSIBILITY_VALUE=$use_extensibility_value" >> $GITHUB_ENV
+
         is_private_client_input="${{ inputs.is_private_client }}"
         if [ "$is_private_client_input" = "true" ]; then
          is_private_client_value=1
         else
           is_private_client_value=2
         fi
         echo "IS_PRIVATE_CLIENT_VALUE=$is_private_client_value" >> $GITHUB_ENV
-        
+
         setup_hybrid_input="${{ inputs.setup_hybrid }}"
         if [ "$setup_hybrid_input" = "true" ]; then
           setup_hybrid_value=2
@@ -53,6 +58,8 @@ runs:
         fi
         echo "SETUP_HYBRID_VALUE=$setup_hybrid_value" >> $GITHUB_ENV
 
+    # TODO: update this to use the standard input feature that Ben created recently
+    # TODO: this action does not finish successfully because of a dirty-workspace error, due to creating this generator-responses.json
     - name: Build project generator inputs
       id: build_generator_inputs
       shell: bash
@@ -107,11 +114,16 @@ runs:
       run: |
         cat generator-responses.json
         node e2e/scripts/generate-project.js --project-config "$(jq -c . generator-responses.json)"
+
+        # Return path to the generated project
+        GENERATED_PROJECTS_DIR=$(node -e "console.log(require('./e2e/config.js').GENERATED_PROJECTS_DIR)")
+        echo "project_path=$GENERATED_PROJECTS_DIR/${{ inputs.project_dir }}" >> $GITHUB_OUTPUT
       shell: bash
 
+    # TODO: I think we can safely delete this step. We already install the dependencies in the previous step.
     - name: Build generated project
       id: build_generated_project
-      working-directory: ../generated-projects/${{ inputs.project_dir }}
+      working-directory: ${{ steps.generate_project.outputs.project_path }}
       run: |-
         npm ci
         npm run build

.github/workflows/deploy_latest_release.yml

@@ -70,6 +70,7 @@ jobs:
           node ./scripts/gtime.js monorepo_install npm ci
 
       - name: Generate Retail App Demo
+        id: generate_app
         uses: ./.github/actions/e2e_generate_app
         with:
           PROJECT_KEY: ${{ matrix.environment.project_key }}
@@ -94,7 +95,7 @@ jobs:
       - name: Push Bundle to MRT (${{matrix.environment.name}})
         uses: "./.github/actions/push_to_mrt"
         with:
-          CWD: "../generated-projects/${{ matrix.environment.project_key }}"
+          CWD: ${{ steps.generate_app.outputs.project_path }}
           TARGET: ${{ matrix.environment.target }}
           PROJECT: ${{ matrix.environment.project }}
           MESSAGE: ${{ env.BUNDLE_NAME }})

.github/workflows/e2e-pr.yml

@@ -64,6 +64,7 @@ jobs:
                   echo "retail_app_template_version=$version" >> "$GITHUB_ENV"
 
             - name: Generate Retail App Private Client
+              id: generate_app
               if: ${{ env.SKIP_WORKFLOW != 'true' }}
               uses: ./.github/actions/e2e_generate_app
               with:
@@ -89,7 +90,7 @@ jobs:
               if: ${{ env.SKIP_WORKFLOW != 'true' }}
               uses: './.github/actions/push_to_mrt'
               with:
-                  CWD: '../generated-projects/retail-app-no-ext'
+                  CWD: ${{ steps.generate_app.outputs.project_path }}
                   # TODO: Use the MRT target ID from the target lock step above.
                   TARGET: e2e-tests-pwa-kit
                   FLAGS: --wait

.github/workflows/e2e.yml

@@ -114,6 +114,7 @@ jobs:
           echo "retail_app_template_version=$version" >> "$GITHUB_ENV"
 
       - name: Generate Retail App Without Extensibility
+        id: generate_app_no_ext
         uses: ./.github/actions/e2e_generate_app
         with:
           PROJECT_KEY: "retail-app-no-ext"
@@ -134,7 +135,7 @@ jobs:
       - name: Push Bundle to MRT (E2E Test PWA Kit)
         uses: "./.github/actions/push_to_mrt"
         with:
-          CWD: "../generated-projects/retail-app-no-ext"
+          CWD: ${{ steps.generate_app_no_ext.outputs.project_path }}
           TARGET: e2e-tests-pwa-kit
           FLAGS: --wait
 
@@ -231,6 +232,7 @@ jobs:
           echo "retail_app_template_version=$version" >> "$GITHUB_ENV"
 
       - name: Generate Retail App With Extensibility
+        id: generate_app_ext
         uses: ./.github/actions/e2e_generate_app
         with:
           PROJECT_KEY: "retail-app-ext"
@@ -251,7 +253,7 @@ jobs:
       - name: Push Bundle to MRT (E2E Test PWA Kit)
         uses: "./.github/actions/push_to_mrt"
         with:
-          CWD: "../generated-projects/retail-app-ext"
+          CWD: ${{ steps.generate_app_ext.outputs.project_path }}
           TARGET: e2e-tests-pwa-kit
           FLAGS: --wait
 
@@ -346,6 +348,7 @@ jobs:
           echo "retail_app_template_version=$version" >> "$GITHUB_ENV"
 
       - name: Generate Retail App Private Client
+        id: generate_app_private_client
         uses: ./.github/actions/e2e_generate_app
         with:
           PROJECT_KEY: "retail-app-private-client"
@@ -366,7 +369,7 @@ jobs:
       - name: Push Bundle to MRT
         uses: "./.github/actions/push_to_mrt"
         with:
-          CWD: "../generated-projects/retail-app-private-client"
+          CWD: ${{ steps.generate_app_private_client.outputs.project_path }}
           TARGET: e2e-pwa-kit-private
           FLAGS: --wait
 

.github/workflows/performance-metrics.yml

@@ -0,0 +1,46 @@
+name: SalesforceCommerceCloud/pwa-kit/performance-metrics
+
+on:
+    workflow_dispatch: # Allows you to manually run the workflow on any branch.
+    schedule:
+        # Run every day at 7pm (PST) - cron uses UTC times.
+        # We want to run it before the performance tests are scheduled to run.
+        # Runs on the default branch.
+        - cron: '0 3 * * *'
+
+jobs:
+    run-performance-metrics:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Setup Node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 22
+                  cache: npm
+
+            - name: Install Monorepo Dependencies
+              run: |-
+                  npm ci
+
+            - name: Generate App
+              id: generate_app
+              uses: ./.github/actions/e2e_generate_app
+              with:
+                PROJECT_KEY: "retail-react-app-performance-tests"
+
+            - name: Create MRT credentials file
+              uses: './.github/actions/create_mrt'
+              with:
+                  mobify_user: ${{ secrets.MOBIFY_STG_CLIENT_USER }}
+                  mobify_api_key: ${{ secrets.MOBIFY_STG_CLIENT_API_KEY }}
+
+            - name: Push Bundle to MRT
+              uses: './.github/actions/push_to_mrt'
+              with:
+                  CWD: '${{ steps.generate_app.outputs.project_path }}'
+                  PROJECT: q4-pwa-perf-develop
+                  TARGET: production
+                  FLAGS: --wait --cloud-origin https://cloud-testing.mobify-staging.com

.github/workflows/setup_pwa_manual.yml

@@ -89,6 +89,6 @@ jobs:
         with:
           project_id: ${{ github.event.inputs.project_id }}
           target_id: ${{ github.event.inputs.mrt_target_id }}
-          project_dir: "../generated-projects/${{ env.PROJECT_DIR }}"
+          project_dir: "${{ steps.generate_app.outputs.project_path }}"
           mobify_user: ${{ secrets.MOBIFY_CLIENT_USER }}
           mobify_api_key: ${{ secrets.MOBIFY_CLIENT_API_KEY }}

e2e/config.js

@@ -104,11 +104,13 @@ module.exports = {
     "retail-app-private-client": [],
     "retail-react-app-bug-bounty": [],
     "retail-react-app-demo-site": [],
+    "retail-react-app-performance-tests": [],
   },
   PRESET: {
     "retail-app-private-client": "retail-react-app-private-slas-client",
     "retail-react-app-bug-bounty": "retail-react-app-bug-bounty",
-    "retail-react-app-demo-site": "retail-react-app-demo-site-internal"
+    "retail-react-app-demo-site": "retail-react-app-demo-site-internal",
+    "retail-react-app-performance-tests": "retail-react-app-performance-tests"
   },
   EXPECTED_GENERATED_ARTIFACTS: {
     "retail-app-demo": [

e2e/scripts/generate-project.js

@@ -69,7 +69,8 @@ program
             'retail-app-no-ext',
             'retail-app-private-client',
             'retail-react-app-bug-bounty',
-            'retail-react-app-demo-site'
+            'retail-react-app-demo-site',
+            'retail-react-app-performance-tests'
         ]
         if (!validKeys.includes(value)) {
             throw new Error('Invalid project key.')

packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs

@@ -10,6 +10,12 @@ const {parseCommerceAgentSettings} = require('./utils.js')
 
 module.exports = {
     app: {
+        // Enable partial hydration capabilities via Island component
+        {{#if answers.project.partialHydrationEnabled}}
+        partialHydrationEnabled: {{answers.project.partialHydrationEnabled}},
+        {{else}}
+        partialHydrationEnabled: false,
+        {{/if}}
         // Commerce shopping agent configuration for embedded messaging service
         // This enables an agentic shopping experience in the application
         // This property accepts either a JSON string or a plain JavaScript object.