diff --git a/.gitignore b/.gitignore index f7e7c95fa1..7bcc8c8126 100644 --- 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 index 021b9befa7..dbaaaa1a61 100644 --- 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,10 +103,10 @@ repos: types_or: [ts, css, html, markdown] exclude: '^frontend/src/app/openapi' additional_dependencies: - - 'prettier@3.4.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: https://github.com/Lucas-C/pre-commit-hooks @@ -181,13 +182,13 @@ repos: additional_dependencies: - 'eslint@^9.16.0' - '@eslint/js@^9.16.0' - - 'angular-eslint@19.0.0' + - 'angular-eslint@19.0.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' - 'eslint-plugin-storybook@0.11.1' - - 'tailwindcss@^3.4.15' + - 'tailwindcss@^3.4.16' args: [ '--config', diff --git a/Makefile b/Makefile index b43895ffd3..6a90862665 100644 --- 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 new file mode 100644 index 0000000000..cbceabc2ce --- /dev/null +++ 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 new file mode 100644 index 0000000000..064dd2fa54 --- /dev/null +++ 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 index c30773d08e..da3f543bd1 100644 --- 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 b/frontend/.prettierrc.cjs similarity index 100% rename from frontend/.prettierrc.js rename to frontend/.prettierrc.cjs diff --git a/frontend/.storybook/tsconfig.json b/frontend/.storybook/tsconfig.json index 4a0f48cdf5..865c7af668 100644 --- 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 index cca338e559..4e269ace68 100644 --- 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 index 6bba7aafd6..b73f3529fc 100644 --- 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 index 31cf32e2c1..f3146a0a52 100644 --- 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 index 643a05e366..8715d6431f 100644 --- 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 index cf64146fa4..39d589a889 100644 --- 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 b/frontend/index.html similarity index 69% rename from frontend/src/index.html rename to frontend/index.html index 0f97599643..d08c287b07 100644 --- a/frontend/src/index.html +++ b/frontend/index.html @@ -10,9 +10,11 @@