feat(other): frontend

.github/dependabot.yml

@@ -24,6 +24,7 @@ updates:
     day: "saturday"
     timezone: "Europe/Berlin"
     time: "03:00"
+
 # presenter
 - package-ecosystem: npm
   directory: "/presenter"
@@ -41,6 +42,25 @@ updates:
     day: "saturday"
     timezone: "Europe/Berlin"
     time: "03:00"
+
+# frontend
+- package-ecosystem: npm
+  directory: "/frontend"
+  rebase-strategy: "disabled"
+  schedule:
+    interval: weekly
+    day: "saturday"
+    timezone: "Europe/Berlin"
+    time: "03:00"
+- package-ecosystem: docker
+  directory: "/frontend"
+  rebase-strategy: "disabled"
+  schedule:
+    interval: weekly
+    day: "saturday"
+    timezone: "Europe/Berlin"
+    time: "03:00"
+
 # backend
 - package-ecosystem: npm
   directory: "/backend"

.github/file-filters.yml

@@ -16,14 +16,33 @@ presenter-test-build-code: &presenter-test-build-code
 presenter-test-build-docker: &presenter-test-build-docker
   - 'presenter/**/*'
 
-
 presenter-test-build-docs: &presenter-test-build-docs
   - 'presenter/**/*.md'
   - 'presenter/.vuepress/*'
 
 presenter-test-build-storybook: &presenter-test-build-storybook
   - 'presenter/**/*'
 
+# frontend
+frontend-test-lint-code: &frontend-test-lint-code
+  - 'frontend/**/*'
+
+frontend-test-unit-code: &frontend-test-unit-code
+  - 'frontend/**/*'
+
+frontend-test-build-code: &frontend-test-build-code
+  - 'frontend/**/*'
+
+frontend-test-build-docker: &frontend-test-build-docker
+  - 'frontend/**/*'
+
+frontend-test-build-docs: &frontend-test-build-docs
+  - 'frontend/**/*.md'
+  - 'frontend/.vuepress/*'
+
+frontend-test-build-storybook: &frontend-test-build-storybook
+  - 'frontend/**/*'
+
 # backend
 backend-test-lint-code: &backend-test-lint-code
   - 'backend/**/*'

.github/workflows/frontend.deploy.chromatic.yml

@@ -0,0 +1,21 @@
+name: "frontend:deploy:chromatic"
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build-and-deploy:
+    name: Chromatic - Frontend
+    runs-on: ubuntu-latest
+    env:
+      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_FRONTEND }}
+      WORKING_DIRECTORY: ./frontend
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Frontend | Build
+        run: npm install && npm run chromatic -- --exit-zero-on-changes
+        working-directory: ${{env.WORKING_DIRECTORY}}

.github/workflows/frontend.test.build.code.yml

