[Enhancement] Update action to rely on Shopify CLI 3.x + Theme Access app

.github/workflows/ci.yml

@@ -1,7 +1,10 @@
 # https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions
 name: CI
 
-on: [push]
+on:
+  push:
+    branches:
+      - main
 
 jobs:
   check_dawn:

Dockerfile

@@ -1,3 +1,33 @@
-FROM cpclermont/lighthouse-ci-action:1.0.0
+FROM ruby:3
+
+# Install dependencies
+RUN apt-get update \
+    && apt-get -y install sudo jq chromium
+
+# Use latest bundler version so that Shopify CLI does not complain
+RUN gem install bundler -N
+
+# Install Shopify CLI 2.x
+RUN gem install shopify-cli -N
+
+# Install Node.js
+RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
+RUN apt-get install -y nodejs
+
+# See https://github.com/nodejs/docker-node/blob/main/docs/BestPractices.md#global-npm-dependencies
+# for reasons why we need to set `npm_config_prefix`.
+ENV npm_config_prefix="${GITHUB_WORKSPACE:-/home}/.node"
+ENV PATH="$npm_config_prefix:${PATH}"
+
+# Install Shopify CLI 3.x
+RUN npm install -g @shopify/cli @shopify/theme puppeteer @lhci/cli
+
+# Chrome in Docker fix
+# Install latest fonts to support major charsets (Chinese, Japanese, Arabic, Hebrew, Thai and a few others)
+# Note: this installs the necessary libs to make the bundled version of Chromium that Puppeteer installs, work.
+RUN apt-get install -y fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \
+    --no-install-recommends \
+    && rm -rf /var/lib/apt/lists/*
+
 COPY entrypoint.sh /entrypoint.sh
 ENTRYPOINT ["/entrypoint.sh"]

entrypoint.sh

@@ -10,17 +10,18 @@
 # delete the code below. Everything else is platform independent.
 #
 # Here, we're translating the GitHub action input arguments into environment variables
-# for this scrip to use.
+# for this script to use.
 [[ -n "$INPUT_STORE" ]]             && export SHOP_STORE="$INPUT_STORE"
 [[ -n "$INPUT_PASSWORD" ]]          && export SHOP_PASSWORD="$INPUT_PASSWORD"
 [[ -n "$INPUT_PRODUCT_HANDLE" ]]    && export SHOP_PRODUCT_HANDLE="$INPUT_PRODUCT_HANDLE"
 [[ -n "$INPUT_COLLECTION_HANDLE" ]] && export SHOP_COLLECTION_HANDLE="$INPUT_COLLECTION_HANDLE"
 [[ -n "$INPUT_THEME_ROOT" ]]        && export THEME_ROOT="$INPUT_THEME_ROOT"
 
 # Authentication creds
-export SHOP_ACCESS_TOKEN="$INPUT_ACCESS_TOKEN"
+export SHOPIFY_CLI_THEME_TOKEN="$INPUT_SHOPIFY_CLI_THEME_TOKEN"
 
 # Authentication creds (deprecated)
+export SHOP_ACCESS_TOKEN="$INPUT_ACCESS_TOKEN"
 [[ -n "$INPUT_APP_ID" ]]               && export SHOP_APP_ID="$INPUT_APP_ID"
 [[ -n "$INPUT_APP_PASSWORD" ]]         && export SHOP_APP_PASSWORD="$INPUT_APP_PASSWORD"
 
@@ -34,7 +35,13 @@ export SHOP_ACCESS_TOKEN="$INPUT_ACCESS_TOKEN"
 [[ -n "$INPUT_LHCI_MIN_SCORE_ACCESSIBILITY" ]] && export LHCI_MIN_SCORE_ACCESSIBILITY="$INPUT_LHCI_MIN_SCORE_ACCESSIBILITY"
 
 # Add global node bin to PATH (from the Dockerfile)
-export PATH="$PATH:$npm_config_prefix/bin"
+if [[ -n "$SHOPIFY_CLI_THEME_TOKEN" ]]; then
+  # Use Shopify CLI 3.x
+  export PATH="$npm_config_prefix/bin:$PATH"
+else
+  # Use Shopify CLI 2.x
+  export PATH="$PATH:$npm_config_prefix/bin"
+fi
 
 # END of GitHub Action Specific Code
 ####################################################################
@@ -53,12 +60,6 @@ step() {
 	EOF
 }
 
-is_installed() {
-  # This works with scripts and programs. For more info, check
-  # http://goo.gl/B9683D
-  type $1 &> /dev/null 2>&1
-}
-
 api_request() {
   local url="$1"
   local err="$(mktemp)"
@@ -118,38 +119,27 @@ cleanup() {
 
 trap 'cleanup $?' EXIT
 
-if ! is_installed lhci; then
-  step "Installing Lighthouse CI"
-  log npm install -g @lhci/cli@0.7.x puppeteer
-  npm install -g @lhci/cli@0.7.x puppeteer
-fi
-
-if ! is_installed shopify; then
-  step "Installing Shopify CLI"
-  log "gem install shopify"
-  gem install shopify
-fi
-
 step "Configuring shopify CLI"
 
-# Disable analytics
+# Disable analytics for CLI 2.x
 mkdir -p ~/.config/shopify && cat <<-YAML > ~/.config/shopify/config
 [analytics]
 enabled = false
 YAML
+# Disable analytics for CLI 3.x, see https://shopify.dev/themes/tools/cli#usage-reporting
+export SHOPIFY_CLI_NO_ANALYTICS=1
 
 # Secret environment variable that turns shopify CLI into CI mode that accepts environment credentials
 export CI=1
 export SHOPIFY_SHOP="${SHOP_STORE#*(https://|http://)}"
+export SHOPIFY_FLAG_STORE=$SHOPIFY_SHOP
 
 if [[ -n "$SHOP_ACCESS_TOKEN" ]]; then
   export SHOPIFY_PASSWORD="$SHOP_ACCESS_TOKEN"
 else
   export SHOPIFY_PASSWORD="$SHOP_APP_PASSWORD"
 fi
 
-shopify login
-
 host="https://${SHOP_STORE#*(https://|http://)}"
 theme_root="${THEME_ROOT:-.}"
 
@@ -160,7 +150,16 @@ log "Will run Lighthouse CI on $host"
 
 step "Creating development theme"
 theme_push_log="$(mktemp)"
-shopify theme push --development --json $theme_root > "$theme_push_log" && cat "$theme_push_log"
+if [[ -n "$SHOPIFY_CLI_THEME_TOKEN" ]]; then
+  # Use Shopify CLI 3.x
+  # In 3.x, you don't need to log in explicitly. If you aren't logged in,
+  # then you're prompted to log in when you run a command that requires authentication.
+  shopify theme push --development --json --path "$theme_root" | tee "$theme_push_log"
+else
+  # Use Shopify CLI 2.x
+  shopify login
+  shopify theme push --development --json "$theme_root" | tee "$theme_push_log"
+fi
 preview_url="$(cat "$theme_push_log" | tail -n 1 | jq -r '.theme.preview_url')"
 preview_id="$(cat "$theme_push_log" | tail -n 1 | jq -r '.theme.id')"
 
@@ -189,9 +188,11 @@ query_string="?preview_theme_id=${preview_id}&_fd=0&pb=0"
 min_score_performance="${LHCI_MIN_SCORE_PERFORMANCE:-0.6}"
 min_score_accessibility="${LHCI_MIN_SCORE_ACCESSIBILITY:-0.9}"
 
+
 cat <<- EOF > lighthouserc.yml
 ci:
   collect:
+    chromePath: "$(which chromium)"
     url:
       - "$host/$query_string"
       - "$host/products/$product_handle$query_string"