Merge branch 'base' into production

.github/workflows/docker-build-and-push.yml

@@ -1,46 +1,60 @@
 name: "Build and push docker image"
 
-# run this workflow when a new commit in the "main" branch or release/tag is pushed
+# Run this workflow when a new commit in the "main" branch
+# or release/tag is pushed.
 on:
   push:
     branches:
-      - 'main'
+      - main
     tags:
       - '*'
 
-  # allow this workflow to be manually triggered from the actions tab (for debugging)
+  # Allow this workflow to be manually triggered from the actions
+  # tab (for debugging).
   workflow_dispatch:
 
-# allow job to read repository and write image/package to ghcr.io
+# Allow job to read repository and write image/package to ghcr.io.
 permissions:
     contents: read
     packages: write
 
 jobs:
   build-and-push:
     runs-on: ubuntu-latest
+    env:
+      # Define tag of official Node.js image to be used as the base image
+      # for the build, this is passed as a build argument to Dockerfile
+      # https://hub.docker.com/_/node/.
+      NODE_IMAGE_TAG: 20-alpine
 
     steps:
-      # check out repository
+      # Check out repository.
       - uses: actions/checkout@v4
 
-      # log in with github token credentials
+      # Log in with GitHub token credentials.
       - name: Log in to ghcr.io
         uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      # pull metadata from Github events (so we can use release version number)
-      - name: Pull metadata from Github
+      # Pull latest Node image with tag defined above, otherwise an older
+      # cached image might be used.
+      - name: Pull latest Node.js image
+        run: docker pull node:${{ env.NODE_IMAGE_TAG }}
+
+      # Pull metadata from GitHub events (so we can use release version
+      # number).
+      - name: Pull metadata from GitHub
         id: meta
         uses: docker/metadata-action@v5
         with:
           images: ghcr.io/${{ github.repository }}
 
-      # build image, tagging with the release tag and latest on a release, 
-      # or with "main" if built against main (commit push) or built using workflow_dispatch
+      # Build image, tagging with the release tag and latest on a release, 
+      # or with "main" if built against main (commit push) or built using
+      # workflow_dispatch.
       - name: Build and push docker image
         uses: docker/build-push-action@v5
         with:
@@ -49,3 +63,4 @@ jobs:
           file: Dockerfile
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          build-args: NODE_IMAGE_TAG=${{ env.NODE_IMAGE_TAG }}

CHANGELOG.md

@@ -22,6 +22,37 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/), and this
 
 
 
