Add workflow for production builds

.github/workflows/build-and-deploy.yml

@@ -0,0 +1,84 @@
+name: Build and Upload to S3
+
+on:
+  workflow_call:
+    inputs:
+      cookiebot_domain_group_id:
+        required: false
+        default: "1e9a6bdd-5870-4d54-8e5f-adcf6b5c5499"
+        type: string
+      deploy_dir:
+        required: true
+        type: string
+      environment:
+        required: true
+        type: string
+      public_url:
+        required: true
+        type: string
+      react_app_api_endpoint:
+        required: false
+        default: "https://staging-editor-api.raspberrypi.org"
+        type: string
+      react_app_authentication_client_id:
+        required: false
+        default: editor-api
+        type: string
+      react_app_authentication_url:
+        required: false
+        default: "https://staging-auth-v1.raspberrypi.org"
+        type: string
+      react_app_login_enabled:
+        required: false
+        default: "true"
+        type: string
+    secrets:
+      AWS_ACCESS_KEY_ID:
+        required: true
+      AWS_REGION:
+        required: true
+      AWS_S3_BUCKET:
+        required: true
+      AWS_SECRET_ACCESS_KEY:
+        required: true
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: ${{ inputs.environment }}
+      url: ${{ inputs.public_url }}
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v1
+
+    - name: Cache dependencies
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16
+        cache: 'yarn'
+
+    - name: Configure AWS credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws-region: ${{ secrets.AWS_REGION }}
+
+    - name: Install code
+      run: yarn install --frozen-lock-file
+
+    - name: Build site and WC bundle
+      run: |
+        yarn build
+        yarn build:wc
+      env:
+        COOKIEBOT_DOMAIN_GROUP_ID: ${{ inputs.cookiebot_domain_group_id }}
+        PUBLIC_URL: ${{ inputs.public_url }}
+        REACT_APP_API_ENDPOINT: ${{ inputs.react_app_api_endpoint }}
+        REACT_APP_AUTHENTICATION_CLIENT_ID: ${{ inputs.react_app_authentication_client_id }}
+        REACT_APP_AUTHENTICATION_URL: ${{ inputs.react_app_authentication_url }}
+        REACT_APP_LOGIN_ENABLED: ${{ inputs.react_app_login_enabled }}
+
+    - name: Deploy site to S3 bucket
+      run: aws s3 sync ./build/ s3://${{ secrets.AWS_S3_BUCKET }}/${{ inputs.deploy_dir }} --delete

.github/workflows/main.yml

@@ -45,7 +45,14 @@ jobs:
       run: yarn install --frozen-lock-file
 
     - name: Run tests
-      run: yarn test
+      run: yarn run test --coverage --maxWorkers=4 --reporters=default --reporters=jest-junit --reporters=jest-github-actions-reporter
+      env:
+        JEST_JUNIT_OUTPUT_DIR: ./coverage/
+
+    - name: Record coverage
+      run: ./.github/workflows/record_coverage
+      env:
+        GITHUB_TOKEN: ${{ github.token }}
 
   test-cypress:
     runs-on: ubuntu-latest
@@ -82,68 +89,37 @@ jobs:
           cypress/screenshots
           cypress/videos
 
-  build-deploy:
+
+  build-and-deploy-release:
+    if: github.ref_type == 'tag'
     needs:
       - test
-     # Disabling test-cypress while it is flaky
-     # - test-cypress
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v1
-
-    - name: Cache dependencies
-      uses: actions/setup-node@v3
-      with:
-        node-version: 16
-        cache: 'yarn'
-
-    - name: Configure AWS credentials
-      uses: aws-actions/configure-aws-credentials@v1
-      with:
-        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-        aws-region: eu-west-2
-
-    - name: Set bucket
-      run: |
-        if [ ${{ github.ref_type }} == 'tag' ]; then
-          echo "Deploying to production bucket"
-          echo "bucket=python-editor-dist-test" >> $GITHUB_ENV
-        else
-          echo "Deploying to staging/preview bucket"
-          echo "bucket=python-editor-dist-test" >> $GITHUB_ENV
-        fi
-      shell: bash
-
-    - name: Set deploy directory
-      run: |
-        if [ ${{ github.ref_type }} == 'tag' ]; then
-          echo "Deploying tagged release ${{ github.ref_name }}"
-          echo "deploy_dir=${{ github.ref_name }}" >> $GITHUB_ENV
-        elif [ ${{ github.ref }} == 'refs/head/main' ]; then
-          echo "Deploying staging release"
-          echo "deploy_dir=staging" >> $GITHUB_ENV
-        else
-          echo "Deploying preview release ${{ github.ref_name }}"
-          echo "deploy_dir=previews/${{ github.ref_name }}" >> $GITHUB_ENV
-        fi
-      shell: bash
-
-    - name: Set PUBLIC_URL
-      run: |
-        public_url=https://${{ env.bucket }}.s3.eu-west-2.amazonaws.com/${{ env.deploy_dir }}
-        echo "Setting PUBLIC_URL to $public_url"
-        echo PUBLIC_URL=$public_url >> $GITHUB_ENV
-      shell: bash
-
-    - name: Install code
-      run: yarn install --frozen-lock-file
-
-    - name: Build site and WC bundle
-      run: |
-        yarn build
-        yarn build:wc
+    uses: ./.github/workflows/build-and-deploy.yml
+    with:
+      deploy_dir: ${{ github.ref_name }}
+      environment: production
+      public_url: https://editor.raspberrypi.org/${{ github.ref_name }}
+      react_app_api_endpoint: https://editor-api.raspberrypi.org
+      react_app_authentication_url: https://auth-v1.raspberrypi.org
+    secrets: inherit
+
+  build-and-deploy-staging:
+    if: github.ref == 'refs/heads/main'
+    needs:
+      - test
+    uses: ./.github/workflows/build-and-deploy.yml
+    with:
+      deploy_dir: ${{ github.ref_name }}
+      environment: staging
+      public_url: https://staging-editor.raspberrypi.org/${{ github.ref_name }}
+    secrets: inherit
+
+  build-and-deploy-preview:
+    if: github.ref_type == 'branch' && github.ref != 'refs/heads/main'
+    uses: ./.github/workflows/build-and-deploy.yml
+    with:
+      deploy_dir: previews/${{ github.ref_name }}
+      environment: previews/${{ github.ref_name }}
+      public_url: http://python-editor-dist-test.s3-website.eu-west-2.amazonaws.com/previews/${{ github.ref_name }}
+    secrets: inherit
 
