feat(openchallenges): migrate the OC Angular app to Vite (ARCH-337) (#…

…2922)
Sage-Bionetworks · Nov 25, 2024 · 5b9a29f · 5b9a29f
1 parent 94e656e
commit 5b9a29f
Show file tree

Hide file tree

Showing 105 changed files with 594 additions and 526 deletions.
diff --git a/apps/model-ad/app/project.json b/apps/model-ad/app/project.json
@@ -34,6 +34,9 @@
             "output": "assets"
           }
         ],
+        "stylePreprocessorOptions": {
+          "includePaths": ["libs"]
+        },
         "styles": [
           "apps/model-ad/app/src/styles.scss",
           "node_modules/primeicons/primeicons.css",
@@ -116,7 +119,10 @@
         "outputPath": "dist/apps/model-ad/app/browser/server",
         "main": "apps/model-ad/app/server.ts",
         "tsConfig": "apps/model-ad/app/tsconfig.server.json",
-        "inlineStyleLanguage": "scss"
+        "inlineStyleLanguage": "scss",
+        "stylePreprocessorOptions": {
+          "includePaths": ["libs"]
+        }
       },
       "configurations": {
         "production": {

diff --git a/apps/openchallenges/app/.eslintrc.json b/apps/openchallenges/app/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:playwright/recommended", "../../../.eslintrc.json"],
+  "extends": ["../../../.eslintrc.json", "plugin:playwright/recommended"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
@@ -10,15 +10,15 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "openchallenges",
+            "prefix": "app",
             "style": "camelCase"
           }
         ],
         "@angular-eslint/component-selector": [
           "error",
           {
             "type": "element",
-            "prefix": "openchallenges",
+            "prefix": "app",
             "style": "kebab-case"
           }
         ]

diff --git a/apps/openchallenges/app/Dockerfile b/apps/openchallenges/app/Dockerfile
@@ -1,6 +1,6 @@
 FROM node:20.7.0-alpine
 
-ENV APP_DIR=/app
+ENV APP_DIR=/opt/app
 
 RUN apk add --no-cache curl envsubst jq su-exec
 
@@ -10,9 +10,8 @@ COPY apps/openchallenges/app/docker-entrypoint.d /docker-entrypoint.d
 RUN chmod +x docker-entrypoint.sh /docker-entrypoint.d/*
 
 WORKDIR ${APP_DIR}
-COPY dist/apps/openchallenges/app/browser/server ${APP_DIR}
-# The path of the destination folder must be the same as the path specified in server.ts.
-COPY dist/apps/openchallenges/app/browser/browser ${APP_DIR}/dist/apps/openchallenges/app/browser/browser
+COPY dist/apps/openchallenges/app/server ./server
+COPY dist/apps/openchallenges/app/browser ./browser
 
 HEALTHCHECK --interval=2s --timeout=3s --retries=20 --start-period=5s \
   CMD curl --fail --silent "localhost:4200/health" | jq '.status' | grep UP || exit 1
@@ -21,4 +20,4 @@ EXPOSE 4200
 
 ENTRYPOINT ["/docker-entrypoint.sh"]
 
-CMD ["node", "main.js"]
+CMD ["node", "server/server.mjs"]
diff --git a/apps/openchallenges/app/README.md b/apps/openchallenges/app/README.md
diff --git a/apps/openchallenges/app/docker-entrypoint.d/10-envsubst-on-app-config-template.sh b/apps/openchallenges/app/docker-entrypoint.d/10-envsubst-on-app-config-template.sh
@@ -1,4 +1,5 @@
 #!/usr/bin/env sh
 
-cd "${APP_DIR}/dist/apps/openchallenges/app/browser/browser/config"
+# Generate 'config.json' from 'config.json.template' using environment variables.
+cd "${APP_DIR}/browser/config"
 envsubst < config.json.template > config.json
diff --git a/apps/openchallenges/app/jest.config.ts b/apps/openchallenges/app/jest.config.ts
@@ -1,9 +1,7 @@
-/* eslint-disable */
 export default {
-  displayName: 'openchallenges',
+  displayName: 'openchallenges-app',
   preset: '../../../jest.preset.js',
   setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  globals: {},
   coverageDirectory: '../../../coverage/apps/openchallenges/app',
   transform: {
     '^.+\\.(ts|mjs|js|html)$': [

diff --git a/apps/openchallenges/app/project.json b/apps/openchallenges/app/project.json
@@ -2,92 +2,81 @@
   "name": "openchallenges-app",
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
+  "prefix": "app",
   "sourceRoot": "apps/openchallenges/app/src",
-  "prefix": "openchallenges",
+  "tags": ["type:app", "scope:client", "language:typescript"],
   "targets": {
-    "create-config": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "cp -n .env.example .env",
-        "cwd": "{projectRoot}"
-      }
-    },
-    "sonar": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "bash $WORKSPACE_DIR/tools/sonar-scanner.sh --project-key {projectName} --project-dir .",
-        "cwd": "{projectRoot}"
-      }
-    },
     "build": {
-      "executor": "@angular-devkit/build-angular:browser",
+      "executor": "@nx/angular:application",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/apps/openchallenges/app/browser/browser",
+        "outputPath": "dist/apps/openchallenges/app",
         "index": "apps/openchallenges/app/src/index.html",
-        "main": "apps/openchallenges/app/src/main.ts",
+        "browser": "apps/openchallenges/app/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/openchallenges/app/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
         "assets": [
-          "apps/openchallenges/app/src/assets",
           "apps/openchallenges/app/src/config",
           "apps/openchallenges/app/src/humans.txt",
           "apps/openchallenges/app/src/robots.txt",
-          "apps/openchallenges/app/src/sitemap.xml",
           {
-            "input": "libs/shared/typescript/assets/src/assets",
+            "input": "libs/shared/typescript/assets/src",
             "glob": "**/*",
-            "output": "assets"
-          },
-          {
-            "input": "libs/openchallenges/assets/src/assets",
-            "glob": "**/*",
-            "output": "openchallenges-assets"
+            "output": "assets/shared"
           },
           {
             "input": "libs/openchallenges/assets/src",
-            "glob": "favicon.ico",
-            "output": ""
+            "glob": "**/*",
+            "output": "assets/openchallenges"
           }
         ],
+        "stylePreprocessorOptions": {
+          "includePaths": ["libs"]
+        },
         "styles": [
           "apps/openchallenges/app/src/styles.scss",
           "node_modules/primeicons/primeicons.css",
           "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
           "node_modules/primeng/resources/primeng.min.css"
         ],
-        "scripts": []
+        "scripts": [],
+        "server": "apps/openchallenges/app/src/main.server.ts",
+        "prerender": false,
+        "ssr": {
+          "entry": "apps/openchallenges/app/server.ts"
+        }
       },
       "configurations": {
         "production": {
           "budgets": [
             {
               "type": "initial",
-              "maximumWarning": "1mb",
-              "maximumError": "2mb"
+              "maximumWarning": "500kb",
+              "maximumError": "1.5mb"
             },
             {
               "type": "anyComponentStyle",
               "maximumWarning": "2kb",
-              "maximumError": "10kb"
+              "maximumError": "8kb"
             }
           ],
           "outputHashing": "all"
         },
         "development": {
-          "buildOptimizer": false,
           "optimization": false,
-          "vendorChunk": true,
           "extractLicenses": false,
-          "sourceMap": true,
-          "namedChunks": true
+          "sourceMap": true
         }
       },
       "defaultConfiguration": "production"
     },
     "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