+## [1.3.3] – 2024-04-04
+
+### Added
+
+- Docs: notes on how to run nginx in front of Node.js app locally. ([caf8d1e](https://github.com/slsfi/digital-edition-frontend-ng/commit/caf8d1eab58b3976d1f3941422ea7d707adc3b3d))
+
+### Changed
+
+- Replace deprecated `browserTarget` with `buildTarget` in `extract-i18n` options in `angular.json`. ([96c94fe](https://github.com/slsfi/digital-edition-frontend-ng/commit/96c94fe8aa278db0943d8e67fe907db83429f810))
+- Ensure build uses latest version of Node.js Docker-image. Remove unnecessary quotes around strings in GitHub Actions YAML build file. ([971e06e](https://github.com/slsfi/digital-edition-frontend-ng/commit/971e06e7f63a49cc86b75f81eb4afe5a8d07650a))
+- Docs: restructure notes on running app locally. ([a41dc7d](https://github.com/slsfi/digital-edition-frontend-ng/commit/a41dc7dbc79bb86915b6b5d14122fdd7b43d59bf))
+- Update `nginx` to 1.25.4. ([2ce5529](https://github.com/slsfi/digital-edition-frontend-ng/commit/2ce55297e8b100fed7d86735f0529a49d4265377))
+- Deps: update `@angular` to 17.3.3. ([e531f86](https://github.com/slsfi/digital-edition-frontend-ng/commit/e531f86ad64103c4e6e5c7502b48613a6bb9c994), [0873abb](https://github.com/slsfi/digital-edition-frontend-ng/commit/0873abbf59e55ae81b66e2cc0a0b31cfcd97a234))
+- Deps: update `@ionic` to 7.8.3. ([29bd2ae](https://github.com/slsfi/digital-edition-frontend-ng/commit/29bd2aee08a50bd8b1e583a04fbf8556fe50f49d), [aa69990](https://github.com/slsfi/digital-edition-frontend-ng/commit/aa69990b39dcafa527314a3ba07fff330897a184))
+- Deps: update `express` to 4.19.2. ([a4443eb](https://github.com/slsfi/digital-edition-frontend-ng/commit/a4443eb821bb2889ba82f31b0884ffd9b2d29e46))
+- Deps: update `ionicons` to 7.3.1. ([9d0bc07](https://github.com/slsfi/digital-edition-frontend-ng/commit/9d0bc0723c6bdea0be60fe424a37cb1071855450))
+- Deps: update `marked` to 12.0.1. ([2978215](https://github.com/slsfi/digital-edition-frontend-ng/commit/2978215d540529034f4edd6dcede40674041fdce))
+- Deps: update `@types/node` to 20.12.4. ([5987f3a](https://github.com/slsfi/digital-edition-frontend-ng/commit/5987f3a78ce7bdf2634fb136c511d771d7d3bcd8), [11f0385](https://github.com/slsfi/digital-edition-frontend-ng/commit/11f0385db2f690c10d6cb90413dd62311b48dd07))
+- Deps: update `ng-extract-i18n-merge` to 2.11.2. ([bd55fd0](https://github.com/slsfi/digital-edition-frontend-ng/commit/bd55fd08449ddc5b852ebf7a3e47c943ed40be29), [68d72fe](https://github.com/slsfi/digital-edition-frontend-ng/commit/68d72fe60cdfd0966aab19d28996047e140d3916))
+- Deps: update `typescript` to 5.4.3. ([fd5d49f](https://github.com/slsfi/digital-edition-frontend-ng/commit/fd5d49f9a8b3e32494aa949ebb475688946a422e))
+- Deps: update `es5-ext` to 0.10.64 ([e06c6d4](https://github.com/slsfi/digital-edition-frontend-ng/commit/e06c6d4dc3f835ef7d87add1a95288aca7cc97b6))
+- Deps: update `follow-redirects` to 1.15.6. ([82d4839](https://github.com/slsfi/digital-edition-frontend-ng/commit/82d4839f395b4d09aeaaa06ce2b787ffcb0472ff))
+
+### Fixed
+
+- Link-elements added to the DOM using a custom renderer in the document head service are cleaned up when the service is destroyed. This fixes a potential memory leak in the SSR-app. ([736195e](https://github.com/slsfi/digital-edition-frontend-ng/commit/736195e4e6097c24a6452ad5294ad29ea6e90293))
+- Return values of the RxJS `catchError` function. ([fb862c2](https://github.com/slsfi/digital-edition-frontend-ng/commit/fb862c2e801a9f232d3fc92d704e9bebc5bd632b))
+- Ensure cleanup of event listeners in the draggable-image directive. ([0b2f871](https://github.com/slsfi/digital-edition-frontend-ng/commit/0b2f871a737ec2daec91a08e3021289782f9dd41))
+
+
+
 ## [1.3.2] – 2024-02-29
 
 ### Changed
@@ -349,7 +380,8 @@ siteLogoDimensions: {
 
 
 
-[unreleased]: https://github.com/slsfi/digital-edition-frontend-ng/compare/1.3.1...HEAD
+[unreleased]: https://github.com/slsfi/digital-edition-frontend-ng/compare/1.3.3...HEAD
+[1.3.3]: https://github.com/slsfi/digital-edition-frontend-ng/compare/1.3.2...1.3.3
 [1.3.2]: https://github.com/slsfi/digital-edition-frontend-ng/compare/1.3.1...1.3.2
 [1.3.1]: https://github.com/slsfi/digital-edition-frontend-ng/compare/1.3.0...1.3.1
 [1.3.0]: https://github.com/slsfi/digital-edition-frontend-ng/compare/1.2.3...1.3.0

Dockerfile

@@ -6,12 +6,14 @@
 # corresponding Angular CLI globally.
 ARG ANGULAR_MAJOR_VERSION=17
 
-# Define tag of official Node image to be used as the base image,
+# Enable passing the tag of the Node.js image as a build argument,
+# and define a default tag in case the build argument is not passed.
+# The Node.js image is used as the base image of the app,
 # https://hub.docker.com/_/node/.
 ARG NODE_IMAGE_TAG=20-alpine
 
 
-# 1. Create base image from official Node image.
+# 1. Create base image from official Node.js image.
 FROM node:${NODE_IMAGE_TAG} AS base
 # Change working directory.
 WORKDIR /digital-edition-frontend-ng

angular.json

@@ -137,7 +137,7 @@
         "extract-i18n": {
           "builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
           "options": {
-            "browserTarget": "app:build",
+            "buildTarget": "app:build",
             "format": "xlf2",
             "outputPath": "src/locale",
             "targetFiles": [

compose.yml

@@ -1,6 +1,6 @@
 services:
   nginx:
-    image: docker.io/library/nginx:1.25.3
+    image: docker.io/library/nginx:1.25.4
     depends_on:
       - web
     ports:

docs/DEPLOYMENT.md

@@ -57,30 +57,12 @@ Then redeploy the app.
 **Important!** Do not create a new release when rolling back to an earlier version.
 
 
-## Running Docker image locally for testing
-
-To locally run a Docker image, which has been automatically built and pushed to GitHub according to the description above:
-
-1. Start [Docker Desktop][docker_desktop] and log in.
-2. `cd` into the app repository folder.
-3. Run `docker run -it -p 4201:4201 --rm <image-url>` where `<image-url>` must be replaced with the URL to the image, for example `ghcr.io/slsfi/digital-edition-frontend-ng:main`.
-4. Open your browser on http://localhost:4201/.
-
-To first build and then run a Docker image of a local copy of the repository on your own machine:
-
-1. Start [Docker Desktop][docker_desktop] and log in.
-2. `cd` into the app repository folder.
-3. Run `docker build --no-cache -t name:tag .` (notice the dot at the end) to build the image from the current directory, where `name:tag` must be replaced with the name and tag of the image, for example `digital-edition-frontend-ng:latest`.
-4. Run `docker run -it -p 4201:4201 --rm name:tag` where `name:tag` must be replaced with the name and tag of the image that you specified in step 3.
-5. Open your browser on http://localhost:4201/.
-
 
 [build_workflow]: ../.github/workflows/docker-build-and-push.yml
 [changelog]: ../CHANGELOG.md
 [digital-edition-frontend-ng]: https://github.com/slsfi/digital-edition-frontend-ng
 [docker_compose_file]: ../compose.yml
 [docker_compose_reference]: https://docs.docker.com/compose/
-[docker_desktop]: https://www.docker.com/products/docker-desktop/
 [docker_image_reference]: https://docs.docker.com/build/building/packaging/
 [docker_run_reference]: https://docs.docker.com/engine/reference/run/
 [docker_volume_reference]: https://docs.docker.com/storage/volumes/

docs/DEVELOPMENT.md

@@ -3,10 +3,55 @@
 This document contains notes and tips on the development of the app.
 
 
+## Run locally on Windows
+
+### Remote Docker image of app
+
+To locally run a prebuilt Docker image, which has been pushed to an image repository like GitHub Packages or DockerHub:
+
+1. Start [Docker Desktop][docker_desktop] and log in with your credentials.
+2. In PowerShell, `cd` into the app repository folder.
+3. Run `docker run -it -p 4201:4201 --rm <image-url>` where `<image-url>` must be replaced with the URL to the remote image, for example `ghcr.io/slsfi/digital-edition-frontend-ng:main`.
+4. Open your browser on http://localhost:4201/.
+
+### Local Docker image of app
+
+To first build and then run a Docker image of a local copy of the repository on your own machine:
+
+1. Start [Docker Desktop][docker_desktop] and log in with your credentials.
+2. In PowerShell, `cd` into the app repository folder.
+3. Run `docker build --no-cache -t name:tag .` (notice the dot at the end) to build the image from the current directory, where `name:tag` must be replaced with the name and tag of the image, for example `digital-edition-frontend-ng:latest`.
+4. Run `docker run -it -p 4201:4201 --rm name:tag` where `name:tag` must be replaced with the name and tag of the image that you specified in step 3.
+5. Open your browser on http://localhost:4201/.
+
+### nginx in front of app image
+
+In production, nginx is run in a Docker container in front of the app container so nginx, which is more performant than Node.js, can server static files. To run the app in this setup locally:
+
+1. Start [Docker Desktop][docker_desktop] and log in with your credentials.
+2. In PowerShell, `cd` into the app repository folder.
+3. Run `docker build --no-cache -t name:tag .` (notice the dot at the end) to build the image from the current directory, where `name:tag` must be replaced with the name and tag of the image, for example `digital-edition-frontend-ng:latest`.
+4. Replace the URL of `image` in the `web` service in [`compose.yml`][docker_compose_file] with the `name:tag` you chose for the Docker image in step 3. **Do not commit this change!**
+5. Run `docker compose up -d`.
+6. Open your browser on http://localhost:2089/ (the port of the nginx service defined in [`compose.yml`][docker_compose_file]).
+7. Undo the changes in [`compose.yml`][docker_compose_file].
+8. When you are done testing, stop the Docker containers in Docker Desktop and delete all containers and volumes that were created. Alternatively you can do this in the terminal by running `docker compose down --volumes`.
+
+
+## Node.js version and building using GitHub Actions
+
+The Node.js Docker-image tag can be passed as a build argument to `Dockerfile` using the argument `NODE_IMAGE_TAG`. `Dockerfile` sets a default value for the argument if it is not passed.
+
+By default the app is built using GitHub Actions according to the workflow defined in `.github/workflows/docker-build-and-push.yml`, but you can also define your own build workflow. The Node.js image which is used as the base image for the build is defined in the workflow YAML-file and passed to `Dockerfile`.
+
+When updating which Node.js image is used for the build, remember to update both `docker-build-and-push.yml` and `Dockerfile`.
+
+
 ## Dependencies
 
 The app is built on Angular and uses many web components from Ionic. It also has a few other essential dependencies, which are briefly described below.
 
+
 ### `@angular`
 
 The Angular documentation is available on https://angular.dev/.
@@ -98,6 +143,8 @@ Testing frameworks.
 
 
 [angular_update_guide]: https://update.angular.io/
+[docker_compose_file]: ../compose.yml
+[docker_desktop]: https://www.docker.com/products/docker-desktop/
 [dockerfile]: ../Dockerfile
 [npm_epubjs]: https://www.npmjs.com/package/epubjs
 [npm_express]: https://www.npmjs.com/package/express