build(frontend): Add support for analog.js framework

The main advantage of analog.js is support for file-based routing, which helps structuring the components in the frontend.
DSD-DBS · Dec 9, 2024 · ce308cc · ce308cc
1 parent b138d68
commit ce308cc
Show file tree

Hide file tree

Showing 75 changed files with 22,808 additions and 15,817 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,4 +17,5 @@ certs/*
 /helm/charts/*
 /logs/*
 .env
+!frontend/.env
 autoscaler
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -13,6 +13,7 @@ repos:
     rev: v5.0.0
     hooks:
       - id: check-added-large-files
+        exclude: '^frontend/package-lock.json'
       - id: check-builtin-literals
       - id: check-case-conflict
       - id: check-executables-have-shebangs
@@ -102,12 +103,22 @@ repos:
         types_or: [ts, css, html, markdown]
         exclude: '^frontend/src/app/openapi'
         additional_dependencies:
-          - '[email protected].1'
+          - 'prettier@^3.4.2'
           - 'prettier-plugin-tailwindcss@^0.6.9'
           - '@trivago/prettier-plugin-sort-imports@^4.3.0'
-          - 'tailwindcss@^3.4.15'
+          - 'tailwindcss@^3.4.16'
           - 'prettier-plugin-classnames@^0.7.4'
           - 'prettier-plugin-merge@^0.7.1'
+  - repo: local
+    hooks:
+      - id: tsc
+        name: tsc
+        entry: tsc -noEmit -p ./frontend
+        pass_filenames: false
+        language: node
+        types_or: [ts]
+        additional_dependencies:
+          - 'typescript@^5.7.2'
   - repo: https://github.com/Lucas-C/pre-commit-hooks
     rev: v1.5.5
     hooks:
@@ -181,13 +192,13 @@ repos:
         additional_dependencies:
           - 'eslint@^9.16.0'
           - '@eslint/js@^9.16.0'
-          - '[email protected].0'
+          - '[email protected].1'
           - 'eslint-config-prettier@^9.1.0'
-          - 'typescript-eslint@8.16.0'
+          - 'typescript-eslint@8.17.0'
           - 'eslint-plugin-unused-imports@^4.1.4'
           - 'eslint-plugin-tailwindcss@^3.17.5'
           - '[email protected]'
-          - 'tailwindcss@^3.4.15'
+          - 'tailwindcss@^3.4.16'
         args:
           [
             '--config',

diff --git a/Makefile b/Makefile
@@ -47,7 +47,7 @@ backend:
 	docker push -a $(DOCKER_REGISTRY)/$@
 
 frontend:
-	python frontend/fetch-version.py
+	$(MAKE) -C frontend fetch-version
 	docker build -t $@ -t $(DOCKER_REGISTRY)/$@ -t $(DOCKER_REGISTRY)/$@:$(DOCKER_TAG) frontend
 	docker push -a $(DOCKER_REGISTRY)/$@
 

diff --git a/frontend/.env b/frontend/.env
@@ -0,0 +1,9 @@
+# SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+# SPDX-License-Identifier: CC0-1.0
+
+VITE_BACKEND_URL='http://localhost:8000'
+VITE_API_DOCS_URL='http://localhost:8000/api/docs'
+VITE_DOCS_URL='http://localhost:8081'
+VITE_PROMETHEUS_URL='http://localhost:8080/prometheus/graph'
+VITE_GRAFANA_URL='http://localhost:8080/grafana/'
+VITE_SMTP_MOCK_URL='http://localhost:5000'
diff --git a/frontend/.env.production b/frontend/.env.production
@@ -0,0 +1,9 @@
+# SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+# SPDX-License-Identifier: CC0-1.0
+
+VITE_BACKEND_URL=''
+VITE_API_DOCS_URL='/api/docs'
+VITE_DOCS_URL='/docs'
+VITE_PROMETHEUS_URL='/prometheus/graph'
+VITE_GRAFANA_URL='/grafana/'
+VITE_SMTP_MOCK_URL='/smtp/'
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -47,12 +47,10 @@ testem.log
 .DS_Store
 Thumbs.db
 
-/src/environments/environment.prod.ts
-
 .angular
 
 
-/src/assets/version.json
+/public/version.json
 
 # Testing
 /test-results/
@@ -66,3 +64,8 @@ documentation.json
 .nx
 
 __screenshots__
+
+.nx/cache
+.nx/workspace-data
+
+**/*.mjs
diff --git a/frontend/.prettierrc.js → frontend/.prettierrc.cjs b/frontend/.prettierrc.js → frontend/.prettierrc.cjs
diff --git a/frontend/.storybook/tsconfig.json b/frontend/.storybook/tsconfig.json
@@ -6,5 +6,5 @@
     "resolveJsonModule": true
   },
   "include": ["./preview.ts", "../src/polyfills.ts", "../src/**/*.stories.ts"],
-  "files": ["./typings.d.ts"]
+  "files": ["./typings.d.ts", "../vite-env.d.ts"]
 }
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -22,7 +22,7 @@ FROM nginxinc/nginx-unprivileged:latest
 EXPOSE 8080
 
 COPY nginx.conf /etc/nginx/nginx.conf
-COPY --from=build /work/dist/capellacollab/browser /usr/share/nginx/html
+COPY --from=build /work/dist/capellacollab /usr/share/nginx/html
 USER root
 RUN chmod -R 777 /var/log/nginx
 USER nginx
