Merge pull request #59 from somnisomni/feat/public-migrate-nuxtjs

[Public] Apply SSR for public pages
somnisomni · Jun 21, 2024 · 80f7815 · 80f7815
2 parents 241ee39 + 8303594
commit 80f7815
Show file tree

Hide file tree

Showing 58 changed files with 7,980 additions and 1,724 deletions.
diff --git a/MyBoothManager.code-workspace b/MyBoothManager.code-workspace
@@ -48,6 +48,6 @@
     "eslint.lintTask.enable": true,
     "eslint.run": "onType",
     "eslint.packageManager": "pnpm",
-    "typescript.tsdk": "node_modules/typescript/lib"
+    "typescript.tsdk": "./node_modules/typescript/lib"
 	}
 }
diff --git a/compose.yaml b/compose.yaml
@@ -12,21 +12,25 @@ services:
       - "31112:31112"
     depends_on:
       - backend
+    restart: unless-stopped
     network_mode: host    # Should ditch host network mode and use bridge mode instead
                           # But I have to find a way to get rid of errors of CNI network automatically created by podman-compose
 
   public:
     build:
       context: .
       dockerfile: ./projects/Public/Containerfile
-      args:
-        GIT_HASH: ${GIT_COMMIT_HASH}
-        API_SERVER_URL: "http://localhost:31111"
-        BASE_PATH: "/"
+    environment:
+      NITRO_PORT: 31113
+      GIT_HASH: ${GIT_COMMIT_HASH}
+      NUXT_PUBLIC_API_SERVER_URL: "http://localhost:31111"
+      NUXT_PUBLIC_API_SERVER_UPLOADS_PATH: "uploads"
+      NUXT_APP_BASE_PATH: "/"
     ports:
       - "31113:31113"
     depends_on:
       - backend
+    restart: unless-stopped
     network_mode: host
 
   backend:
@@ -52,6 +56,7 @@ services:
       COOKIE_SECRET: in_myboothmanager_mos
       FRONTEND_ADMIN_URL: "http://localhost:31112"
       FRONTEND_PUBLIC_URL: "http://localhost:31113"
+    restart: unless-stopped
     network_mode: host
 
 volumes:

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "myboothmanager",
   "author": "somni <[email protected]>",
   "private": true,
-  "packageManager": "pnpm@9.3.0",
+  "packageManager": "pnpm@9.4.0",
   "scripts": {
     "preinstall": "pnpm dlx only-allow pnpm",
     "all": "pnpm -r run",
@@ -23,10 +23,10 @@
   },
   "devDependencies": {
     "@myboothmanager/dev-shared": "workspace:^",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.7",
     "concurrently": "^8.2.2",
     "jest": "^29.7.0",
-    "ts-jest": "^29.1.4",
-    "typescript": "^5.4.5"
+    "ts-jest": "^29.1.5",
+    "typescript": "^5.5.2"
   }
 }
diff --git a/packages/Common/package.json b/packages/Common/package.json
@@ -22,13 +22,13 @@
     "@myboothmanager/dev-shared": "workspace:^",
     "@tsconfig/node20": "^20.1.4",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.14.2",
-    "eslint": "^9.4.0",
+    "@types/node": "^20.14.7",
+    "eslint": "^9.5.0",
     "execa": "^9.2.0",
     "jest": "^29.7.0",
     "rimraf": "^5.0.7",
