Dockerized the app

Eric-Philippe · Eric-Philippe · commit 55b6d83d5d50 · 2024-10-10T18:25:07.000+02:00
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,8 @@
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# Angular
+dist/
+e2e/
+.angular/
diff --git a/.gitignore b/.gitignore
@@ -8,4 +8,6 @@ yarn-error.log
 # Angular
 dist/
 e2e/
-.angular/
+.angular/
+
+server/public/*
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,20 @@
+FROM node:20
+
+# Copy the frontend/ folder and the server/ folder
+COPY frontend/package*.json ./frontend/
+RUN cd frontend && npm install --silent
+
+COPY server/package*.json ./server/
+RUN cd server && npm install --silent
+
+# Copy the rest of the files
+COPY frontend ./frontend
+COPY server ./server
+
+# Build the frontend and the server
+RUN cd frontend && npm run build
+RUN cd server && npm run build
+
+EXPOSE 3000
+
+CMD ["node", "server/dist/server.js"]
diff --git a/TODO.md b/TODO.md
@@ -1,7 +1,4 @@
 # TODO
 
-- [ ] - Create nothere Page
-- [ ] - localstorage the login
-- [ ] - Dockerize the whole app
 - [ ] - Deploy the app to homeserver
 - [ ] - Clean up the code
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,18 +1,30 @@
-version: '3.8'
+version: "3.8"
 
 services:
-  db:
+  server-db-planaslot:
     image: postgres:15
-    container_name: postgres_db
+    container_name: server-db-planaslot
     environment:
-      POSTGRES_USER: ${POSTGRES_USER}
-      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_USER: ${DB_USER}
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
       POSTGRES_DB: planaslot
     ports:
-      - "5432:5432"
+      - "${DB_PORT}:5432"
     volumes:
       - pgdata:/var/lib/postgresql/data
+      - ./sql/init.sql:/docker-entrypoint-initdb.d/init.sql
     restart: always
 
+  server-planaslot:
+    build: .
+    container_name: server-planaslot
+    env_file:
+      - .env
+    ports:
+      - "8001:3000"
+    restart: unless-stopped
+    depends_on:
+      - server-db-planaslot
+
 volumes:
   pgdata:
diff --git a/frontend/angular.json b/frontend/angular.json
@@ -17,7 +17,10 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/frontend",
+            "outputPath": {
+              "base": "../server/public",
+              "browser": ""
+            },
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": ["zone.js"],
@@ -42,13 +45,13 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kB",
-                  "maximumError": "1MB"
+                  "maximumWarning": "2MB",
+                  "maximumError": "2MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kB",
-                  "maximumError": "4kB"
+                  "maximumWarning": "2MB",
+                  "maximumError": "2MB"
                 }
               ],
               "outputHashing": "all"
diff --git a/frontend/src/app/env.ts b/frontend/src/app/env.ts
@@ -1,2 +1,2 @@
-export const URL = "http://localhost:4200";
-export const API_URL = "http://localhost:3000/api/v1";
+export const URL = "https://planaslot.homeserver-ericp.fr";
+export const API_URL = "http://localhost:8001/api/v1";
diff --git a/frontend/src/app/imports.ts b/frontend/src/app/imports.ts
@@ -7,6 +7,8 @@ import { CalendarModule } from "primeng/calendar";
 import { CheckboxModule } from "primeng/checkbox";
 import { ConfirmDialogModule } from "primeng/confirmdialog";
 import { FloatLabelModule } from "primeng/floatlabel";
+import { InputGroupModule } from "primeng/inputgroup";
+import { InputGroupAddonModule } from "primeng/inputgroupaddon";
 import { InputTextModule } from "primeng/inputtext";
 import { MenubarModule } from "primeng/menubar";
 import { TableModule } from "primeng/table";
@@ -29,6 +31,8 @@ import { ToastModule } from "primeng/toast";
     ConfirmDialogModule,
     ToastModule,
     ButtonModule,
+    InputGroupModule,
+    InputGroupAddonModule,
   ],
   exports: [
     CommonModule,
@@ -44,6 +48,8 @@ import { ToastModule } from "primeng/toast";
     ConfirmDialogModule,
     ToastModule,
     ButtonModule,
+    InputGroupModule,
+    InputGroupAddonModule,
   ],
   providers: [Router],
 })
diff --git a/frontend/src/app/pages/admin/admin.component.ts b/frontend/src/app/pages/admin/admin.component.ts
@@ -18,7 +18,7 @@ export class AdminComponent implements OnInit {
 
   endDate: Date = new Date();
 
-  isLogged: boolean = true;
+  isLogged: boolean = false;
 
   constructor(
     private loginService: LoginService,
diff --git a/frontend/src/app/pages/create-event/create-event.component.ts b/frontend/src/app/pages/create-event/create-event.component.ts
@@ -113,8 +113,6 @@ export class CreateEventComponent {
           summary: "Erreur",
           detail: `Erreur lors de la création de l'événement`,
         });
-
-        console.error(err);
       });
   }
 }
diff --git a/frontend/src/app/pages/home/home.component.html b/frontend/src/app/pages/home/home.component.html
@@ -126,3 +126,5 @@ <h2>{{ event.name }}</h2>
     </div>
   </div>
 </div>
+
+<router-outlet></router-outlet>
diff --git a/frontend/src/app/pages/home/home.component.ts b/frontend/src/app/pages/home/home.component.ts
@@ -12,7 +12,7 @@ const NULL_ID_BOOKING = "#$#$#$#";
   standalone: true,
   templateUrl: "home.component.html",
   imports: [ImportsModule],
-  providers: [EventService, ConfirmationService, MessageService],
+  providers: [EventService, ConfirmationService, MessageService, Router],
 })
 export class HomeComponent implements OnInit {
   id: string | null = null;
diff --git a/frontend/src/app/pages/notfound/notfound.component.html b/frontend/src/app/pages/notfound/notfound.component.html
@@ -0,0 +1,40 @@
+<div class="surface-section px-4 py-8 md:px-6 lg:px-8">
+  <div class="text-700 text-center">
+    <div class="text-blue-600 font-bold mb-3">
+      <i class="pi pi-calendar"></i>&nbsp;Plan a Slot
+    </div>
+    <div class="text-900 font-bold text-5xl mb-3">There is nothing here !</div>
+    <div class="text-700 text-2xl mb-5">
+      Assurez-vous que vous avez le bon lien ou que vous avez entré la bonne
+      adresse.
+    </div>
+    <div class="flex flex-col items-center mx-auto mt-12">
+      <label for="search" class="text-700 text-xl mb-6">
+        Essayez d'entrer le code alpha-numérique de l'event
+      </label>
+
+      <p-inputGroup class="w-full max-w-xs md:max-w-sm lg:max-w-md">
+        <p-inputGroupAddon>{{ startUrl }}</p-inputGroupAddon>
+        <input
+          pInputText
+          type="text"
+          class="border border-gray-300 p-2 w-2/4"
+          placeholder="Code"
+          [(ngModel)]="endUrl"
+          (keyup.enter)="search()"
+        />
+      </p-inputGroup>
+    </div>
+
+    <div class="flex justify-center mt-8">
+      <button
+        pButton
+        pRipple
+        label="Accéder"
+        class="p-button-lg p-button-primary"
+        [disabled]="!isButtonReady()"
+        (click)="search()"
+      ></button>
+    </div>
+  </div>
+</div>
diff --git a/frontend/src/app/pages/notfound/notfound.component.ts b/frontend/src/app/pages/notfound/notfound.component.ts
@@ -1,11 +1,27 @@
 import { Component } from "@angular/core";
 import { ImportsModule } from "../../imports";
+import { URL } from "../../env";
+import { Router } from "@angular/router";
 
 @Component({
   standalone: true,
   templateUrl: "notfound.component.html",
   imports: [ImportsModule],
+  providers: [Router],
 })
 export class NotFoundComponent {
   title = "NotFound";
+
+  endUrl: string = "";
+  startUrl = "www.planaslot/home/";
+
+  constructor(private router: Router) {}
+
+  isButtonReady() {
+    return this.endUrl.length > 0;
+  }
+
+  search() {
+    this.router.navigate(["/home/", this.endUrl]);
+  }
 }
diff --git a/frontend/src/app/services/Event.service.ts b/frontend/src/app/services/Event.service.ts
@@ -28,7 +28,7 @@ export class EventService {
 
       return await response.json();
     } catch (err) {
-      throw new Error("Error while fetching event");
+      return Promise.reject("Error while fetching event");
     }
   }
 
diff --git a/server/src/conf.ts b/server/src/conf.ts
@@ -3,7 +3,6 @@ import dotenv from "dotenv";
 dotenv.config();
 
 const DB_HOST = process.env.DB_HOST || "localhost";
-const DB_PORT = parseInt(process.env.DB_PORT as string) || 5432;
 const DB_USER = process.env.DB_USER;
 const DB_PASSWORD = process.env.DB_PASSWORD;
 const DB_NAME = process.env.DB_NAME;
@@ -12,12 +11,15 @@ let APP_PORT = parseInt(process.env.PORT as string) || 3000;
 
 const HASHED_PASSWORD = process.env.HASHED_PASSWORD || "admin";
 
-export {
-  DB_HOST,
-  DB_PORT,
-  DB_USER,
-  DB_PASSWORD,
-  DB_NAME,
-  APP_PORT,
-  HASHED_PASSWORD,
-};
+if (
+  DB_USER === undefined ||
+  DB_PASSWORD === undefined ||
+  DB_NAME === undefined ||
+  isNaN(APP_PORT) ||
+  HASHED_PASSWORD === undefined
+) {
+  console.error("Missing environment variables");
+  process.exit(1);
+}
+
+export { DB_HOST, DB_USER, DB_PASSWORD, DB_NAME, APP_PORT, HASHED_PASSWORD };
diff --git a/server/src/database/db.connection.ts b/server/src/database/db.connection.ts
@@ -1,13 +1,13 @@
 import { Pool } from "pg";
-import { DB_HOST, DB_NAME, DB_PASSWORD, DB_PORT, DB_USER } from "../conf";
+import { DB_HOST, DB_NAME, DB_PASSWORD, DB_USER } from "../conf";
 
 export default class Database {
   private static database = new Pool({
     user: DB_USER,
     host: DB_HOST,
     database: DB_NAME,
     password: DB_PASSWORD,
-    port: DB_PORT,
+    port: 5432,
   });
 
   public static query = async (query: string, values?: any[]) => {
diff --git a/server/src/server.ts b/server/src/server.ts
@@ -3,6 +3,7 @@ import express, { Express, Request, Response } from "express";
 import bcrypt from "bcrypt";
 import cors from "cors";
 import bodyParser from "body-parser";
+import path from "path";
 import { routes } from "./routes/route";
 
 const app: Express = express();
@@ -12,10 +13,16 @@ app.use(cors());
 app.use(bodyParser.json());
 app.use("/api", routes);
 
+app.use(express.static(path.join(__dirname, "..", "public")));
+
 app.listen(port, () => {
   console.log(`[server]: Server is running at http://localhost:${port}`);
 });
 
+app.use((req: Request, res: Response) => {
+  res.sendFile(path.join(__dirname, "..", "public", "index.html"));
+});
+
 const generatePassword = function (pass: string) {
   return console.log(bcrypt.hashSync(pass, 10));
 };
diff --git a/server/tsconfig.json b/server/tsconfig.json
@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
@@ -25,7 +25,7 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "commonjs" /* 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. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
@@ -57,7 +57,7 @@
     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
     // "removeComments": true,                           /* Disable emitting comments. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
@@ -77,12 +77,12 @@
     // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
     // "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 
     /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
@@ -105,6 +105,6 @@
 
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
   }
 }
diff --git a/sql/init.sql b/sql/init.sql

Original file line number	Diff line number	Diff line change
`@@ -113,8 +113,6 @@ export class CreateEventComponent {`
`113`	`113`	`summary: "Erreur",`
`114`	`114`	detail: `Erreur lors de la création de l'événement`,
`115`	`115`	`});`
`116`		`-`
`117`		`- console.error(err);`
`118`	`116`	`});`
`119`	`117`	`}`
`120`	`118`	`}`