diff --git a/frontend/Makefile b/frontend/Makefile
@@ -7,8 +7,14 @@ HOST ?= localhost
 
 .ONESHELL:
 
-dev:
-	ng serve --host $(HOST) --open
+dev: fetch-version
+	ng serve --open capellacollab
+
+types:
+	npx tsc --noEmit --watch
+
+fetch-version:
+	python fetch-version.py
 
 test:
 	if [ $(shell which chromium) ]; \

diff --git a/frontend/angular.json b/frontend/angular.json
@@ -17,100 +17,45 @@
           "skipTests": true
         }
       },
-      "root": "",
+      "root": ".",
       "sourceRoot": "src",
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular/build:application",
+          "builder": "@analogjs/platform:vite",
           "options": {
+            "configFile": "vite.config.ts",
+            "main": "src/main.ts",
             "outputPath": "dist/capellacollab",
-            "index": "src/index.html",
-            "browser": "src/main.ts",
-            "polyfills": ["src/polyfills.ts"],
-            "tsConfig": "tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets", "src/fonts"],
-            "styles": [
-              "@angular/material/prebuilt-themes/indigo-pink.css",
-              "monaco-editor/min/vs/editor/editor.main.css",
-              "src/styles.css",
-              "node_modules/ngx-toastr/toastr.css",
-              "monaco-editor/min/vs/editor/editor.main.css",
-              "node_modules/highlight.js/styles/default.css"
-            ],
-            "loader": {
-              ".ttf": "file"
-            },
-            "optimization": {
-              "fonts": true
-            }
+            "tsConfig": "tsconfig.app.json"
           },
+          "defaultConfiguration": "production",
           "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "5mb",
-                  "maximumError": "10mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
-                }
-              ],
-              "outputHashing": "all"
-            },
             "development": {
-              "optimization": false,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.dev.ts"
-                }
-              ]
+              "mode": "development"
             },
-            "storybook": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "5mb",
-                  "maximumError": "10mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
-                }
-              ],
-              "outputHashing": "all",
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.storybook.ts"
-                }
-              ]
+            "production": {
+              "sourcemap": false,
+              "mode": "production"
             }
-          },
-          "defaultConfiguration": "production"
+          }
         },
         "serve": {
-          "builder": "@angular/build:dev-server",
+          "builder": "@analogjs/platform:vite-dev-server",
+          "defaultConfiguration": "development",
+          "options": {
+            "buildTarget": "capellacollab:build",
+            "port": 4200
+          },
           "configurations": {
-            "production": {
-              "buildTarget": "capellacollab:build:production"
-            },
             "development": {
-              "buildTarget": "capellacollab:build:development"
+              "buildTarget": "capellacollab:build:development",
+              "hmr": true
             },
-            "playwright": {
-              "buildTarget": "capellacollab:build:development"
+            "production": {
+              "buildTarget": "capellacollab:build:production"
             }
-          },
-          "defaultConfiguration": "development"
+          }
         },
         "extract-i18n": {
           "builder": "@angular/build:extract-i18n",
@@ -129,34 +74,18 @@
           "options": {
             "configDir": ".storybook",
             "quiet": true,
-            "browserTarget": "capellacollab:build:development",
             "compodoc": false,
             "port": 6006,
-            "styles": [
-              ".storybook/styles.css",
-              "@angular/material/prebuilt-themes/indigo-pink.css",
-              "monaco-editor/min/vs/editor/editor.main.css",
-              "src/styles.css",
-              "node_modules/ngx-toastr/toastr.css",
-              "node_modules/highlight.js/styles/default.css"
-            ]
+            "styles": [".storybook/styles.css", "src/styles.css"]
           }
         },
         "build-storybook": {
           "builder": "@storybook/angular:build-storybook",
           "options": {
             "configDir": ".storybook",
-            "browserTarget": "capellacollab:build:storybook",
             "compodoc": false,
             "outputDir": "storybook-static",
-            "styles": [
-              ".storybook/styles.css",
-              "@angular/material/prebuilt-themes/indigo-pink.css",
-              "monaco-editor/min/vs/editor/editor.main.css",
-              "src/styles.css",
-              "node_modules/ngx-toastr/toastr.css",
-              "node_modules/highlight.js/styles/default.css"
-            ]
+            "styles": [".storybook/styles.css", "src/styles.css"]
           }
         }
       }

diff --git a/frontend/eslint.config.cjs b/frontend/eslint.config.cjs
@@ -60,7 +60,7 @@ module.exports = tseslint.config(
     ],
     settings: {
       tailwindcss: {
-        config: "frontend/tailwind.config.js",
+        config: "frontend/tailwind.config.cjs",
         cssFiles: [
           "frontend/**/*.css",
           "!**/node_modules",

diff --git a/frontend/fetch-version.py b/frontend/fetch-version.py
@@ -15,7 +15,7 @@ def run_git_command(cmd: list[str]):
     ).stdout.decode()
 
 
-(pathlib.Path(__file__).parent / "src" / "assets" / "version.json").write_text(
+(pathlib.Path(__file__).parent / "public" / "version.json").write_text(
     json.dumps(
         {
             "git": {

diff --git a/frontend/src/index.html → frontend/index.html b/frontend/src/index.html → frontend/index.html
@@ -10,9 +10,11 @@
     <title>Capella Collaboration</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="stylesheet" href="/src/styles.css" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   </head>
   <body>
     <app-root></app-root>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>