-    "ts-jest": "^29.1.4",
-    "typescript": "^5.4.5",
+    "ts-jest": "^29.1.5",
+    "typescript": "^5.5.2",
     "tsc-alias": "^1.8.10"
   },
   "dependencies": {

diff --git a/packages/Common/src/utils/api-caller.ts b/packages/Common/src/utils/api-caller.ts
@@ -14,40 +14,61 @@ type HTTPMethodString = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
 
 export const MAX_UPLOAD_FILE_BYTES = (1024 * 1024) * 15;  // 15MB
 
+export interface APICallerOptions {
+  host: string;
+  group: string;
+  healthCheckPath: string;
+  getAuthorizationToken: () => string | null | undefined;
+}
+
 export default class APICaller {
-  private static readonly FETCH_COMMON_OPTIONS: Partial<RequestInit> = {
+  private static readonly FETCH_COMMON_OPTIONS: Readonly<Partial<RequestInit>> = {
     headers: { "Content-Type": "application/json" },
     cache: "no-cache",
     redirect: "error",
-  };
+  } as const;
 
-  constructor(
-    private readonly apiHost: string,
-    private readonly apiGroup: string = "",
-    private readonly getAuthorizationToken: (() => string) | null | undefined = null,
-    private readonly healthCheckPath: string = "healthcheck",
-  ) { }
+  constructor(private readonly options: Partial<APICallerOptions>) { }
+
+  private get normalizedOptions(): APICallerOptions {
+    return {
+      host: "http://localhost:20000",
+      group: "",
+      healthCheckPath: "healthcheck",
+      getAuthorizationToken: () => undefined,
+      ...this.options,
+    };
+  }
+
+  /* Public APIs */
+  private readonly createPublicAPI = () => new APICaller({ host: this.normalizedOptions.host, group: "public" });
 
   /* Basic fetch function */
   private async callAPIInternal<T>(method: HTTPMethodString, path: string, payload?: BodyInit, additionalInitOptions?: RequestInit, containAuthCookie: boolean = false, containAuthCredential: boolean = true): Promise<T | IErrorResponse> {
-    const url: string = `${this.apiHost}${this.apiGroup.length > 0 ? `/${this.apiGroup}` : ""}/${path}`;
+    const url: string = `${this.normalizedOptions.host}${this.normalizedOptions.group.length > 0 ? `/${this.normalizedOptions.group}` : ""}/${path}`;
 
     const response = await fetch(url, {
       ...additionalInitOptions,
       method,
       body: payload,
       headers: {
         ...additionalInitOptions?.headers ?? { },
-        ...containAuthCredential && this.getAuthorizationToken ? { Authorization: `Bearer ${this.getAuthorizationToken()}` } : { },
+        ...containAuthCredential && this.normalizedOptions.getAuthorizationToken ? { Authorization: `Bearer ${this.normalizedOptions.getAuthorizationToken()}` } : { },
       },
       ...containAuthCookie ? { credentials: "include" } : { credentials: "omit" },
     });
 
     return await response.json() as T;
   }
 
-  public async callAPI<T>(method: HTTPMethodString, path: string, payload?: Record<never, never>, containAuthCookie: boolean = false, containAuthCredential: boolean = true): Promise<T | IErrorResponse> {
-    return this.callAPIInternal<T>(method, path, payload ? JSON.stringify(payload) : undefined, APICaller.FETCH_COMMON_OPTIONS, containAuthCookie, containAuthCredential);
+  public callAPI<T>(method: HTTPMethodString, path: string, payload?: Record<never, never>, containAuthCookie: boolean = false, containAuthCredential: boolean = true): Promise<T | IErrorResponse> {
+    return this.callAPIInternal<T>(
+      method,
+      path,
+      payload ? JSON.stringify(payload) : undefined, APICaller.FETCH_COMMON_OPTIONS,
+      containAuthCookie,
+      containAuthCredential,
+    );
   }
 
   /* Fetch function shortcuts */
@@ -61,13 +82,11 @@ export default class APICaller {
     return this.callAPIInternal<T>("POST", path, payload, undefined, false, true);
   }
 
-  /* Public APIs */
-  private readonly createPublicAPI = () => new APICaller(this.apiHost, "public");
-
+  /* API endpoints below is predefined public endpoints */
   // Server
   public async checkAPIServerAlive(): Promise<boolean> {
     try {
-      const response = await fetch(`${this.apiHost}/${this.healthCheckPath}`, APICaller.FETCH_COMMON_OPTIONS);
+      const response = await fetch(`${this.normalizedOptions.host}/${this.normalizedOptions.healthCheckPath}`, APICaller.FETCH_COMMON_OPTIONS);
 
       if(response && response.status === HTTP_HEALTH_CHECK_STATUS_CODE) return true;
       else return false;

diff --git a/packages/CommonUI/package.json b/packages/CommonUI/package.json
@@ -2,7 +2,7 @@
   "name": "@myboothmanager/common-ui",
   "version": "0.5.0",
   "author": "somni <[email protected]>",
-  "packageManager": "pnpm@9.3.0",
+  "packageManager": "pnpm@9.4.0",
   "private": true,
   "main": "./dist/common-ui.js",
   "scripts": {
@@ -24,22 +24,22 @@
     "@myboothmanager/common": "workspace:^",
     "@tsconfig/node20": "^20.1.4",
     "@types/clone-deep": "^4.0.4",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.7",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/tsconfig": "^0.5.1",
-    "eslint": "^9.4.0",
+    "eslint": "^9.5.0",
     "npm-run-all2": "^6.2.0",
     "rimraf": "^5.0.7",
-    "sass": "^1.77.4",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.13",
+    "sass": "^1.77.6",
+    "typescript": "^5.5.2",
+    "vite": "^5.3.1",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-vuetify": "^2.0.3",
     "vite-tsconfig-paths": "^4.3.2",
-    "vue": "^3.4.27",
+    "vue": "^3.4.29",
     "vue-facing-decorator": "^3.0.4",
     "vue-tsc": "^2.0.21",
-    "vuetify": "^3.6.8"
+    "vuetify": "^3.6.10"
   },
   "peerDependencies": {
     "@mdi/font": ">=7",

diff --git a/packages/DevShared/eslint/index.mjs b/packages/DevShared/eslint/index.mjs
@@ -11,6 +11,7 @@ const ignores = Object.freeze({
     "**/dist/**",
     "**/build/**",
     "**/coverage/**",
+    "**/.nuxt/**",
     "**/(.)?output/**",
     "**/vite.config.(m|c)?(t|j)s.timestamp*",
   ],

diff --git a/packages/DevShared/package.json b/packages/DevShared/package.json
@@ -2,25 +2,25 @@
   "name": "@myboothmanager/dev-shared",
   "version": "0.5.0",
   "author": "somni <[email protected]>",
-  "packageManager": "pnpm@9.3.0",
+  "packageManager": "pnpm@9.4.0",
   "private": true,
   "type": "module",
   "main": "./index.mjs",
   "types": "./index.d.ts",
   "devDependencies": {
-    "@eslint/compat": "^1.0.3",
+    "@eslint/compat": "^1.1.0",
     "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.4.0",
-    "@stylistic/eslint-plugin": "^2.1.0",
+    "@eslint/js": "^9.5.0",
+    "@stylistic/eslint-plugin": "^2.2.2",
     "@types/eslint__js": "^8.42.3",
-    "@typescript-eslint/parser": "7.12.0",
+    "@typescript-eslint/parser": "7.13.1",
     "@vue/eslint-config-typescript": "^13.0.0",
-    "eslint": "^9.4.0",
+    "eslint": "^9.5.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-vue": "^9.26.0",
-    "globals": "^15.4.0",
-    "typescript-eslint": "^7.12.0",
+    "globals": "^15.6.0",
+    "typescript-eslint": "^7.13.1",
     "vue-eslint-parser": "^9.4.3"
   },
   "peerDependencies": {

diff --git a/packages/I18n/package.json b/packages/I18n/package.json
@@ -2,6 +2,6 @@
   "name": "@myboothmanager/i18n",
   "version": "0.5.0",
   "author": "somni <[email protected]>",
-  "packageManager": "pnpm@9.3.0",
+  "packageManager": "pnpm@9.4.0",
   "private": true
 }