Test dockerhub

.github/workflows/deploy-api.yml → .github/workflows/deploy-api.yml.bak

@@ -3,38 +3,40 @@ name: CI - Build and Deploy datatable-api
 on:
   push:
     branches:
-      - main
+      - test_dockerhub
 
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0 # Required for nx affected
+          filter: tree:0 # Optional, but recommended: reduce the size of the checkout with tree filtering, see https://github.blog/open-source/git/get-up-to-speed-with-partial-clone-and-shallow-clone/
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '22'
           cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Set Nx SHAs
-        uses: nrwl/nx-set-shas@v3
+      - name: Derive appropriate SHAs for base and head for `nx affected` commands
+        id: setSHAs
+        uses: nrwl/nx-set-shas@v4
 
       - name: Check for affected datatable-api
         id: check_affected
         run: |
-          AFFECTED_APPS=$(npx nx affected:apps --plain)
+          AFFECTED_APPS=$(npx nx show projects --affected)
           echo "Affected apps: $AFFECTED_APPS"
           if [[ "$AFFECTED_APPS" == *"datatable-api"* ]]; then
             echo "datatable-api is affected."
@@ -46,7 +48,8 @@ jobs:
 
       - name: Build datatable-api
         if: steps.check_affected.outputs.datatable_api_affected == 'true'
-        run: npx nx build datatable-api --prod
+        run: |
+          npm run build:datatable-api
 
       - name: Login to Docker Hub
         if: steps.check_affected.outputs.datatable_api_affected == 'true'

.github/workflows/deploy-frontend.yml → .github/workflows/deploy-frontend.yml.bak

@@ -3,7 +3,7 @@ name: CI - Build and Deploy datatable
 on:
   push:
     branches:
-      - main
+      - test_dockerhub
 
 jobs:
   build-and-deploy:
@@ -17,12 +17,12 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 8
+          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '22'
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -34,8 +34,9 @@ jobs:
       - name: Check for affected datatable
         id: check_affected
         run: |
-          AFFECTED_APPS=$(npx nx affected:apps --plain)
+          AFFECTED_APPS=$(npx nx show projects --affected)
           echo "Affected apps: $AFFECTED_APPS"
+
           if [[ "$AFFECTED_APPS" == *"datatable"* ]]; then
             echo "datatable is affected."
             echo "datatable_affected=true" >> $GITHUB_OUTPUT

.github/workflows/deploy.yml

@@ -0,0 +1,94 @@
+name: CI - Build and Deploy datatable projects
+
+on:
+  push:
+    branches:
+      - test_dockerhub
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Required for nx affected
+          filter: tree:0 # Optional, but recommended: reduce the size of the checkout with tree filtering, see https://github.blog/open-source/git/get-up-to-speed-with-partial-clone-and-shallow-clone/
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 10
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '22'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Derive appropriate SHAs for base and head for `nx affected` commands
+        id: setSHAs
+        uses: nrwl/nx-set-shas@v4
+
+      - name: Check for affected project
+        id: check_affected
+        run: |
+          AFFECTED_APPS=$(npx nx show projects --affected)
+          echo "Affected apps: $AFFECTED_APPS"
+          if [[ "$AFFECTED_APPS" == *"datatable-api"* ]]; then
+            echo "datatable-api is affected."
+            echo "datatable_api_affected=true" >> $GITHUB_OUTPUT
+          else
+            echo "datatable-api is not affected."
+            echo "datatable_api_affected=false" >> $GITHUB_OUTPUT
+          fi
+
+          if [[ "$AFFECTED_APPS" == *"datatable"* ]]; then
+            echo "datatable is affected."
+            echo "datatable_affected=true" >> $GITHUB_OUTPUT
+          else
+            echo "datatable is not affected."
+            echo "datatable_affected=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Build datatable-api
+        if: steps.check_affected.outputs.datatable_api_affected == 'true'
+        run: |
+          npm run build:datatable-api
+
+      - name: Build datatable
+        if: steps.check_affected.outputs.datatable_affected == 'true'
+        run: |
+          npm run build:datatable
+
+      - name: Login to Docker Hub
+        if: steps.check_affected.outputs.datatable_api_affected == 'true' || steps.check_affected.outputs.datatable_affected == 'true'
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        if: steps.check_affected.outputs.datatable_api_affected == 'true' || steps.check_affected.outputs.datatable_affected == 'true'
+        uses: docker/setup-buildx-action@v2
+
+      - name: Build and push datatable-api
+        if: steps.check_affected.outputs.datatable_api_affected == 'true'
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./datatable-api/Dockerfile.ci
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/datatable-api:latest
+
+      - name: Build and push datatable
+        if: steps.check_affected.outputs.datatable_affected == 'true'
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./datatable/Dockerfile.ci
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/datatable:latest

