From bd1c37d899c50f0f41c6e4e9dda52d87e20660bc Mon Sep 17 00:00:00 2001 From: Serafim Sukharev Date: Tue, 28 Jan 2025 20:01:35 +0300 Subject: [PATCH] chore: frontend watch --- compose.yml | 23 ++++++++++ frontend/Dockerfile | 5 ++- frontend/package-lock.json | 87 ++------------------------------------ frontend/package.json | 5 +-- frontend/src/index.html | 2 +- frontend/src/keycloak.ts | 14 ++---- frontend/tsconfig.json | 4 +- 7 files changed, 38 insertions(+), 102 deletions(-) diff --git a/compose.yml b/compose.yml index 44ae975..b49c13d 100644 --- a/compose.yml +++ b/compose.yml @@ -1,6 +1,7 @@ services: nginx: image: nginx:latest + container_name: kg-nginx volumes: - ./nginx:/etc/nginx/conf.d - ./frontend/dist:/usr/share/nginx/html @@ -10,13 +11,34 @@ services: - backend - keycloak + frontend: + container_name: kg-frontend + env_file: + - .env + build: + context: ./frontend + volumes: + - ./frontend/dist:/app/dist + develop: + watch: + - action: sync + path: ./frontend + target: /app + ignore: + - node_modules/ + - dist/ + - action: rebuild + path: ./frontend/package.json + backend: + container_name: kg-backend build: context: ./backend depends_on: - keycloak keycloak: + container_name: kg-keycloak image: quay.io/keycloak/keycloak:latest environment: - KC_DB=postgres @@ -34,6 +56,7 @@ services: - postgres postgres: + container_name: kg-postgres image: postgres:latest environment: POSTGRES_DB: keycloak diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 7065402..b118f9a 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -1,5 +1,6 @@ -FROM node as build -COPY . /app +FROM node:23.6.1 as build WORKDIR /app +COPY package* /app RUN npm install +COPY . /app CMD npm run watch diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 826270c..27b5d6f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,8 +9,6 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "@react-keycloak/web": "^3.4.0", - "dotenv": "^16.4.7", "keycloak-js": "^26.1.0", "react": "^19.0.0", "react-dom": "^19.0.0" @@ -19,6 +17,7 @@ "@types/react": "^19.0.7", "@types/react-dom": "^19.0.3", "css-loader": "^7.1.2", + "dotenv": "^16.4.7", "html-webpack-plugin": "^5.6.3", "ts-loader": "^9.5.2", "typescript": "^5.7.3", @@ -27,18 +26,6 @@ "webpack-dev-server": "^5.2.0" } }, - "node_modules/@babel/runtime": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz", - "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==", - "license": "MIT", - "dependencies": { - "regenerator-runtime": "^0.14.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/@discoveryjs/json-ext": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.6.3.tgz", @@ -177,48 +164,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@react-keycloak/core": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@react-keycloak/core/-/core-3.2.0.tgz", - "integrity": "sha512-1yzU7gQzs+6E1v6hGqxy0Q+kpMHg9sEcke2yxZR29WoU8KNE8E50xS6UbI8N7rWsgyYw8r9W1cUPCOF48MYjzw==", - "license": "MIT", - "dependencies": { - "react-fast-compare": "^3.2.0" - }, - "funding": { - "type": "patreon", - "url": "https://www.patreon.com/reactkeycloak" - }, - "peerDependencies": { - "react": ">=16" - } - }, - "node_modules/@react-keycloak/web": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/@react-keycloak/web/-/web-3.4.0.tgz", - "integrity": "sha512-yKKSCyqBtn7dt+VckYOW1IM5NW999pPkxDZOXqJ6dfXPXstYhOQCkTZqh8l7UL14PkpsoaHDh7hSJH8whah01g==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.9.0", - "@react-keycloak/core": "^3.2.0", - "hoist-non-react-statics": "^3.3.2" - }, - "funding": { - "type": "patreon", - "url": "https://www.patreon.com/reactkeycloak" - }, - "peerDependencies": { - "keycloak-js": ">=9.0.2", - "react": ">=16.8", - "react-dom": ">=16.8", - "typescript": ">=3.8" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, "node_modules/@types/body-parser": { "version": "1.19.5", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz", @@ -1566,6 +1511,7 @@ "version": "16.4.7", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz", "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==", + "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=12" @@ -2136,15 +2082,6 @@ "he": "bin/he" } }, - "node_modules/hoist-non-react-statics": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", - "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "license": "BSD-3-Clause", - "dependencies": { - "react-is": "^16.7.0" - } - }, "node_modules/hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", @@ -3406,18 +3343,6 @@ "react": "^19.0.0" } }, - "node_modules/react-fast-compare": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", - "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", - "license": "MIT" - }, - "node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "license": "MIT" - }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", @@ -3459,12 +3384,6 @@ "node": ">= 10.13.0" } }, - "node_modules/regenerator-runtime": { - "version": "0.14.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", - "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", - "license": "MIT" - }, "node_modules/relateurl": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", @@ -4350,7 +4269,7 @@ "version": "5.7.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz", "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==", - "devOptional": true, + "dev": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", diff --git a/frontend/package.json b/frontend/package.json index 002696e..5a26b7d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,8 +10,6 @@ "license": "ISC", "description": "", "dependencies": { - "@react-keycloak/web": "^3.4.0", - "dotenv": "^16.4.7", "keycloak-js": "^26.1.0", "react": "^19.0.0", "react-dom": "^19.0.0" @@ -20,6 +18,7 @@ "@types/react": "^19.0.7", "@types/react-dom": "^19.0.3", "css-loader": "^7.1.2", + "dotenv": "^16.4.7", "html-webpack-plugin": "^5.6.3", "ts-loader": "^9.5.2", "typescript": "^5.7.3", @@ -27,4 +26,4 @@ "webpack-cli": "^6.0.1", "webpack-dev-server": "^5.2.0" } -} +} \ No newline at end of file diff --git a/frontend/src/index.html b/frontend/src/index.html index ee471dd..b79bc21 100644 --- a/frontend/src/index.html +++ b/frontend/src/index.html @@ -3,7 +3,7 @@ - Kilogram + Kilogramm
diff --git a/frontend/src/keycloak.ts b/frontend/src/keycloak.ts index 0fa54cc..153e46d 100644 --- a/frontend/src/keycloak.ts +++ b/frontend/src/keycloak.ts @@ -1,19 +1,13 @@ import Keycloak from 'keycloak-js'; -let initOptions = { - url: process.env.KEYCLOAK_URL, +let kc = new Keycloak({ + url: process.env.KEYCLOAK_URL as string, realm: process.env.KEYCLOAK_REALM as string, clientId: process.env.KEYCLOAK_CLIENT as string, - onLoad: 'check-sso', - KeycloakResponseType: 'code', -} - -let kc = new Keycloak(initOptions); +}); kc.init({ - // @ts-ignore - onLoad: initOptions.onLoad, - KeycloakResponseType: 'code', + onLoad: 'check-sso', silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html", checkLoginIframe: false, pkceMethod: 'S256' diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 7d20448..6a3922e 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -25,9 +25,9 @@ // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ /* Modules */ - "module": "commonjs", /* Specify what module code is generated. */ + "module": "ES2022", /* Specify what module code is generated. */ // "rootDir": "./", /* Specify the root folder within your source files. */ - // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ + "moduleResolution": "bundler", /* Specify how TypeScript looks up a file from a given module specifier. */ // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */