chore: setup ci #6 (#10)

.eslintrc.json

@@ -1,24 +1,32 @@
 {
   "root": true,
-  "ignorePatterns": ["projects/**/*"],
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
   "overrides": [
     {
-      "files": ["*.ts"],
+      "files": [
+        "*.ts"
+      ],
       "parserOptions": {
-        "project": ["tsconfig.json", "e2e/tsconfig.json"],
+        "project": [
+          "tsconfig.json"
+        ],
         "createDefaultProgram": true
       },
       "extends": [
-        "plugin:@angular-eslint/ng-cli-compat",
-        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+        "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
         "no-console": 0,
         "@angular-eslint/component-class-suffix": [
           "error",
           {
-            "suffixes": ["Page", "Component"]
+            "suffixes": [
+              "Page",
+              "Component"
+            ]
           }
         ],
         "@angular-eslint/component-selector": [
@@ -40,9 +48,13 @@
       }
     },
     {
-      "files": ["*.html"],
-      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
       "rules": {}
     }
   ]
-}
+}

.github/dependabot.yml

@@ -9,3 +9,11 @@ updates:
     directory: "/" # Location of package manifests
     schedule:
       interval: "weekly"
+  - package-ecosystem: "docker"
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "github-actions"
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

.github/workflows/on_push_branch_execute_ci.yml

@@ -0,0 +1,39 @@
+name: frontend_on_push_branch_execute_ci_cd
+
+on:
+  push:
+    branches: [main]
+  # See https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#onpushpull_requestbranchestags
+  pull_request:
+    # Only branches and tags on the base are evaluated
+    branches: [main]
+
+env:
+  NODE_VERSION: "20.12"
+
+jobs:
+  yarn_test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "yarn"
+      - run: yarn install --frozen-lockfile
+      - run: yarn test:ci
+
+  yarn_lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "yarn"
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint

.github/workflows/on_release_build_image.yml

@@ -0,0 +1,71 @@
+# https://docs.github.com/en/packages/managing-github-packages-using-github-actions-workflows/publishing-and-installing-a-package-with-github-actions#upgrading-a-workflow-that-accesses-ghcrio
+
+# This action is based on https://docs.github.com/en/actions/publishing-packages/publishing-docker-images and https://github.com/marketplace/actions/build-and-push-docker-images
+
+name: Create and publish a Docker image
+
+on:
+  push:
+    branches: ["main"]
+  release:
+    types: [published]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+# There is a single job in this workflow. It's configured to run on the latest available version of Ubuntu.
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    # Sets the permissions granted to the `GITHUB_TOKEN` for the actions in this job.
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          version: v0.12.0
+
+      # Uses the `docker/login-action` action to log in to the Container registry registry using the account and password that will publish the packages. Once published, the packages are scoped to the account defined here.
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # This step uses [docker/metadata-action](https://github.com/docker/metadata-action#about) to extract tags and labels that will be applied to the specified image. The `id` "meta" allows the output of this step to be referenced in a subsequent step. The `images` value provides the base name for the tags and labels.
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            # branch event
+            type=ref,event=branch
+            # set latest tag for default branch
+            type=raw,value=latest,enable={{is_default_branch}}
+            #semver for tag:
+            type=semver,pattern={{version}}
+        env:
+          DOCKER_METADATA_ANNOTATIONS_LEVELS: manifest, index # for arm64 add ,index
+
+      # This step uses the `docker/build-push-action` action to build the image, based on your repository's `Dockerfile`. If the build succeeds, it pushes the image to GitHub Packages.
+      # It uses the `context` parameter to define the build's context as the set of files located in the specified path. For more information, see "[Usage](https://github.com/docker/build-push-action#usage)" in the README of the `docker/build-push-action` repository.
+      # It uses the `tags` and `labels` parameters to tag and label the image with the output from the "meta" step.
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          provenance: false
+          target: production
+          # disable qemu for now:
+          platforms: linux/amd64,linux/arm64
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          annotations: ${{ steps.meta.outputs.annotations }}

Dockerfile

@@ -1,18 +1,19 @@
-FROM node:18-buster as base
+FROM node:20.12-bullseye as base
 
 USER node
 WORKDIR /home/node/app
 
 FROM base as development
+
+# install chromium for karma:
 USER root
 RUN set -eux ; \
   apt-get update && apt-get install -y \
   chromium \
   chromium-driver \
-  python3 \
   && rm -rf /var/lib/apt/lists/*
+USER node
 
-#USER node
 # Set up Chromium Headless flags
 ENV CHROME_BIN=/usr/bin/chromium
 ENV CHROME_PATH=/usr/lib/chromium/
@@ -22,23 +23,16 @@ COPY --chown=node:node package.json yarn.lock ./
 RUN yarn install
 
 FROM base as production_builder
-
-USER node
+# Copy project files into the docker image
+COPY --chown=node:node . ./
 
 # Install app dependencies
-COPY package.json /a
-COPY --chown=node:node package.json yarn.lock ./
 RUN yarn install
-# Copy project files into the docker image
-COPY . ./
 RUN yarn build:prod
 
-FROM nginx:alpine as production
-
-## Remove default nginx website
-RUN rm -rf /usr/share/nginx/html/*
+FROM nginxinc/nginx-unprivileged:stable-alpine AS production
 
 ## From 'builder' copy website to default nginx public folder
 COPY --from=production_builder /home/node/app/www /usr/share/nginx/html
-EXPOSE 80
+
 CMD ["nginx", "-g", "daemon off;"]

angular.json

@@ -16,7 +16,9 @@
             "outputPath": "www",
             "index": "src/index.html",
             "main": "src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               {
@@ -31,7 +33,10 @@
               },
               "src/manifest.webmanifest"
             ],
-            "styles": ["src/theme/variables.scss", "src/global.scss"],
+            "styles": [
+              "src/theme/variables.scss",
+              "src/global.scss"
+            ],
             "scripts": [
               "src/assets/js/webm.js"
             ],
@@ -83,8 +88,7 @@
             "production": {
               "buildTarget": "app:build:production"
             },
-            "ci": {
-            }
+            "ci": {}
           }
         },
         "extract-i18n": {
@@ -97,7 +101,9 @@
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "styles": [],
@@ -118,8 +124,8 @@
           },
           "configurations": {
             "ci": {
-              "progress": false,
-              "watch": false
+              "watch": false,
+              "progress": false
             }
           }
         },
@@ -132,21 +138,6 @@
             ]
           }
         },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "app:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "app:serve:production"
-            },
-            "ci": {
-              "devServerTarget": "app:serve:ci"
-            }
-          }
-        },
         "ionic-cordova-build": {
           "builder": "@ionic/angular-toolkit:cordova-build",
           "options": {
@@ -189,4 +180,4 @@
       "styleext": "scss"
     }
   }
-}
+}

docker-compose.yml

@@ -10,4 +10,4 @@ services:
       - "${DOCKER_COMPOSE_APP_PORT_PUBLISHED:-4200}:4200"
     volumes:
       - .:/home/node/app
-      - ./node_modules:/home/node/app/node_modules:cached
+      #- ./node_modules:/home/node/app/node_modules:cached