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 · Nov 30, 2024 · 4efd3e3 · 4efd3e3
1 parent a881a13
commit 4efd3e3
Show file tree

Hide file tree

Showing 39 changed files with 25,226 additions and 14,788 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,4 +17,5 @@ certs/*
 /helm/charts/*
 /logs/*
 .env
+!frontend/.env
 autoscaler
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/.env.storybook b/frontend/.env.storybook
@@ -0,0 +1,9 @@
+# SPDX-FileCopyrightText: Copyright DB InfraGO AG and contributors
+# SPDX-License-Identifier: CC0-1.0
+
+VITE_BACKEND_URL='about:blank'
+VITE_API_DOCS_URL='about:blank'
+VITE_DOCS_URL='https://dsd-dbs.github.io/capella-collab-manager'
+VITE_PROMETHEUS_URL='about:blank'
+VITE_GRAFANA_URL='about:blank'
+VITE_SMTP_MOCK_URL='about:blank'
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,7 @@ documentation.json
 .nx
 
 __screenshots__
+
+
+.nx/cache
+.nx/workspace-data
diff --git a/frontend/.prettierrc.js → frontend/.prettierrc.cjs b/frontend/.prettierrc.js → frontend/.prettierrc.cjs
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-devkit/build-angular: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-devkit/build-angular: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-devkit/build-angular:extract-i18n",

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>