chore: frontend watch

2025-01-28 20:01:35 +03:00 · 2025-01-28 20:01:35 +03:00 · bd1c37d899
parent e6f583f6d4
commit bd1c37d899
7 changed files with 38 additions and 102 deletions
--- 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
--- 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
--- 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",
--- 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"
  }
-}
+}
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@ -3,7 +3,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Kilogram</title>
+    <title>Kilogramm</title>
 </head>
 <body>
    <div id="root"></div>
--- 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'
--- 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. */