update frontend docker and workflow

2026-02-06 09:56:05 +00:00 · 2025-04-29 09:58:30 +02:00 · 2025-04-29 09:58:30 +02:00 · 9c4cb869c9
commit 9c4cb869c9
parent 82cfa3e68c
12 changed files with 91 additions and 97 deletions
--- a/.github/workflows/test_admin_interface.yml
+++ b/.github/workflows/test_admin_interface.yml
@ -10,6 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    outputs:
      admin: ${{ steps.changes.outputs.admin }}
+      config: ${{ steps.changes.outputs.config }}
    steps:
      - uses: actions/checkout@v3.3.0

@ -23,7 +24,7 @@ jobs:

  
  build_test:
-    if: needs.files-changed.outputs.admin == 'true'
+    if: needs.files-changed.outputs.config == 'true' || needs.files-changed.outputs.admin == 'true'
    name: Docker Build Test - Admin Interface
    needs: files-changed
    runs-on: ubuntu-latest
@ -36,7 +37,7 @@ jobs:
        run: docker build -f ./admin/Dockerfile --target production -t "gradido/admin:production" --build-arg NODE_ENV="production" --build-arg BUILD_COMMIT=$(git rev-parse HEAD) --build-arg BUILD_COMMIT_SHORT=$(git rev-parse --short HEAD) .

  unit_test:
-    if: needs.files-changed.outputs.admin == 'true'
+    if: needs.files-changed.outputs.config == 'true' || needs.files-changed.outputs.admin == 'true'
    name: Unit Tests - Admin Interface
    needs: files-changed
    runs-on: ubuntu-latest
--- a/.github/workflows/test_frontend.yml
+++ b/.github/workflows/test_frontend.yml
@ -9,6 +9,7 @@ jobs:
    name: Detect File Changes - Frontend
    runs-on: ubuntu-latest
    outputs:
+      config: ${{ steps.changes.outputs.config }}
      frontend: ${{ steps.changes.outputs.frontend }}
    steps:
      - uses: actions/checkout@v3.3.0
@ -23,7 +24,7 @@ jobs:

  
  build_test:
-    if: needs.files-changed.outputs.frontend == 'true'
+    if: needs.files-changed.outputs.config == 'true' || needs.files-changed.outputs.frontend == 'true'
    name: Docker Build Test - Frontend
    needs: files-changed
    runs-on: ubuntu-latest
@ -33,52 +34,62 @@ jobs:
        uses: actions/checkout@v3

      - name: Frontend | Build 'test' image
-        run: docker build -f ./frontend/Dockerfile --target test -t "gradido/frontend:test" --build-arg NODE_ENV="test" .
+        run: docker build -f ./frontend/Dockerfile --target production -t "gradido/frontend:production" --build-arg NODE_ENV="production" --build-arg BUILD_COMMIT=$(git rev-parse HEAD) --build-arg BUILD_COMMIT_SHORT=$(git rev-parse --short HEAD) .

  unit_test:
-    if: needs.files-changed.outputs.frontend == 'true'
+    if: needs.files-changed.outputs.config == 'true' || needs.files-changed.outputs.frontend == 'true'
    name: Unit Tests - Frontend
    needs: files-changed
    runs-on: ubuntu-latest
+    outputs:
+      test-success: ${{ steps.test.outputs.success }}
    steps:
+      - name: Set Node.js version
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.20.7'
+
      - name: Checkout code
        uses: actions/checkout@v3

+      - name: Install turbo
+        run: yarn global add turbo@^2
+
+      - name: Prune frontend with turbos help
+        run: turbo prune frontend
+
+      - name: install dependencies
+        run: cd out && yarn install --frozen-lockfile --production=false
+
      - name: Frontend | Unit tests
-        run: cd frontend && yarn global add node-gyp && yarn && yarn run test
+        id: test
+        run: |
+          cd out && turbo frontend#test frontend#lint
+          echo "success=$([ $? -eq 0 ] && echo true || echo false)" >> $GITHUB_OUTPUT

  lint:
    if: needs.files-changed.outputs.frontend == 'true'
    name: Lint - Frontend