-    - name: Deploy site to S3 bucket
-      run: aws s3 sync ./build/ s3://${{ env.bucket }}/${{ env.deploy_dir }} --delete

.circleci/record_coverage → .github/workflows/record_coverage

@@ -1,18 +1,11 @@
-#!/bin/bash -ueo pipefail
+#!/bin/bash -eu
 
 # Record coverage
 #
-# This script uses the Circle and Github APIs to poke a comment into a PR about test coverage.
+# This script uses the Github APIs to poke a comment into a PR about test coverage.
 #
-# To work, the GITHUB_TOKEN and CIRCLE_TOKEN vars must be in the environment,
-# with appropriate API tokens from GH and Circle.
+# To work, the GITHUB_TOKEN var must be in the environment
 #
-# Also to get the magic link to your  test coverage, you'll want to store the
-# `coverage/` directory.
-#```
-#  - store_artifacts:
-#     path: coverage
-#```
 
 CURL_ARGS="-s -S -f"
 
@@ -43,9 +36,10 @@ fi
 sudo apt update -qq
 sudo apt install -qq --no-install-recommends -y xmlstarlet
 which jq > /dev/null || sudo apt-get install -y jq
+which curl > /dev/null || sudo apt-get install -y curl
 
 # This is the message that makes it into github
-msg="* CircleCI build [#${CIRCLE_BUILD_NUM}](${CIRCLE_BUILD_URL})\n"
+msg="* Github [Run ${GITHUB_RUN_ID}]($GITHUB_SERVER_URL/$GITHUB_REPOSITORY/actions/runs/$GITHUB_RUN_ID)\n"
 msg="$msg* Test coverage: "
 
 statements=$(xmlstarlet sel -t  -v '/coverage/project[@name="All files"]/metrics/@statements' $clover_xml)
@@ -58,21 +52,13 @@ if [ "${coverage}" = "null" ] ; then
   exit 0
 fi
 
-artifacts_response=$(curl $CURL_ARGS -H "Circle-Token: $CIRCLE_TOKEN" https://circleci.com/api/v1.1/project/gh/${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME}/${CIRCLE_BUILD_NUM}/artifacts)
-coverage_url=$(echo ${artifacts_response} | jq -r '. | map(select(.path == "coverage/lcov-report/index.html"))[0].url')
-
-if ! [ "${coverage_url}" = "null" ] ; then
-  msg="$msg [$coverage%]($coverage_url)\n\n"
-else
-  msg="$msg $coverage%\n\n"
-  msg="$msg > CircleCI didn't store the coverage index (maybe the store_artifacts step is missing?)"
-fi
+msg="$msg $coverage%\n\n"
 
 # Find associated PR.  *NB* we're assuming that the first, open PR is the one
 # to comment on.
 q="query {
-  repository(name: \"${CIRCLE_PROJECT_REPONAME}\", owner: \"${CIRCLE_PROJECT_USERNAME}\") {
-    ref(qualifiedName: \"${CIRCLE_BRANCH}\") {
+  repository(name: \"${GITHUB_REPOSITORY##*/}\", owner: \"${GITHUB_REPOSITORY%%/*}\") {
+    ref(qualifiedName: \"${GITHUB_REF_NAME}\") {
       associatedPullRequests(first: 1) {
         nodes {
           id

CHANGELOG.md

@@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+- Update build workflow with a reusable job to update preview, staging, and prod (#176)
+
 ## [0.3.0]
 
 ### Added

README.md

@@ -65,6 +65,18 @@ It is possible to add query strings to control how the web component is configur
 
 For example, to load the page with the Sense Hat always showing, add [`?sense_hat_always_enabled` to the URL](http://localhost:3001?sense_hat_always_enabled)
 
-## Review apps
+## Deployment
+
+Deployment is managed through Giithub actions.  The UI is deployed to staging and production environments via an S3 bucket.  This requires the following environment variables to be set
+
+* `AWS_ACCESS_KEY_ID`
+* `AWS_REGION`
+* `AWS_S3_BUCKET`
+* `AWS_SECRET_ACCESS_KEY`
+
+Other variables that pertain to the app, rather than its deployment are set with defaults in the [build-and-deploy workflow](./.github/workflows/build-and-deploy.yml).  These are also in `.env.example`.
+
+### Review apps
 
 Currently the build is deployed to both S3 and Heroku.  The PR should get updated with the Heroku URL, and the web component demo is at `/web-component.html` on the Heroku review app domain.
+