refactoring , dockerizing

.gitignore

@@ -1,2 +1,3 @@
 *.iml
 .idea/
+/environment/infra/docker-compose/yogastic/.env

environment/dev/docker/app/scripts/build.docker.build.step.build.sh

@@ -3,7 +3,7 @@
 CURRENT_DIR=$(dirname "$0")
 # build docker image
 source "${CURRENT_DIR}/build.docker.env.sh"
-PROJECT_ROOT=$(readlink -f "${CURRENT_DIR}/../../../../../strapi-yoga")
+PROJECT_ROOT=$(readlink -f "${CURRENT_DIR}/../../../../../yoga-app")
 
 echo "build image ${TAG} from folder ${PROJECT_ROOT}"
 

environment/dev/docker/app/scripts/build.docker.env.sh

@@ -6,4 +6,4 @@ echo "Reading version file: ${VERSION_FILE}"
 
 export VERSION=$(cat "${VERSION_FILE}")
 
-export TAG=docker.rschneider.hu/infra/yoga-strapi:$VERSION
+export TAG=docker.rschneider.hu/infra/yoga-app:$VERSION

environment/dev/docker/app/scripts/version.txt

@@ -0,0 +1 @@
+202501071722.a8b144f

environment/dev/docker/cms/readme.md

@@ -0,0 +1,54 @@
+# Building the docker image
+
+## Dockerfile
+
+The Dockerfile can be found in the root folder of the project.
+
+## Available Environment Variables
+
+
+| property name                          | description                                                                                                                                                                       | values                                                                   |
+|----------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------|
+| DB_TYPE                                | type of the db enginge.                                                                                                                                                           | mysql, h2                                                                |
+| DB_URL                                 | jdbc url of the db                                                                                                                                                                | "jdbc:mysql://ucs-intranet-db-author:3306/magnolia"                      |
+| DB_USER                                | username for the db                                                                                                                                                               | root                                                                     |
+| DB_PASSWORD                            | password for the db                                                                                                                                                               | root                                                                     |
+| CATALINA_OPTS_APPEND                   | Java options form tomcat                                                                                                                                                          | "-Xms512M -Xmx2048M "                                                    | 
+| JAVA_OPTS                              | addition java options for application                                                                                                                                             | "-agentlib:jdwp=transport=dt_socket,address=*:54455,server=y,suspend=n"  |
+| MAGNOLIA_UPDATE_AUTO                   | set the property 'magnolia.update.auto' in magnolia.properties                                                                                                                    | ${MAGNOLIA_UPDATE_AUTO}                                                  |
+| MAGNOLIA_AUTHORINSTANCE_URL            | public accessible url of the author instance                                                                                                                                      | http://author.ucsintranet.at                                             |
+| MAGNOLIA_UCSWEBSITE_AUTHORINSTANCE_URL | public accessible url of the author instance of the UCS website                                                                                                                   | http://author.ucsintranet.at                                             |
+| MAGNOLIA_PUBLICINSTANCE_URL            | public accessible url of the public instance                                                                                                                                      | http://public.ucsintranet.at                                             |
+| MAGNOLIA_PROFILE                       | the magnolia profile to use   (see: https://docs.magnolia-cms.com/product-docs/6.2/releases/release-notes-for-magnolia-cms-6.2.2/#_profile_based_configuration_of_property_files) | magnoliaAuthor, magnoliaPublic                                           |
+| KEYCLOAK_REALM                         | the keycloak realm to use                                                                                                                                                         | magnolia                                                                 |
+| KEYCLOAK_CLIENT_ID_AUTHOR              | the author keycloak client id                                                                                                                                                     | author.ucsintranet                                                       |
+| KEYCLOAK_CLIENT_ID_PUBLIC              | the author keycloak client id                                                                                                                                                     | author.ucsintranet                                                       |
+| KEYCLOAK_AUTH_URL                      | <TBD>                                                                                                                                                                             | ${KEYCLOAK_AUTH_URL}                                                     |
+| KEYCLOAK_SSL_REQUIRED                  | <TBD>                                                                                                                                                                             | external                                                                 |
+| KEYCLOAK_CREDENTIALS_SECRET_AUTHOR     | author keycloak secret                                                                                                                                                            |                                                                          |
+| KEYCLOAK_CREDENTIALS_SECRET_PUBLIC     | public keycloak secret                                                                                                                                                            |                                                                          |
+
+## About the image
+
+The image is based on the cli provided by magnolia ( a.k.a mgnl).
+To get more information about the mgnl cli tool, please visit the [mgnl documentation](https://docs.magnolia-cms.com/magnolia-cli/4.x/)
+
+The project generated by the mgnl tool, already includes the author and public instances!
+Be sure, that in production you restrict the access to the author instance, and to the admin components
+
+The image is set up so, that it uses the folder "/magnolia/light-modules" as resources dir.
+While build the image, the <PROJECT_ROOT>/magnolia/modules will be copied in to the image as "/magnolia/light-modules".
+For development, the <PROJECT_ROOT>/magnolia/modules can be mounted, so the changes in the lightmodules are "live/instant"
+
+## Building & pushing the image
+
+The easiest way to build and pusht the image is, to run the next commands
+```bash
+   npm run docker:build
+```
+
+```bash
+   npm run docker:push
+```
+
+For more details, pls examine the package.json file, and the scripts in docker/magnolia/scripts folder

environment/dev/docker/cms/scripts/build.docker.build.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+CURRENT_DIR=$(dirname "$0")
+source "${CURRENT_DIR}/build.docker.build.step.inc.version.sh"
+source "${CURRENT_DIR}/build.docker.build.step.build.sh"

environment/dev/docker/cms/scripts/build.docker.build.step.build.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+CURRENT_DIR=$(dirname "$0")
+# build docker image
+source "${CURRENT_DIR}/build.docker.env.sh"
+PROJECT_ROOT=$(readlink -f "${CURRENT_DIR}/../../../../../yoga-cms")
+
+echo "build image ${TAG} from folder ${PROJECT_ROOT}"
+
+cd $PROJECT_ROOT
+
+docker build --platform linux/amd64 -t $TAG .

environment/dev/docker/cms/scripts/build.docker.build.step.inc.version.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+# set the actual commit date and commit hash in version.txt
+GIT_BRANCH=$(git rev-parse --abbrev-ref HEAD)
+GIT_BRANCH_SHORT=$(echo $GIT_BRANCH | cut -d "/" -f 1)
+GIT_COMMIT_DATE=$(git log -1 --format=%cd --date=format:%Y%m%d%H%M)
+GIT_COMMIT_ID_SHORT=$(git rev-parse --short HEAD)
+
+VERSION=$GIT_COMMIT_DATE.$GIT_COMMIT_ID_SHORT
+
+CURRENT_DIR=$(dirname "$0")
+VERSION_FILE="${CURRENT_DIR}/version.txt"
+
+echo "Saving version ${VERSION} to file ${VERSION_FILE}"
+
+echo $VERSION
+echo $VERSION > $VERSION_FILE
+

environment/dev/docker/cms/scripts/build.docker.env.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+CURRENT_DIR=$(dirname "$0")
+VERSION_FILE="${CURRENT_DIR}/version.txt"
+echo "Reading version file: ${VERSION_FILE}"
+
+export VERSION=$(cat "${VERSION_FILE}")
+
+export TAG=docker.rschneider.hu/infra/yoga-cms:$VERSION

environment/dev/docker/cms/scripts/build.docker.push.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+CURRENT_DIR=$(dirname "$0")
+# push docker image
+source "${CURRENT_DIR}/build.docker.env.sh"
+echo "push image ${TAG}"
+docker push $TAG

environment/dev/docker/cms/scripts/version.txt

@@ -0,0 +1 @@
+202501071722.a8b144f

environment/dev/docker/strapi/scripts/version.txt

@@ -1 +0,0 @@
-202501062213.bed409f

environment/infra/docker-compose/yogastic/docker-compose.yaml

@@ -1,22 +1,69 @@
 services:
-  vaultwarden:
+#  yogastic:
-    labels:
+#    labels:
-      - traefik.http.routers.yoga.rule=Host(`yoga.rschneider.net`)
+#      - traefik.http.routers.yoga.rule=Host(`yoga.rschneider.net`)
-      - traefik.http.routers.yoga.tls=true
+#      - traefik.http.routers.yoga.tls=true
-      - traefik.http.routers.yoga.service=yoga
+#      - traefik.http.routers.yoga.service=yoga
-      - traefik.http.services.yoga.loadbalancer.server.port=80
+#      - traefik.http.services.yoga.loadbalancer.server.port=80
-      - traefik.http.routers.yoga-public.rule=Host(`yoga.rschneider.hu`)
+#      - traefik.http.routers.yoga-public.rule=Host(`yoga.rschneider.hu`)
-      - traefik.http.routers.yoga-public.tls=true
+#      - traefik.http.routers.yoga-public.tls=true
-      - traefik.http.routers.yoga-public.service=yoga-public
+#      - traefik.http.routers.yoga-public.service=yoga-public
-      - traefik.http.services.yoga-public.loadbalancer.server.port=80
+#      - traefik.http.services.yoga-public.loadbalancer.server.port=80
-#      - traefik.http.middlewares.test-redirectscheme.redirectscheme.scheme=https
+##      - traefik.http.middlewares.test-redirectscheme.redirectscheme.scheme=https
-#      - traefik.http.middlewares.test-redirectscheme.redirectscheme.permanent=true
+##      - traefik.http.middlewares.test-redirectscheme.redirectscheme.permanent=true
-    image: docker.rschneider.hu/infra/yogastic:202412282019.ae4bba3
+#    image: docker.rschneider.hu/infra/yogastic:202412282019.ae4bba3
-    container_name: yogastic
+#    container_name: yogastic
-    restart: always
+#    restart: always
-    networks:
+#    networks:
-      traefik_traefik:
+#      traefik_traefik:
 
-networks:
+  strapi-db:
-  traefik_traefik:
+    image: mariadb:11.6.2
-    external: true
+    environment:
+      MARIADB_ROOT_PASSWORD: strapi
+      MARIADB_DATABASE: strapi
+      MARIADB_USER: strapi
+      MARIADB_PASSWORD: strapi
+    volumes:
+      - strapi-db:/var/lib/mysql
+    ports:
+      - "4011:3306"
+
+  nextjs-db:
+    image: postgres:17
+    environment:
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_DB: ${POSTGRES_DATABASE}
+      POSTGRES_USER: ${POSTGRES_USER}
+    volumes:
+      - next-db:/var/lib/postgresql/data
+    ports:
+      - "4012:5432"
+
+  app:
+    image: docker.rschneider.hu/infra/yoga-app:202501071722.a8b144f
+    ports:
+      - "4081:3000"
+    environment:
+      POSTGRES_URL: ${POSTGRES_URL}
+      POSTGRES_URL_NON_POOLING: ${POSTGRES_URL_NON_POOLING}
+      POSTGRES_USER: ${POSTGRES_USER}
+      POSTGRES_HOST: ${POSTGRES_HOST}
+      POSTGRES_PORT: ${POSTGRES_PORT}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_DATABASE: ${POSTGRES_DATABASE}
+
+  cms:
+    image: docker.rschneider.hu/infra/yoga-cms:202501071722.a8b144f
+    ports:
+      - "4082:1337"
+
+volumes:
+    next-db: {}
+    strapi-db: {}
+
+
+
+#networks:
+#  traefik_traefik:
+#    external: true

yoga-app/Dockerfile

@@ -10,6 +10,7 @@ WORKDIR /app
 
 # Install dependencies based on the preferred package manager
 COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* .npmrc* ./
+RUN echo ""
 RUN \
   if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
   elif [ -f package-lock.json ]; then npm ci; \
@@ -27,7 +28,7 @@ COPY . .
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry during the build.
-# ENV NEXT_TELEMETRY_DISABLED=1
+ENV NEXT_TELEMETRY_DISABLED=1
 
 RUN \
   if [ -f yarn.lock ]; then yarn run build; \

yoga-app/package-lock.json

@@ -11,6 +11,7 @@
         "@fortawesome/fontawesome-free": "^6.7.2",
         "@types/aos": "^3.0.7",
         "@types/bcrypt": "^5.0.2",
+        "@types/pg": "^8.11.10",
         "aos": "^2.3.4",
         "bcrypt": "^5.1.1",
         "bootstrap": "^4.6.2",
@@ -1156,6 +1157,68 @@
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/pg": {
+      "version": "8.11.10",
+      "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.11.10.tgz",
+      "integrity": "sha512-LczQUW4dbOQzsH2RQ5qoeJ6qJPdrcM/DcMLoqWQkMLMsq83J5lAX3LXjdkWdpscFy67JSOWDnh7Ny/sPFykmkg==",
+      "dependencies": {
+        "@types/node": "*",
+        "pg-protocol": "*",
+        "pg-types": "^4.0.1"
+      }
+    },
+    "node_modules/@types/pg/node_modules/pg-types": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-4.0.2.tgz",
+      "integrity": "sha512-cRL3JpS3lKMGsKaWndugWQoLOCoP+Cic8oseVcbr0qhPzYD5DWXK+RZ9LY9wxRf7RQia4SCwQlXk0q6FCPrVng==",
+      "dependencies": {
+        "pg-int8": "1.0.1",
+        "pg-numeric": "1.0.2",
+        "postgres-array": "~3.0.1",
+        "postgres-bytea": "~3.0.0",
+        "postgres-date": "~2.1.0",
+        "postgres-interval": "^3.0.0",
+        "postgres-range": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@types/pg/node_modules/postgres-array": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-3.0.2.tgz",
+      "integrity": "sha512-6faShkdFugNQCLwucjPcY5ARoW1SlbnrZjmGl0IrrqewpvxvhSLHimCVzqeuULCbG0fQv7Dtk1yDbG3xv7Veog==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@types/pg/node_modules/postgres-bytea": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-3.0.0.tgz",
+      "integrity": "sha512-CNd4jim9RFPkObHSjVHlVrxoVQXz7quwNFpz7RY1okNNme49+sVyiTvTRobiLV548Hx/hb1BG+iE7h9493WzFw==",
+      "dependencies": {
+        "obuf": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@types/pg/node_modules/postgres-date": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-2.1.0.tgz",
+      "integrity": "sha512-K7Juri8gtgXVcDfZttFKVmhglp7epKb1K4pgrkLxehjqkrgPhfG6OO8LHLkfaqkbpjNRnra018XwAr1yQFWGcA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@types/pg/node_modules/postgres-interval": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-3.0.0.tgz",
+      "integrity": "sha512-BSNDnbyZCXSxgA+1f5UU2GmwhoI0aU5yMxRGO8CdFEcY2BQF9xm/7MqKnYoM1nJDk8nONNWDk9WeSmePFhQdlw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.0.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.2.tgz",
@@ -4207,6 +4270,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/obuf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -4368,6 +4436,14 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/pg-numeric": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pg-numeric/-/pg-numeric-1.0.2.tgz",
+      "integrity": "sha512-BM/Thnrw5jm2kKLE5uJkXqqExRUY/toLHda65XgFTBTFYZyopbKjBe29Ii3RbkvlsMoFwD+tHeGaCjjv0gHlyw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/pg-pool": {
       "version": "3.7.0",
       "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.7.0.tgz",
@@ -4504,6 +4580,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/postgres-range": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/postgres-range/-/postgres-range-1.1.4.tgz",
+      "integrity": "sha512-i/hbxIE9803Alj/6ytL7UHQxRvZkI9O4Sy+J3HGc4F4oo/2eQAjTSNJ0bfxyse3bH0nuVesCk+3IRLaMtG3H6w=="
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",

yoga-app/package.json

@@ -12,6 +12,7 @@
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@types/aos": "^3.0.7",
     "@types/bcrypt": "^5.0.2",
+    "@types/pg": "^8.11.10",
     "aos": "^2.3.4",
     "bcrypt": "^5.1.1",
     "bootstrap": "^4.6.2",

yoga-app/src/app/api/strapi/strapi-api.ts

@@ -5,7 +5,10 @@ class StrapiApi{
     }
 
     public getHomePage(){
-
+        console.info('Get Home Page');
     }
 
 }
+
+const api = new StrapiApi();
+export default api;

yoga-app/src/app/seed/placeholder-data.ts

@@ -48,85 +48,85 @@ const customers = [
   },
 ];
 
-const invoices: any[] = [
+const invoices  = [
-  // {
+  {
-  //   customer_id: customers[0].id,
+    customer_id: customers[0].id,
-  //   amount: 15795,
+    amount: 15795,
-  //   status: 'pending',
+    status: 'pending',
-  //   date: '2022-12-06',
+    date: '2022-12-06',
-  // },
+  },
-  // {
+  {
-  //   customer_id: customers[1].id,
+    customer_id: customers[1].id,
-  //   amount: 20348,
+    amount: 20348,
-  //   status: 'pending',
+    status: 'pending',
-  //   date: '2022-11-14',
+    date: '2022-11-14',
-  // },
+  },
-  // {
+  {
-  //   customer_id: customers[4].id,
+    customer_id: customers[4].id,
-  //   amount: 3040,
+    amount: 3040,
-  //   status: 'paid',
+    status: 'paid',
-  //   date: '2022-10-29',
+    date: '2022-10-29',
-  // },
+  },
-  // {
+  {
-  //   customer_id: customers[3].id,
+    customer_id: customers[3].id,
-  //   amount: 44800,
+    amount: 44800,
-  //   status: 'paid',
+    status: 'paid',
-  //   date: '2023-09-10',
+    date: '2023-09-10',
-  // },
+  },
-  // {
+  {
-  //   customer_id: customers[5].id,
+    customer_id: customers[5].id,
-  //   amount: 34577,
+    amount: 34577,
-  //   status: 'pending',
+    status: 'pending',
-  //   date: '2023-08-05',
+    date: '2023-08-05',
-  // },
+  },
-  // {
+  {
-  //   customer_id: customers[2].id,
+    customer_id: customers[2].id,
-  //   amount: 54246,
+    amount: 54246,
-  //   status: 'pending',
+    status: 'pending',
-  //   date: '2023-07-16',
+    date: '2023-07-16',
-  // },
+  },
-  // {
+  {
-  //   customer_id: customers[0].id,
+    customer_id: customers[0].id,
-  //   amount: 666,
+    amount: 666,
-  //   status: 'pending',
+    status: 'pending',
-  //   date: '2023-06-27',
+    date: '2023-06-27',
-  // },
+  },
-  // {
+  {
-  //   customer_id: customers[3].id,
+    customer_id: customers[3].id,
-  //   amount: 32545,
+    amount: 32545,
-  //   status: 'paid',
+    status: 'paid',
-  //   date: '2023-06-09',
+    date: '2023-06-09',
-  // },
+  },
-  // {
+  {
-  //   customer_id: customers[4].id,
+    customer_id: customers[4].id,
-  //   amount: 1250,
+    amount: 1250,
-  //   status: 'paid',
+    status: 'paid',
-  //   date: '2023-06-17',
+    date: '2023-06-17',
-  // },
+  },
-  // {
+  {
-  //   customer_id: customers[5].id,
+    customer_id: customers[5].id,
-  //   amount: 8546,
+    amount: 8546,
-  //   status: 'paid',
+    status: 'paid',
-  //   date: '2023-06-07',
+    date: '2023-06-07',
-  // },
+  },
-  // {
+  {
-  //   customer_id: customers[1].id,
+    customer_id: customers[1].id,
-  //   amount: 500,
+    amount: 500,
-  //   status: 'paid',
+    status: 'paid',
-  //   date: '2023-08-19',
+    date: '2023-08-19',
-  // },
+  },
-  // {
+  {
-  //   customer_id: customers[5].id,
+    customer_id: customers[5].id,
-  //   amount: 8945,
+    amount: 8945,
-  //   status: 'paid',
+    status: 'paid',
-  //   date: '2023-06-03',
+    date: '2023-06-03',
-  // },
+  },
-  // {
+  {
-  //   customer_id: customers[2].id,
+    customer_id: customers[2].id,
-  //   amount: 1000,
+    amount: 1000,
-  //   status: 'paid',
+    status: 'paid',
-  //   date: '2022-06-05',
+    date: '2022-06-05',
-  // },
+  },
 ];
 
 const revenue = [

yoga-app/src/app/seed/route.ts

@@ -1,6 +1,8 @@
 import bcrypt from 'bcrypt';
 import { invoices, customers, revenue, users } from './placeholder-data';
 
+import strapiApi  from "@/app/api/strapi/strapi-api";
+
 // const client = await connectionPool.connect();
 
 import connectionPool from "../../db/db";
@@ -108,16 +110,23 @@ export async function GET() {
   //     'Uncomment this file and remove this line. You can delete this file when you are finished.',
   // });
   try {
+    console.info("get request")
+    strapiApi.getHomePage();
+
+    console.info("begin")
     await connectionPool.query(`BEGIN`);
     await seedUsers();
     await seedCustomers();
-    // await seedInvoices();
+    await seedInvoices();
-    // await seedRevenue();
+    await seedRevenue();
     await connectionPool.query(`COMMIT`);
+    console.info('Database seeded successfully')
 
     return Response.json({ message: 'Database seeded successfully' });
   } catch (error) {
     await connectionPool.query(`ROLLBACK`);
+    console.info("error in seed")
+
     return Response.json({ error }, { status: 500 });
   }
 }

yoga-app/src/components/about.us.component.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 
 const AboutUsComponent = () =>{
     return (
@@ -6,13 +7,13 @@ const AboutUsComponent = () =>{
                 <div className="row">
                     <div className="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                         <div className="aboutus_image">
-                            <figure className="mb-0"><img src="/assets/images/aboutus_image.png" alt="" className="img-fluid"/></figure>
+                            <figure className="mb-0"><Image src="/assets/images/aboutus_image.png" alt="" className="img-fluid"/></figure>
                         </div>
                         <figure className="aboutus_top_shape left_shape mb-0">
-                            <img src="/assets/images/aboutus_top_shape.png" alt="" className="img-fluid"/>
+                            <Image src="/assets/images/aboutus_top_shape.png" alt="" className="img-fluid"/>
                         </figure>
                         <figure className="aboutus_bottom_shape left_shape mb-0">
-                            <img src="/assets/images/aboutus_bottom_shape.png" alt="" className="img-fluid"/>
+                            <Image src="/assets/images/aboutus_bottom_shape.png" alt="" className="img-fluid"/>
                         </figure>
                     </div>
                     <div className="col-lg-5 col-md-5 col-sm-12 col-xs-12" data-aos="fade-right">
@@ -22,7 +23,7 @@ const AboutUsComponent = () =>{
                             <p>Quis autem vel eum iure reprehenderit qui in eao voluptate velit esse quam nihil molestiae consequatur vel illum.</p>
                             <div className="aboutus_line_wrapper">
                                 <h6>Modi tempora incidunt ut labore dolore magnam aliquam auerat volutaem.</h6>
-                                <figure className="mb-0 purple_line"><img src="/assets/images/aboutus_line.png" alt="" className="img-fluid" /></figure>
+                                <figure className="mb-0 purple_line"><Image src="/assets/images/aboutus_line.png" alt="" className="img-fluid" /></figure>
                             </div>
                             <div className="btn_wrapper">
                                 <a href="/about" className="text-decoration-none get_started_btn">Get Started</a>

yoga-app/src/components/blog.posts.component.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 
 
 const BlogPostsComponent = () => {
@@ -16,7 +17,7 @@ const BlogPostsComponent = () => {
                 <div className="row" data-aos="fade-up">
                     <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                         <div className="blog_posts_image position-relative">
-                            <figure className="mb-0"><img src="/assets/images/blog_posts_1.png" alt=""
+                            <figure className="mb-0"><Image src="/assets/images/blog_posts_1.png" alt=""
                                                           className="img-fluid"/></figure>
                             <div className="blog_posts_image_content">
                                 <span>YOGA</span>
@@ -30,7 +31,7 @@ const BlogPostsComponent = () => {
                     </div>
                     <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                         <div className="blog_posts_image position-relative">
-                            <figure className="mb-0"><img src="/assets/images/blog_posts_2.png" alt=""
+                            <figure className="mb-0"><Image src="/assets/images/blog_posts_2.png" alt=""
                                                           className="img-fluid"/></figure>
                             <div className="blog_posts_image_content">
                                 <span>FITNESS</span>
@@ -47,10 +48,10 @@ const BlogPostsComponent = () => {
                     <a href="/single-post.html" className="text-decoration-none view_blog">View All Blogs</a>
                 </div>
                 <figure className="blog_posts_left_shape left_shape mb-0">
-                    <img src="/assets/images/blog_posts_left_shape.png" alt="" className="img-fluid"/>
+                    <Image src="/assets/images/blog_posts_left_shape.png" alt="" className="img-fluid"/>
                 </figure>
                 <figure className="blog_posts_right_shape right_shape mb-0">
-                    <img src="/assets/images/blog_posts_right_shape.png" alt="" className="img-fluid"/>
+                    <Image src="/assets/images/blog_posts_right_shape.png" alt="" className="img-fluid"/>
                 </figure>
             </div>
         </section>

yoga-app/src/components/contact.us.component.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 
 
 const ContactUsComponent = () => {
@@ -39,7 +40,7 @@ const ContactUsComponent = () => {
                                 <div className="row">
                                     <div className="col-lg-12">
                                         <div className=" form-group mb-0">
-                                            <textarea rows="3" name="comment" id="msg" className="form-control"
+                                            <textarea rows={3} name="comment" id="msg" className="form-control"
                                                       placeholder="Message"></textarea>
                                         </div>
                                     </div>
@@ -56,7 +57,7 @@ const ContactUsComponent = () => {
                             <a className="popup-vimeo"
                                href="https://previews.customer.envatousercontent.com/6720474d-ddc3-4b86-acf1-8d093cb37b6d/watermarked_preview/watermarked_preview.mp4">
                                 <figure className="video_img mb-0">
-                                    <img className="thumb img-fluid" style={{"cursor": "pointer"}}
+                                    <Image className="thumb img-fluid" style={{"cursor": "pointer"}}
                                          src="/assets/images/get_in_touch_video_icon.png" alt=""/>
                                 </figure>
                             </a>
@@ -64,7 +65,7 @@ const ContactUsComponent = () => {
                     </div>
                 </div>
                 <figure className="get_in_touch_shape left_shape mb-0">
-                    <img src="/assets/images/get_in_touch_shape.png" alt="" className="img-fluid"/>
+                    <Image src="/assets/images/get_in_touch_shape.png" alt="" className="img-fluid"/>
                 </figure>
             </div>
         </section>

yoga-app/src/components/footer.component.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+import Image from "next/image";
 
 
 const FooterComponent = () => {
@@ -7,10 +9,10 @@ const FooterComponent = () => {
                     <div className="row">
                         <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-lg-block d-none">
                             <div className="footer_logo">
-                                <a href="/index.html" className="text-decoration-none">
+                                <Link href="/index.html" className="text-decoration-none">
-                                    <figure className="mb-0"><img src="/assets/images/footer_logo.png" alt=""
+                                    <figure className="mb-0"><Image src="/assets/images/footer_logo.png" alt=""
                                                                   className="img-fluid"/></figure>
-                                </a>
+                                </Link>
                             </div>
                         </div>
                         <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12">
@@ -35,19 +37,19 @@ const FooterComponent = () => {
                                 <h4>Quick Links</h4>
                                 <ul className="list-unstyled">
                                     <li>
-                                        <a href="/index.html">Home</a>
+                                        <Link href="/index.html">Home</Link>
                                     </li>
                                     <li>
-                                        <a href="/about.html">About Us</a>
+                                        <Link href="/about.html">About Us</Link>
                                     </li>
                                     <li>
-                                        <a href="/services.html">Services</a>
+                                        <Link href="/services.html">Services</Link>
                                     </li>
                                     <li>
-                                        <a href="/team.html">Team</a>
+                                        <Link href="/team.html">Team</Link>
                                     </li>
                                     <li>
-                                        <a href="/contact.html">Contact Us</a>
+                                        <Link href="/contact.html">Contact Us</Link>
                                     </li>
                                 </ul>
                             </div>
@@ -81,7 +83,7 @@ const FooterComponent = () => {
                 </div>
             </div>
             <div className="footer_shape right_shape">
-                <figure className="mb-0"><img src="/assets/images/footer_shape.png" alt="" className="img-fluid"/>
+                <figure className="mb-0"><Image src="/assets/images/footer_shape.png" alt="" className="img-fluid"/>
                 </figure>
             </div>
         </section>

yoga-app/src/components/header.component.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 
 const HeaderComponent = () => {
     return (
@@ -6,7 +7,7 @@ const HeaderComponent = () => {
                 <div className="main_header">
                     <div className="container-fluid">
                         <nav className="navbar navbar-expand-lg navbar-light p-0">
-                            <a className="navbar-brand" href="/index"><figure className="mb-0"><img src="/assets/images/yogastic_logo.png" alt=""/></figure></a>
+                            <a className="navbar-brand" href="/index"><figure className="mb-0"><Image src="/assets/images/yogastic_logo.png" alt=""/></figure></a>
                             <button className="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                 <span className="navbar-toggler-icon"></span>
                                 <span className="navbar-toggler-icon"></span>
@@ -121,22 +122,22 @@ const HeaderComponent = () => {
                         <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                             <div className="banner-section-image">
                                 <figure className="mb-0">
-                                    <img src="/assets/images/banner_right_image.png" alt="" />
+                                    <Image src="/assets/images/banner_right_image.png" alt="" />
                                 </figure>
                             </div>
                         </div>
                     </div>
                     <figure className="banner_left_top_shape left_shape mb-0">
-                        <img src="/assets/images/banner_left_top_shape.png" alt="" className="img-fluid" />
+                        <Image src="/assets/images/banner_left_top_shape.png" alt="" className="img-fluid" />
                     </figure>
                     <figure className="banner_left_bottom_shape left_shape mb-0">
-                        <img src="/assets/images/banner_left_bottom_shape.png" alt="" className="img-fluid"/>
+                        <Image src="/assets/images/banner_left_bottom_shape.png" alt="" className="img-fluid"/>
                     </figure>
                     <figure className="banner_right_top_shape right_shape mb-0">
-                        <img src="/assets/images/banner_right_top_shape.png" alt="" className="img-fluid"/>
+                        <Image src="/assets/images/banner_right_top_shape.png" alt="" className="img-fluid"/>
                     </figure>
                     <figure className="banner_right_bottom_shape right_shape mb-0">
-                        <img src="/assets/images/banner_right_bottom_shape.png" alt="" className="img-fluid"/>
+                        <Image src="/assets/images/banner_right_bottom_shape.png" alt="" className="img-fluid"/>
                     </figure>
                 </div>
             </section>

yoga-app/src/components/our.services.component.tsx

@@ -1,3 +1,5 @@
+import Image from "next/image";
+
 const OurServiceComponent = () => {
     return (
         <section className="services_section">
@@ -16,7 +18,7 @@ const OurServiceComponent = () => {
                     <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                         <div className="services_box_content">
                             <div className="services_box_upper_portion">
-                                <figure className="mb-0"><img src="/assets/images/services_img_1.png" alt=""
+                                <figure className="mb-0"><Image src="/assets/images/services_img_1.png" alt=""
                                                               className="img-fluid"/></figure>
                             </div>
                             <div className="services_box_lower_portion">
@@ -32,7 +34,7 @@ const OurServiceComponent = () => {
                     <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                         <div className="services_box_content">
                             <div className="services_box_upper_portion">
-                                <figure className="mb-0"><img src="/assets/images/services_img_2.png" alt=""
+                                <figure className="mb-0"><Image src="/assets/images/services_img_2.png" alt=""
                                                               className="img-fluid"/></figure>
                             </div>
                             <div className="services_box_lower_portion">
@@ -48,7 +50,7 @@ const OurServiceComponent = () => {
                     <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                         <div className="services_box_content">
                             <div className="services_box_upper_portion">
-                                <figure className="mb-0"><img src="/assets/images/services_img_3.png" alt=""
+                                <figure className="mb-0"><Image src="/assets/images/services_img_3.png" alt=""
                                                               className="img-fluid"/></figure>
                             </div>
                             <div className="services_box_lower_portion">
@@ -64,7 +66,7 @@ const OurServiceComponent = () => {
                     <div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                         <div className="services_box_content">
                             <div className="services_box_upper_portion">
-                                <figure className="mb-0"><img src="/assets/images/services_img_4.png" alt=""
+                                <figure className="mb-0"><Image src="/assets/images/services_img_4.png" alt=""
                                                               className="img-fluid"/></figure>
                             </div>
                             <div className="services_box_lower_portion">
@@ -79,11 +81,10 @@ const OurServiceComponent = () => {
                     </div>
                 </div>
                 <figure className="services_left_shape left_shape mb-0">
-                    <img src="/assets/images/services_left_shape.png" alt="" className="img-fluid"/>
+                    <Image src="/assets/images/services_left_shape.png" alt="" className="img-fluid"/>
                 </figure>
             </div>
         </section>
-
     );
 }
 

yoga-app/src/components/our.specialities.component.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 
 
 const OurSpecialitiesComponent = () => {
@@ -34,13 +35,13 @@ const OurSpecialitiesComponent = () => {
                                 <p className="specialties_paragraph">Neque orro quisquam est raui dolorem</p>
                             </div>
                             <figure className="specialties_left_line mb-0">
-                                <img src="/assets/images/specialties_left_line.png" alt="" className="img-fluid" />
+                                <Image src="/assets/images/specialties_left_line.png" alt="" className="img-fluid" />
                             </figure>
                         </div>
                     </div>
                     <div className="col-lg-6 col-md-4 col-sm-6 col-xs-12 d-md-block d-none">
                         <figure className="specialties_image mb-0">
-                            <img src="/assets/images/specialties_image.png" alt="" className="img-fluid" />
+                            <Image src="/assets/images/specialties_image.png" alt="" className="img-fluid" />
                         </figure>
                     </div>
                     <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12" data-aos="fade-right">
@@ -62,13 +63,13 @@ const OurSpecialitiesComponent = () => {
                                 <p className="specialties_paragraph">Neque orro quisquam est raui dolorem</p>
                             </div>
                             <figure className="specialties_right_line mb-0">
-                                <img src="/assets/images/specialties_right_line.png" alt="" className="img-fluid" />
+                                <Image src="/assets/images/specialties_right_line.png" alt="" className="img-fluid" />
                             </figure>
                         </div>
                     </div>
                 </div>
                 <figure className="our_specialties_right_shape right_shape mb-0">
-                    <img src="/assets/images/our_specialties_right_shape.png" alt="" className="img-fluid" />
+                    <Image src="/assets/images/our_specialties_right_shape.png" alt="" className="img-fluid" />
                 </figure>
             </div>
         </section>

yoga-app/src/components/pricing.component.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 
 
 const PricingComponent = () => {
@@ -19,11 +20,11 @@ const PricingComponent = () => {
                         <div className="pricing_plans_box_content">
                             <div className="pricing_plans_box_upper_portion">
                                 <figure className="pricing_plans_image mb-0">
-                                    <img src="/assets/images/pricing_plan_1.png" alt="" className="img-fluid"/>
+                                    <Image src="/assets/images/pricing_plan_1.png" alt="" className="img-fluid"/>
                                 </figure>
                                 <div className="pricing_plans_box_image_content">
                                     <figure className="mb-0">
-                                        <img src="/assets/images/pricing_plan_icon_1.png" alt="" className="img-fluid"/>
+                                        <Image src="/assets/images/pricing_plan_icon_1.png" alt="" className="img-fluid"/>
                                     </figure>
                                 </div>
                             </div>
@@ -53,11 +54,11 @@ const PricingComponent = () => {
                         <div className="pricing_plans_box_content">
                             <div className="pricing_plans_box_upper_portion">
                                 <figure className="pricing_plans_image mb-0">
-                                    <img src="/assets/images/pricing_plan_2.png" alt="" className="img-fluid"/>
+                                    <Image src="/assets/images/pricing_plan_2.png" alt="" className="img-fluid"/>
                                 </figure>
                                 <div className="pricing_plans_box_image_content">
                                     <figure className="mb-0">
-                                        <img src="/assets/images/pricing_plan_icon_2.png" alt="" className="img-fluid"/>
+                                        <Image src="/assets/images/pricing_plan_icon_2.png" alt="" className="img-fluid"/>
                                     </figure>
                                 </div>
                             </div>
@@ -86,11 +87,11 @@ const PricingComponent = () => {
                         <div className="pricing_plans_box_content">
                             <div className="pricing_plans_box_upper_portion">
                                 <figure className="pricing_plans_image mb-0">
-                                    <img src="/assets/images/pricing_plan_3.png" alt="" className="img-fluid"/>
+                                    <Image src="/assets/images/pricing_plan_3.png" alt="" className="img-fluid"/>
                                 </figure>
                                 <div className="pricing_plans_box_image_content">
                                     <figure className="mb-0">
-                                        <img src="/assets/images/pricing_plan_icon_3.png" alt="" className="img-fluid"/>
+                                        <Image src="/assets/images/pricing_plan_icon_3.png" alt="" className="img-fluid"/>
                                     </figure>
                                 </div>
                             </div>

yoga-app/src/components/quotes.component.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 
 
 const QuotesComponent = () => {
@@ -18,7 +19,7 @@ const QuotesComponent = () => {
                                             exercita ionem ullam corporis suscitnis officiis debitis aut rerum
                                             necessitatibus saepe
                                             evenietut aer voluptates”</p>
-                                        <figure><img src="/assets/images/testimonial_image.png" alt=""
+                                        <figure><Image src="/assets/images/testimonial_image.png" alt=""
                                                      className="img-fluid"/></figure>
                                         <p className="testimonial_person_name">Himala Joerge</p>
                                         <span>Happy client</span>
@@ -34,7 +35,7 @@ const QuotesComponent = () => {
                                             exercita ionem ullam corporis suscitnis officiis debitis aut rerum
                                             necessitatibus saepe
                                             evenietut aer voluptates”</p>
-                                        <figure><img src="/assets/images/testimonial_image.png" alt=""
+                                        <figure><Image src="/assets/images/testimonial_image.png" alt=""
                                                      className="img-fluid"/></figure>
                                         <p className="testimonial_person_name">Himala Joerge</p>
                                         <span>Happy client</span>
@@ -55,10 +56,10 @@ const QuotesComponent = () => {
                     </div>
                 </div>
                 <figure className="testimonial_left_shape left_shape mb-0">
-                    <img src="/assets/images/testimonial_left_shape.png" alt="" className="img-fluid"/>
+                    <Image src="/assets/images/testimonial_left_shape.png" alt="" className="img-fluid"/>
                 </figure>
                 <figure className="testimonial_right_shape right_shape mb-0">
-                    <img src="/assets/images/testimonial_right_shape.png" alt="" className="img-fluid"/>
+                    <Image src="/assets/images/testimonial_right_shape.png" alt="" className="img-fluid"/>
                 </figure>
             </div>
         </div>

yoga-app/src/components/subscribe.component.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 
 const SubscribeComponent = () => {
     return (
@@ -22,7 +23,7 @@ const SubscribeComponent = () => {
                         </div>
                         <div className="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                             <figure className="subscribe_image mb-0">
-                                <img src="/assets/images/subscribe_image.png" alt=""/>
+                                <Image src="/assets/images/subscribe_image.png" alt=""/>
                             </figure>
                         </div>
                     </div>

yoga-app/src/db/db.ts

@@ -1,5 +1,17 @@
-const { Pool } = require('pg');
+import {Pool} from 'pg';
-require ('dotenv').config();
+import dotenv from 'dotenv';
+
+if (process.env.NODE_ENV !== 'production') {
+    console.info('loading dotenv db config')
+    dotenv.config();
+}else{
+    console.info('DB config environment variable');
+    console.info('process.env.POSTGRES_HOST',process.env.POSTGRES_HOST);
+    console.info('process.env.POSTGRES_PORT',process.env.POSTGRES_PORT);
+    console.info('process.env.POSTGRES_USER',process.env.POSTGRES_USER);
+    console.info('process.env.POSTGRES_DATABASE',process.env.POSTGRES_DATABASE);
+
+}
 
 const connectionPool = new Pool({
     connectionString: process.env.POSTGRES_URL,
@@ -7,7 +19,10 @@ const connectionPool = new Pool({
     host: process.env.POSTGRES_HOST,
     database: process.env.POSTGRES_DATABASE,
     password: process.env.POSTGRES_PASSWORD,
-    port: process.env.POSTGRES_PORT,
+    port: parseInt(process.env.POSTGRES_PORT as string, 10),
+    max: 10,
+    connectionTimeoutMillis: 2000,
+    idleTimeoutMillis: 10000,
 });
 
 export default connectionPool;

yoga-cms/package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "strapi-yoga",
+  "name": "yoga-cms",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "strapi-yoga",
+      "name": "yoga-cms",
       "version": "0.1.0",
       "dependencies": {
         "@strapi/plugin-cloud": "5.6.0",

yoga-cms/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "strapi-yoga",
+  "name": "yoga-cms",
   "version": "0.1.0",
   "private": true,
   "description": "A Strapi application",