DISPLAY-986: Update docker build and github workflows

.github/workflows/docker_build_develop.yml

@@ -14,27 +14,30 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v3
-        with:
-          images: itkdev/os2display-client
+        uses: actions/checkout@v3
 
       - name: Login to DockerHub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USER }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: os2display/os2display-client
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
       - name: Set release timestamp
         run: |
           echo "APP_RELEASE_TIMESTAMP=$(echo $(date +%s))" >> $GITHUB_ENV
           echo "APP_RELEASE_TIME=$(echo $(date))" >> $GITHUB_ENV
 
       - name: Build and push (API)
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
         with:
           context: ./infrastructure/
           file: ./infrastructure/Dockerfile

.github/workflows/docker_build_tag.yml

@@ -10,37 +10,36 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v3
-        with:
-          images: itkdev/os2display-client
+        uses: actions/checkout@v3
 
       - name: Login to DockerHub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USER }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: os2display/os2display-client
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
       - name: Set release timestamp
         run: |
           echo "APP_RELEASE_TIMESTAMP=$(echo $(date +%s))" >> $GITHUB_ENV
           echo "APP_RELEASE_TIME=$(echo $(date))" >> $GITHUB_ENV
 
-      - name: Get the tag
-        id: get_tag
-        run: echo ::set-output name=git_tag::$(echo $GITHUB_REF_NAME)
-
       - name: Build and push (API)
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
         with:
           context: ./infrastructure/
           file: ./infrastructure/Dockerfile
           build-args: |
             APP_VERSION=${{ github.ref }}
-            APP_RELEASE_VERSION=${{ steps.get_tag.outputs.git_tag }}
+            APP_RELEASE_VERSION=$GITHUB_REF_NAME
             APP_RELEASE_TIMESTAMP=${{ env.APP_RELEASE_TIMESTAMP }}
             APP_RELEASE_TIME=${{ env.APP_RELEASE_TIME }}
           push: true

.github/workflows/github_build_release.yml