-    needs: files-changed
+    needs: [files-changed, unit_test]
    runs-on: ubuntu-latest
    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Frontend | Lint
-        run: cd frontend && yarn global add node-gyp && yarn && yarn run lint
+      - name: Check result from previous step
+        run: if [ "${{ needs.unit_test.outputs.test-success }}" != "true" ]; then exit 1; fi

  stylelint:
    if: needs.files-changed.outputs.frontend == 'true'
    name: Stylelint - Frontend
-    needs: files-changed
+    needs: [files-changed, unit_test]
    runs-on: ubuntu-latest
    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Frontend | Stylelint
-        run: cd frontend && yarn global add node-gyp && yarn && yarn run stylelint
+      - name: Check result from previous step
+        run: if [ "${{ needs.unit_test.outputs.test-success }}" != "true" ]; then exit 1; fi

  locales:
    if: needs.files-changed.outputs.frontend == 'true'
    name: Locales - Frontend
-    needs: files-changed
+    needs: [files-changed, unit_test]
    runs-on: ubuntu-latest
    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Frontend | Locales
-        run: cd frontend && yarn global add node-gyp && yarn && yarn run locales
+      - name: Check result from previous step
+        run: if [ "${{ needs.unit_test.outputs.test-success }}" != "true" ]; then exit 1; fi
--- a/admin/Dockerfile
+++ b/admin/Dockerfile
@ -78,7 +78,6 @@ RUN yarn install --frozen-lockfile --production=false \
 # Build the project
 COPY --chown=app:app --from=builder /app/out/full/ .
 RUN turbo build --env-mode=loose
-RUN pwd && ls -lah && du -d1 -h
 
 ##################################################################################
 # TEST ###########################################################################
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -15,6 +15,10 @@ services:
      context: ./
      dockerfile: ./frontend/Dockerfile
      target: production
+      args: 
+        BUILD_COMMIT: ${BUILD_COMMIT}
+        BUILD_COMMIT_SHORT: ${BUILD_COMMIT_SHORT}
+        BUILD_VERSION: ${BUILD_VERSION}
    networks:
      - external-net
      - internal-net
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@ -1,7 +1,7 @@
 ##################################################################################
 # BASE ###########################################################################
 ##################################################################################
-FROM node:18.20-alpine3.20 as base
+FROM node:18.20.7-alpine3.21 as base

 # ENVs (available in production aswell, can be overwritten by commandline or env file)
 ## DOCKER_WORKDIR would be a classical ARG, but that is not multi layer persistent - shame
@ -9,9 +9,12 @@ ENV DOCKER_WORKDIR="/app"
 ## We Cannot do `$(date -u +'%Y-%m-%dT%H:%M:%SZ')` here so we use unix timestamp=0
 ENV BUILD_DATE="1970-01-01T00:00:00.00Z"
 ## We cannot do $(npm run version).${BUILD_NUMBER} here so we default to 0.0.0.0
-ENV BUILD_VERSION="0.0.0.0"
-## We cannot do `$(git rev-parse --short HEAD)` here so we default to 0000000
-ENV BUILD_COMMIT_SHORT="0000000"
+ARG BUILD_VERSION
+ENV BUILD_VERSION=${BUILD_VERSION}
+ARG BUILD_COMMIT
+ENV BUILD_COMMIT=${BUILD_COMMIT}
+ARG BUILD_COMMIT_SHORT
+ENV BUILD_COMMIT_SHORT=${BUILD_COMMIT_SHORT}
 ## SET NODE_ENV
 ENV NODE_ENV="production"
 ## App relevant Envs
@ -42,80 +45,57 @@ EXPOSE ${PORT}
 RUN mkdir -p ${DOCKER_WORKDIR}
 WORKDIR ${DOCKER_WORKDIR}