+      "executor": "@nx/angular:dev-server",
+      "options": {
+        "host": "127.0.0.1",
+        "port": 4200
+      },
       "configurations": {
         "production": {
           "buildTarget": "openchallenges-app:build:production"
@@ -96,108 +85,38 @@
           "buildTarget": "openchallenges-app:build:development"
         }
       },
-      "defaultConfiguration": "development",
-      "options": {
-        "host": "127.0.0.1",
-        "port": 4200,
-        "proxyConfig": "apps/openchallenges/app/src/proxy.conf.json"
-      }
-    },
-    "serve-detach": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "docker/openchallenges/serve-detach.sh openchallenges-app"
-      },
-      "dependsOn": []
+      "defaultConfiguration": "development"
     },
     "extract-i18n": {
-      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "executor": "@nx/angular:extract-i18n",
       "options": {
         "buildTarget": "openchallenges-app:build"
       }
     },
     "lint": {
       "executor": "@nx/eslint:lint"
     },
-    "lint-fix": {
-      "executor": "@nx/eslint:lint",
-      "options": {
-        "fix": true
-      }
-    },
     "test": {
       "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/apps/openchallenges/app"],
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
         "jestConfig": "apps/openchallenges/app/jest.config.ts"
       }
     },
-    "scan-image": {
-      "executor": "nx:run-commands",
+    "serve-static": {
+      "executor": "@nx/web:file-server",
       "options": {
-        "command": "trivy image ghcr.io/sage-bionetworks/openchallenges-app:local --quiet",
-        "color": true
+        "buildTarget": "openchallenges-app:build",
+        "staticFilePath": "dist/apps/openchallenges/app/browser",
+        "spa": true
       }
     },
-    "server": {
-      "dependsOn": ["build"],
-      "executor": "@angular-devkit/build-angular:server",
-      "options": {
-        "outputPath": "dist/apps/openchallenges/app/browser/server",
-        "main": "apps/openchallenges/app/server.ts",
-        "tsConfig": "apps/openchallenges/app/tsconfig.server.json",
-        "inlineStyleLanguage": "scss"
-      },
-      "configurations": {
-        "production": {
-          "outputHashing": "media"
-        },
-        "development": {
-          "buildOptimizer": false,
-          "optimization": false,
-          "sourceMap": true,
-          "extractLicenses": false,
-          "vendorChunk": true
-        }
-      },
-      "defaultConfiguration": "production"
-    },
-    "serve-ssr": {
-      "executor": "@angular-devkit/build-angular:ssr-dev-server",
-      "configurations": {
-        "development": {
-          "browserTarget": "openchallenges-app:build:development",
-          "serverTarget": "openchallenges-app:server:development"
-        },
-        "production": {
-          "browserTarget": "openchallenges-app:build:production",
-          "serverTarget": "openchallenges-app:server:production"
-        }
-      },
-      "defaultConfiguration": "development"
-    },
-    "prerender": {
-      "executor": "@angular-devkit/build-angular:prerender",
-      "options": {
-        "routes": ["/"]
-      },
-      "configurations": {
-        "development": {
-          "browserTarget": "openchallenges-app:build:development",
-          "serverTarget": "openchallenges-app:server:development"
-        },
-        "production": {
-          "browserTarget": "openchallenges-app:build:production",
-          "serverTarget": "openchallenges-app:server:production"
-        }
-      },
-      "defaultConfiguration": "production"
-    },
-    "build-sitemap": {
+    "serve-detach": {
       "executor": "nx:run-commands",
       "options": {
-        "command": "node tools/generate-sitemap.js http://localhost:4200 apps/openchallenges/app/src/sitemap.xml"
-      }
+        "command": "docker/openchallenges/serve-detach.sh {projectName}"
+      },
+      "dependsOn": []
     },
     "e2e": {
       "executor": "@nx/playwright:playwright",
@@ -207,7 +126,6 @@
       }
     }
   },
-  "tags": ["type:app", "scope:client", "language:typescript"],
   "implicitDependencies": [
     "openchallenges-styles",
     "openchallenges-themes",