datatable-api/Dockerfile.ci

@@ -1,16 +1,21 @@
 # Stage 1: Runner
 FROM node:18-alpine
 WORKDIR /app
+RUN apk add --no-cache libc6-compat openssl
 
 # Copy the pre-built application
 COPY dist/datatable-api .
 
 # Copy production dependencies and install them
 COPY package.json pnpm-lock.yaml* ./
-RUN npm install -g pnpm && pnpm install --frozen-lockfile --prod
-
-# Copy Prisma schema and generate client
+# Copy Prisma schema and generated client
 COPY datatable-api/prisma ./datatable-api/prisma
+
+RUN npm install -g pnpm
+RUN pnpm install --frozen-lockfile --prod
+# RUN pnpm install --frozen-lockfile
+RUN pnpm install prisma
+
 RUN npm run prisma:generate
 
 # Copy and setup entrypoint

datatable-api/entrypoint.sh

@@ -5,5 +5,8 @@ set -e
 echo "Running database migrations..."
 npx prisma migrate deploy --schema datatable-api/prisma/schema.prisma
 
+# echo "Running database reset & seeder..."
+# npm run prisma:reset -- -f
+
 echo "Starting the application..."
 exec "$@"

datatable-api/prisma/seed.ts

@@ -17,8 +17,8 @@ async function main() {
     await prisma.employee.create({
       data: {
         name: employee.name,
-        departmentId: department.id,
-        positionId: position.id,
+        departmentId: department!.id,
+        positionId: position!.id,
         dateOfHire: employee.dateOfHire
       }
     });

datatable-api/src/app/services/prisma.service.ts

@@ -2,11 +2,8 @@ import { Injectable, OnModuleInit } from '@nestjs/common';
 import { PrismaClient } from '@prisma/client';
 
 @Injectable()
-export class PrismaService extends PrismaClient
-  implements OnModuleInit {
-
+export class PrismaService extends PrismaClient implements OnModuleInit {
   async onModuleInit() {
     await this.$connect();
   }
-
 }

datatable/src/app/features/department/department-list.component.html

@@ -1,25 +1,18 @@
-
-<clr-datagrid
-  (clrDgRefresh)="refresh.emit($event)"
-  [clrDgLoading]="loading"
-  >
+<clr-datagrid (clrDgRefresh)="refresh.emit($event)" [clrDgLoading]="loading">
   <clr-dg-column [clrDgField]="'name'">Department Name</clr-dg-column>
 
   @for (department of departments; track department) {
-    <clr-dg-row [clrDgItem]="department">
-      <clr-dg-action-overflow>
-        <button class="action-item" (click)="onEdit(department)">Edit</button>
-        <button class="action-item" (click)="onDelete(department)">Delete</button>
-      </clr-dg-action-overflow>
-      <clr-dg-cell>{{ department.name }}</clr-dg-cell>
-    </clr-dg-row>
+  <clr-dg-row [clrDgItem]="department">
+    <clr-dg-action-overflow>
+      <button class="action-item" (click)="onEdit(department)">Edit</button>
+      <button class="action-item" (click)="onDelete(department)">Delete</button>
+    </clr-dg-action-overflow>
+    <clr-dg-cell>{{ department?.['name'] }}</clr-dg-cell>
+  </clr-dg-row>
   }
 
   <clr-dg-footer>
-    <clr-dg-pagination
-      #pagination
-      [clrDgTotalItems]="total"
-      >
+    <clr-dg-pagination #pagination [clrDgTotalItems]="total">
       <clr-dg-page-size [clrPageSizeOptions]="[10, 20, 50, 100]">
         Departments per page
       </clr-dg-page-size>

datatable/src/app/features/employee/employee-list.component.html

@@ -1,31 +1,24 @@
-
-<clr-datagrid
-  (clrDgRefresh)="refresh.emit($event)"
-  [clrDgLoading]="loading"
-  >
+<clr-datagrid (clrDgRefresh)="refresh.emit($event)" [clrDgLoading]="loading">
   <clr-dg-column [clrDgField]="'name'">Employee Name</clr-dg-column>
   <clr-dg-column [clrDgField]="'department'">Employee Department</clr-dg-column>
   <clr-dg-column [clrDgField]="'position'">Employee Position</clr-dg-column>
   <clr-dg-column [clrDgSortBy]="'dateOfHire'">Date of Hire</clr-dg-column>
 
   @for (employee of employees; track employee) {
-    <clr-dg-row [clrDgItem]="employee">
-      <clr-dg-action-overflow>
-        <button class="action-item" (click)="onEdit(employee)">Edit</button>
-        <button class="action-item" (click)="onDelete(employee)">Delete</button>
-      </clr-dg-action-overflow>
-      <clr-dg-cell>{{ employee.name }}</clr-dg-cell>
-      <clr-dg-cell>{{ employee.department }}</clr-dg-cell>
-      <clr-dg-cell>{{ employee.position }}</clr-dg-cell>
-      <clr-dg-cell>{{ employee.dateOfHire | date }}</clr-dg-cell>
-    </clr-dg-row>
+  <clr-dg-row [clrDgItem]="employee">
+    <clr-dg-action-overflow>
+      <button class="action-item" (click)="onEdit(employee)">Edit</button>
+      <button class="action-item" (click)="onDelete(employee)">Delete</button>
+    </clr-dg-action-overflow>
+    <clr-dg-cell>{{ employee?.['name'] }}</clr-dg-cell>
+    <clr-dg-cell>{{ employee?.['department'] }}</clr-dg-cell>
+    <clr-dg-cell>{{ employee?.['position'] }}</clr-dg-cell>
+    <clr-dg-cell>{{ employee?.['dateOfHire'] | date }}</clr-dg-cell>
+  </clr-dg-row>
   }
 
   <clr-dg-footer>
-    <clr-dg-pagination
-      #pagination
-      [clrDgTotalItems]="total"
-      >
+    <clr-dg-pagination #pagination [clrDgTotalItems]="total">
       <clr-dg-page-size [clrPageSizeOptions]="[10, 20, 50, 100]">
         Employees per page
       </clr-dg-page-size>

datatable/src/app/features/position/position-list.component.html

@@ -1,25 +1,18 @@
-
-<clr-datagrid
-  (clrDgRefresh)="refresh.emit($event)"
-  [clrDgLoading]="loading"
-  >
+<clr-datagrid (clrDgRefresh)="refresh.emit($event)" [clrDgLoading]="loading">
   <clr-dg-column [clrDgField]="'name'">Position Name</clr-dg-column>
 
   @for (position of positions; track position) {
-    <clr-dg-row [clrDgItem]="position">
-      <clr-dg-action-overflow>
-        <button class="action-item" (click)="onEdit(position)">Edit</button>
-        <button class="action-item" (click)="onDelete(position)">Delete</button>
-      </clr-dg-action-overflow>
-      <clr-dg-cell>{{ position.name }}</clr-dg-cell>
-    </clr-dg-row>
+  <clr-dg-row [clrDgItem]="position">
+    <clr-dg-action-overflow>
+      <button class="action-item" (click)="onEdit(position)">Edit</button>
+      <button class="action-item" (click)="onDelete(position)">Delete</button>
+    </clr-dg-action-overflow>
+    <clr-dg-cell>{{ position?.['name'] }}</clr-dg-cell>
+  </clr-dg-row>
   }
 
   <clr-dg-footer>
-    <clr-dg-pagination
-      #pagination
-      [clrDgTotalItems]="total"
-      >
+    <clr-dg-pagination #pagination [clrDgTotalItems]="total">
       <clr-dg-page-size [clrPageSizeOptions]="[10, 20, 50, 100]">
         Positions per page
       </clr-dg-page-size>

package.json

@@ -18,7 +18,7 @@
     "serve:datatable:local": "npm run env:init && npx nx serve datatable"
   },
   "prisma": {
-    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
+    "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} datatable-api/prisma/seed.ts"
   },
   "private": true,
   "devDependencies": {
@@ -100,5 +100,13 @@
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "0.15.1"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@nestjs/core",
+      "@prisma/client",
+      "@prisma/engines",
+      "prisma"
+    ]
   }
 }