@@ -0,0 +1,57 @@
+on:
+  push:
+    tags:
+      - '*.*.*'
+
+name: Create Github Release
+
+permissions:
+  contents: write
+
+jobs:
+  create-release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Make build dir
+        run: |
+          mkdir -p build
+
+      - name: Build assets
+        run: |
+          docker network create frontend
+          docker compose run --rm node yarn install
+          docker compose run --rm node yarn build
+
+      - name: Create release file
+        run: |
+          rm build/example_release.json
+          printf "{\n  \"releaseTimestamp\": $(date +%s),\n  \"releaseTime\": \"$(date)\",\n  \"releaseVersion\": \"${{ github.ref_name }}\"\n}" > build/release.json
+          cat build/release.json
+
+      - name: Rename build dir
+        # Make archive directory name match expected build "homepage": "/client/",
+        run: |
+          mv build/ client
+
+      - name: Make artefacts dir
+        run: |
+          mkdir -p ../assets
+
+      - name: Create archive
+        run: |
+          tar \
+            --exclude ='client/fixtures' \
+            -zcf ../assets/${{ github.event.repository.name }}-${{ github.ref_name }}.tar.gz client/*
+
+      - name: Create checksum
+        run: sha256sum ../assets/${{ github.event.repository.name }}-${{ github.ref_name }}.tar.gz > ../assets/checksum.txt
+
+      - name: Create a release in GitHub and uploads assets
+        run: |
+          gh release create ${{ github.ref_name }} --verify-tag --generate-notes ../assets/*.*
+        env:
+          GITHUB_TOKEN: ${{ github.TOKEN }}
+        shell: bash

.github/workflows/pr.yml

@@ -1,52 +1,35 @@
 on: pull_request
-name: Review
+name: Pull Request Review
 jobs:
   frontend-build:
     name: Frontend build
     runs-on: ubuntu-latest
-    container: node:14
     steps:
-      - uses: actions/checkout@v2
-      - name: Cache node modules
-        uses: actions/cache@v2
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: ~/.yarn
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
-      - name: install
-        run: yarn
+      - name: Checkout
+        uses: actions/checkout@v3
 
-      - name: Build production assets
-        run: yarn build
+      - name: Make build dir
+        run: |
+          mkdir -p build
+
+      - name: Build assets
+        run: |
+          docker network create frontend
+          docker compose run --rm node yarn install
+          docker compose run --rm node yarn build
 
   frontend-coding-standards:
     name: Frontend coding standards
     runs-on: ubuntu-latest
-    container: node:14
     steps:
-      - uses: actions/checkout@v2
-
-      - name: Cache node modules
-        uses: actions/cache@v2
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: ~/.yarn
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
-      - name: install
-        run: yarn
+      - name: Checkout
+        uses: actions/checkout@v3
 
       - name: React coding standards
-        run: yarn check-coding-standards
+        run: |
+          docker network create frontend
+          docker compose run --rm node yarn install
+          docker compose run --rm node yarn check-coding-standards
 
   cypress:
     name: Cypress
@@ -57,33 +40,33 @@ jobs:
         browser: ["chrome"]
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Setup network
         run: docker network create frontend
 
       - name: Install client
-        run: docker-compose run node yarn
+        run: docker compose run node yarn
 
       - name: Cypress run
-        run: docker-compose run cypress run --browser ${{ matrix.browser }}
+        run: docker compose run cypress run --browser ${{ matrix.browser }}
 
       - name: Archive screenshots
         if: ${{ failure() }}
         uses: actions/upload-artifact@v2
         with:
-          name: cypress-screenhosts-${{ matrix.browser }}
+          name: cypress-screenshots-${{ matrix.browser }}
           path: cypress/screenshots
           retention-days: 7
 
   changelog:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     name: Changelog should be updated
     strategy:
       fail-fast: false
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 2
 

CHANGELOG.md

@@ -3,6 +3,11 @@
 All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
+- [#105](https://github.com/os2display/display-client/pull/105)
+  Update docker build to publish to "os2display" org on docker hup.
+  Update github workflow to latest actions.
+  Add github workflow to build and create release.
+  Change `example_config.json` to use relative paths.
 
 ## [1.2.5] - 2023-06-06
 

README.md

@@ -9,13 +9,13 @@ Start docker setup
 
 ```
 # Install npm packages
-docker-compose run node yarn install
+docker compose run node yarn install
 
 # Up the containers
-docker-compose up -d
+docker compose up -d
 
 # Optional: Follow the node logs to see when the code is compiled.
-docker-compose logs -f node
+docker compose logs -f node
 ```
 
 The display client is here: `http://display-client.local.itkdev.dk/`.
@@ -34,10 +34,10 @@ For code analysis we use the [Airbnb style guide for javascript](https://github.
 
 ```
 # Check for coding standards issues
-docker-compose exec node bash -c 'yarn check-coding-standards'
+docker compose exec node bash -c 'yarn check-coding-standards'
 
 # Auto-correct coding standards issues
-docker-compose exec node bash -c 'yarn apply-coding-standards'
+docker compose exec node bash -c 'yarn apply-coding-standards'
 ```
 
 ## Testing with cypress
@@ -47,11 +47,26 @@ We use [cypress](https://www.cypress.io/) for testing.
 To run cypress tests in the cypress container:
 
 ```
-docker-compose run cypress run
+docker compose run cypress run
 ```
 
 ## Build for production
 
-Builds the app for production to the build folder.
+Github actions will build both docker images published to [docker hub](https://hub.docker.com/repository/docker/os2display/os2display-client/general) and release assets published as [github releases](https://github.com/os2display/display-client/releases). To run the display client choose which option suits you and download it.
 
-@TODO: Add production build instructions.
+If you wish to do your own production build, you need to do
+```shell
+docker compose run node yarn install
+docker compose run node yarn build
+
+# Make release file. Replace 'x.y.z' with relevant release version
+printf "{\n  \"releaseTimestamp\": $(date +%s),\n  \"releaseTime\": \"$(date)\",\n  \"releaseVersion\": \"x.y.z\"\n}" > build/release.json
+
+# Make config file
+cp public/example_config.json build/config.json
+```
+
+This will build the client configured to be hosted at `/client`. If you wish to host at a different path
+you need to edit `homepage` in `package.json` and re-build.
+
+For instructions on how to host a complete OS2display setup please see the [docs](https://os2display.github.io/display-docs/).

infrastructure/etc/confd/templates/config.tmpl

@@ -1,5 +1,5 @@
 {
-  "apiEndpoint": "{{ getenv "APP_API_ENDPOINT" "" }}",
+  "apiEndpoint": "{{ getenv "APP_API_ENDPOINT" "/" }}",
   "authenticationEndpoint": "{{ getenv "APP_API_AUTHENTICATION_ENDPOINT" "/v1/authentication/token" }}",
   "authenticationRefreshTokenEndpoint": "{{ getenv "APP_API_AUTHENTICATION_REFRESH_ENDPOINT" "/v1/authentication/token/refresh" }}",
   "dataStrategy": {

infrastructure/run.sh

@@ -7,6 +7,6 @@ APP_RELEASE_TIME=$(date)
 APP_VERSION=develop
 VERSION=alpha
 
-docker build --pull --no-cache --build-arg APP_VERSION=${APP_VERSION} --build-arg APP_RELEASE_TIMESTAMP="${APP_RELEASE_TIMESTAMP}" --build-arg APP_RELEASE_TIME="${APP_RELEASE_TIME}" --tag=itkdev/os2display-client:${VERSION} --file="Dockerfile" .
+docker build --pull --no-cache --build-arg APP_VERSION=${APP_VERSION} --build-arg APP_RELEASE_TIMESTAMP="${APP_RELEASE_TIMESTAMP}" --build-arg APP_RELEASE_TIME="${APP_RELEASE_TIME}" --tag=os2display/os2display-client:${VERSION} --file="Dockerfile" .
 
-# docker push itkdev/os2display-client:${VERSION}
+# docker push os2display/os2display-client:${VERSION}

public/example_config.json

@@ -1,12 +1,12 @@
 {
-  "apiEndpoint": "https://displayapiservice.local.itkdev.dk",
-  "authenticationEndpoint": "https://displayapiservice.local.itkdev.dk/v1/authentication/screen",
-  "authenticationRefreshTokenEndpoint": "https://displayapiservice.local.itkdev.dk/v1/authentication/token/refresh",
+  "apiEndpoint": "/",
+  "authenticationEndpoint": "/v1/authentication/screen",
+  "authenticationRefreshTokenEndpoint": "/v1/authentication/token/refresh",
   "dataStrategy": {
     "type": "pull",
     "config": {
       "interval": 30000,
-      "endpoint": "https://displayapiservice.local.itkdev.dk"
+      "endpoint": "/"
     }
   },
   "colorScheme": {

public/example_release.json

@@ -1,4 +1,5 @@
 {
-  "releaseTimestamp": 1651175120,
+  "releaseTimestamp": 1686045152,
+  "releaseTime": "Tue Jun 6 09:52:32 UTC 2023",
   "releaseVersion": "1.0.0"
 }