-RUN mkdir -p /config
+##################################################################################
+# Base with turbo ################################################################
+##################################################################################
+FROM base as turbo-base
+
+RUN apk update && apk add --no-cache libc6-compat \ 
+  && yarn global add turbo@^2 \
+  && rm -rf /tmp/* ~/.cache node_modules/.cache \
+  && yarn cache clean
+

 ##################################################################################
-# DEVELOPMENT (Connected to the local environment, to reload on demand) ##########
+# BUILDER (create partly monorepo only with data needed by dht-node) #############
 ##################################################################################
-FROM base as development
+FROM turbo-base as builder

-# We don't need to copy or build anything since we gonna bind to the
-# local filesystem which will need a rebuild anyway
-
-# Run command
-# (for development we need to execute npm install since the
-#  node_modules are on another volume and need updating)
-CMD /bin/sh -c "cd /config && yarn install && yarn build && cd /app && yarn install && yarn run dev"
+COPY --chown=app:app . . 
+RUN turbo prune frontend --docker

 ##################################################################################
-# BUILD (Does contain all files and is therefore bloated) ########################
+# INSTALLER (create production image) ##############################################
 ##################################################################################
-FROM base as build
+FROM turbo-base AS installer

-# Copy everything
-COPY ./frontend ./
-
-# Copy everything from config
-COPY ./config/  ../config/
-
-# install and build config
-RUN cd ../config && yarn install --production=false --frozen-lockfile --non-interactive && yarn build
-
-# npm install
-RUN yarn global add node-gyp && yarn install --production=false --frozen-lockfile --non-interactive
-
-# npm build
-RUN yarn run build
+# First install the dependencies (as they change less often)
+COPY --chown=app:app --from=builder /app/out/json/ .
+RUN yarn install --frozen-lockfile --production=false \
+ && rm -rf /tmp/* ~/.cache node_modules/.cache \
+ && yarn cache clean
+ 
+# Build the project
+COPY --chown=app:app --from=builder /app/out/full/ .
+RUN turbo build --env-mode=loose

 ##################################################################################
 # TEST ###########################################################################
 ##################################################################################
-FROM build as test
-
-# Install Additional Software
-RUN apk add --no-cache bash jq
+FROM installer as test

 # Run command
-CMD /bin/sh -c "yarn run start"
+CMD /bin/sh -c "turbo frontend#test --env-mode=loose"
+

 ##################################################################################
 # PRODUCTION (Does contain only "binary"- and static-files to reduce image size) #
 ##################################################################################
-FROM base as production
+FROM lipanski/docker-static-website:latest as production

-# Copy "binary"-files from build image
-COPY --from=build ${DOCKER_WORKDIR}/build ./build
-COPY --from=build ${DOCKER_WORKDIR}/../config/build ../config/build
-# We also copy the node_modules express and serve-static for the run script
-COPY --from=build ${DOCKER_WORKDIR}/node_modules ./node_modules
-# Copy static files
-COPY --from=build ${DOCKER_WORKDIR}/public ./public
-# Copy package.json for script definitions (lock file should not be needed)
-COPY --from=build ${DOCKER_WORKDIR}/package.json ./package.json
-# Copy run scripts run/
-COPY --from=build ${DOCKER_WORKDIR}/run ./run
+# TODO: Improve size from 50 MB down to 2 MB with lipanski/docker-static-website:latest
+# https://lipanski.com/posts/smallest-docker-image-static-website

-# Run command
-CMD /bin/sh -c "yarn run start"
+# copy builded frontend files
+COPY --from=installer /app/frontend/build/ .

-
-
-## add `/usr/src/app/node_modules/.bin` to $PATH
-#ENV PATH /usr/src/app/node_modules/.bin:$PATH
-#
-## install and cache app dependencies
-#COPY package.json /usr/src/app/package.json
-#RUN npm install
-#RUN npm install -g @vue/cli
-## start app
-#CMD ["npm", "run", "serve"]
--- a/frontend/package.json
+++ b/frontend/package.json
@ -76,7 +76,7 @@
    "@vue/eslint-config-prettier": "^10.2.0",
    "@vue/test-utils": "^2.4.6",
    "concurrently": "^9.1.2",
-    "config": "*",
+    "config-schema": "*",
    "cross-env": "^7.0.3",
    "dotenv-webpack": "^7.0.3",
    "eslint": "8.57.1",
--- a/frontend/src/components/SessionLogoutTimeout.spec.js
+++ b/frontend/src/components/SessionLogoutTimeout.spec.js
@ -48,7 +48,7 @@ describe('SessionLogoutTimeout', () => {
  const createWrapper = (tokenTime = setTokenTime(120)) => {
    vi.mocked(useStore).mockReturnValue({
      state: {
-        tokenTime: tokenTime,
+        tokenTime,
      },
    })
    return mount(SessionLogoutTimeout, {
--- a/frontend/src/components/UserSettings/UserLocationMap.vue
+++ b/frontend/src/components/UserSettings/UserLocationMap.vue
@ -121,7 +121,7 @@ function initMap() {
    // GeoSearch control
    const provider = new OpenStreetMapProvider()
    const searchControl = new GeoSearchControl({
-      provider: provider,
+      provider,
      style: 'button',
      showMarker: false,
      showPopup: false,
--- a/frontend/src/config/index.js
+++ b/frontend/src/config/index.js
@ -61,7 +61,7 @@ const endpoints = {

 const community = {
  COMMUNITY_NAME: process.env.COMMUNITY_NAME ?? 'Gradido Entwicklung',
-  COMMUNITY_URL: COMMUNITY_URL,
+  COMMUNITY_URL,
  COMMUNITY_REGISTER_URL: COMMUNITY_URL + (process.env.COMMUNITY_REGISTER_PATH ?? '/register'),
  COMMUNITY_DESCRIPTION:
    process.env.COMMUNITY_DESCRIPTION ?? 'Die lokale Entwicklungsumgebung von Gradido.',
--- a/frontend/turbo.json
+++ b/frontend/turbo.json
@ -1,15 +1,12 @@
 {
  "extends": ["//"],
  "tasks": {
-    "stylelint": {
-    },
-    "locales": {
-    },
+    "stylelint": {},
+    "locales": {},
    "lint": {
      "dependsOn": ["stylelint", "locales"]
    },
-    "compile-scss": {
-    },
+    "compile-scss": {},
    "watch-scss": {
      "cache": false,
      "persistent": true
@ -21,4 +18,4 @@
      "dependsOn": ["compile-scss"]
    }
  }
-}
+}
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@ -28,6 +28,7 @@ export default defineConfig(async ({ command }) => {
  }
  if (existsSync('../.git', constants.F_OK)) {
    CONFIG.BUILD_COMMIT = execSync('git rev-parse HEAD').toString().trim()
+    CONFIG.BUILD_COMMIT_SHORT = (CONFIG.BUILD_COMMIT ?? '0000000').slice(0, 7)
  }
  // Check config
  validate(schema, CONFIG)
--- a/package.json
+++ b/package.json
@ -20,7 +20,8 @@
  "scripts": {
    "release": "scripts/release.sh",
    "installAll": "yarn && cd database && yarn && cd ../frontend && yarn && cd ../admin && yarn && cd ../backend && yarn && cd ../federation && yarn && cd ../dht-node && yarn && cd ../e2e-tests && yarn && cd ..",
-    "docker:admin": "docker build --progress=plain -f ./admin/Dockerfile --target production -t \"gradido/admin:latest\" --build-arg NODE_ENV=\"production\" --build-arg BUILD_COMMIT=$(git rev-parse HEAD) --build-arg BUILD_COMMIT_SHORT=$(git rev-parse --short HEAD) ."
+    "docker:admin": "docker build -f ./admin/Dockerfile --target production -t \"gradido/admin:latest\" --build-arg NODE_ENV=\"production\" --build-arg BUILD_COMMIT=$(git rev-parse HEAD) --build-arg BUILD_COMMIT_SHORT=$(git rev-parse --short HEAD) .",
+    "docker:frontend": "docker build -f ./frontend/Dockerfile --target production -t \"gradido/frontend:latest\" --build-arg NODE_ENV=\"production\" --build-arg BUILD_COMMIT=$(git rev-parse HEAD) --build-arg BUILD_COMMIT_SHORT=$(git rev-parse --short HEAD) ."
  },
  "dependencies": {
    "auto-changelog": "^2.4.0",