@@ -0,0 +1,37 @@
+name: "frontend:test:build test code"
+
+on: push
+
+jobs:
+  # only (but most important) job from this workflow required for pull requests
+  # check results serve as run conditions for all other jobs here
+  files-changed:
+    name: Detect File Changes - frontend-test-build-code
+    runs-on: ubuntu-latest
+    outputs:
+      changes: ${{ steps.changes.outputs.frontend-test-build-code }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Check for frontend file changes
+        uses: dorny/paths-filter@v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+          list-files: shell
+
+  build:
+    if: needs.files-changed.outputs.changes == 'true'
+    name: Build - Frontend
+    needs: files-changed
+    runs-on: ubuntu-latest
+    env:
+      WORKING_DIRECTORY: ./frontend
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Frontend | Build
+        run: npm install && npm run build
+        working-directory: ${{env.WORKING_DIRECTORY}}

.github/workflows/frontend.test.build.docker.yml

@@ -0,0 +1,52 @@
+name: "frontend:test:build test docker"
+
+on: push
+
+jobs:
+  # only (but most important) job from this workflow required for pull requests
+  # check results serve as run conditions for all other jobs here
+  files-changed:
+    name: Detect File Changes - frontend-test-build-docker
+    runs-on: ubuntu-latest
+    outputs:
+      changes: ${{ steps.changes.outputs.frontend-test-build-docker }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Check for frontend file changes
+        uses: dorny/paths-filter@v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+          list-files: shell
+
+  build-production:
+    if: needs.files-changed.outputs.changes == 'true'
+    name: Build Docker Production - Frontend
+    needs: files-changed
+    runs-on: ubuntu-latest
+    env:
+      WORKING_DIRECTORY: ./frontend
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Frontend | Build Docker Production
+        run: docker compose -f docker-compose.yml build
+        working-directory: ${{env.WORKING_DIRECTORY}}
+
+  build-development:
+    if: needs.files-changed.outputs.changes == 'true'
+    name: Build Docker Development - Frontend
+    needs: files-changed
+    runs-on: ubuntu-latest
+    env:
+      WORKING_DIRECTORY: ./frontend
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Frontend | Build Docker Development
+        run: docker compose build
+        working-directory: ${{env.WORKING_DIRECTORY}}

.github/workflows/frontend.test.build.docs.yml

@@ -0,0 +1,37 @@
+name: "frontend:test:build test docs"
+
+on: push
+
+jobs:
+  # only (but most important) job from this workflow required for pull requests
+  # check results serve as run conditions for all other jobs here
+  files-changed:
+    name: Detect File Changes - frontend-test-build-docs
+    runs-on: ubuntu-latest
+    outputs:
+      changes: ${{ steps.changes.outputs.frontend-test-build-docs }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Check for frontend file changes
+        uses: dorny/paths-filter@v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+          list-files: shell
+
+  build:
+    if: needs.files-changed.outputs.changes == 'true'
+    name: Build Docs - Frontend
+    needs: files-changed
+    runs-on: ubuntu-latest
+    env:
+      WORKING_DIRECTORY: ./frontend
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Frontend | Build Docs
+        run: npm install && npm run docs:build
+        working-directory: ${{env.WORKING_DIRECTORY}}

.github/workflows/frontend.test.build.storybook.yml

@@ -0,0 +1,37 @@
+name: "frontend:test:build test storybook"
+
+on: push
+
+jobs:
+  # only (but most important) job from this workflow required for pull requests
+  # check results serve as run conditions for all other jobs here
+  files-changed:
+    name: Detect File Changes - frontend-test-build-storybook
+    runs-on: ubuntu-latest
+    outputs:
+      changes: ${{ steps.changes.outputs.frontend-test-build-storybook }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Check for frontend file changes
+        uses: dorny/paths-filter@v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+          list-files: shell
+
+  storybook:
+    if: needs.files-changed.outputs.changes == 'true'
+    name: Build Storybook - Frontend
+    needs: files-changed
+    runs-on: ubuntu-latest
+    env:
+      WORKING_DIRECTORY: ./frontend
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Frontend | Build Storybook
+        run: npm install && npm run storybook:build
+        working-directory: ${{env.WORKING_DIRECTORY}}

.github/workflows/frontend.test.lint.code.yml

@@ -0,0 +1,37 @@
+name: "frontend:test:lint code with defined linters"
+
+on: push
+
+jobs:
+  # only (but most important) job from this workflow required for pull requests
+  # check results serve as run conditions for all other jobs here 
+  files-changed:
+    name: Detect File Changes - frontend-test-lint-code
+    runs-on: ubuntu-latest
+    outputs:
+      changes: ${{ steps.changes.outputs.frontend-test-lint-code }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Check for frontend file changes
+        uses: dorny/paths-filter@v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+          list-files: shell
+
+  lint:
+    if: needs.files-changed.outputs.changes == 'true'
+    name: Lint - Frontend
+    needs: files-changed
+    runs-on: ubuntu-latest
+    env:
+      WORKING_DIRECTORY: ./frontend
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Frontend | Lint
+        run: npm install && npm run test:lint
+        working-directory: ${{env.WORKING_DIRECTORY}}

.github/workflows/frontend.test.unit.code.yml

@@ -0,0 +1,37 @@
+name: "frontend:test:unit test code with defined suites"
+
+on: push
+
+jobs:
+  # only (but most important) job from this workflow required for pull requests
+  # check results serve as run conditions for all other jobs here 
+  files-changed:
+    name: Detect File Changes - frontend-test-unit-code
+    runs-on: ubuntu-latest
+    outputs:
+      changes: ${{ steps.changes.outputs.frontend-test-unit-code }}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Check for frontend file changes
+        uses: dorny/paths-filter@v3.0.2
+        id: changes
+        with:
+          token: ${{ github.token }}
+          filters: .github/file-filters.yml
+          list-files: shell
+
+  unit:
+    if: needs.files-changed.outputs.changes == 'true'
+    name: Unit - Frontend
+    needs: files-changed
+    runs-on: ubuntu-latest
+    env:
+      WORKING_DIRECTORY: ./frontend
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Frontend | Unit
+        run: npm install && npm run test:unit
+        working-directory: ${{env.WORKING_DIRECTORY}}

.github/workflows/presenter.deploy.chromatic.yml

@@ -8,7 +8,7 @@ jobs:
     name: Chromatic - Presenter
     runs-on: ubuntu-latest
     env:
-      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+      CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN_PRESENTER }}
       WORKING_DIRECTORY: ./presenter
     steps:
       - name: Set Node version

.github/workflows/test.lint.pr.yml

@@ -31,6 +31,7 @@ jobs:
           scopes: |
             backend
             presenter
+            frontend
             docu
             docker
             release

frontend/.dockerignore

@@ -0,0 +1,5 @@
+node_modules/
+build/
+coverage/
+.vuepress/.temp/
+.vuepress/.cache/

frontend/.env.dist

@@ -0,0 +1,5 @@
+# META
+PUBLIC_ENV__META__BASE_URL="http://localhost:3000"
+PUBLIC_ENV__META__DEFAULT_AUTHOR="IT Team 4 Change"
+PUBLIC_ENV__META__DEFAULT_DESCRIPTION="IT4C Frontend Boilerplate"
+PUBLIC_ENV__META__DEFAULT_TITLE="IT4C"

frontend/.eslintignore

@@ -0,0 +1,5 @@
+node_modules/
+build/
+coverage/
+.storybook/
+.vuepress/