merge main

.github/workflows/ci.yml

@@ -112,7 +112,7 @@ jobs:
       - name: Build the affected projects
         run: |
           devcontainer exec --workspace-folder ../sage-monorepo bash -c ". ./dev-env.sh \
-            && nx affected --target=build"
+            && nx affected --target=build,server"
 
       - name: Test the affected projects (unit)
         run: |
@@ -249,7 +249,7 @@ jobs:
       - name: Build the affected projects
         run: |
           devcontainer exec --workspace-folder ../sage-monorepo bash -c ". ./dev-env.sh \
-            && nx affected --target=build"
+            && nx affected --target=build,server"
 
       - name: Test the affected projects (unit)
         run: |

.vscode/extensions.json

@@ -1,28 +1,4 @@
 {
-  "recommendations": [
-    "1000ch.svgo",
-    "Angular.ng-template",
-    "dbaeumer.vscode-eslint",
-    "emeraldwalk.RunOnSave",
-    "esbenp.prettier-vscode",
-    "firsttris.vscode-jest-runner",
-    "GitHub.vscode-pull-request-github",
-    "Gruntfuggly.todo-tree",
-    "humao.rest-client",
-    "mhutchie.git-graph",
-    "mongodb.mongodb-vscode",
-    "ms-python.python",
-    "mtxr.sqltools-driver-mysql",
-    "mtxr.sqltools-driver-pg",
-    "mtxr.sqltools",
-    "nrwl.angular-console",
-    "ritwickdey.LiveServer",
-    "shengchen.vscode-checkstyle",
-    "stkb.rewrap",
-    "vmware.vscode-boot-dev-pack",
-    "vscjava.vscode-gradle",
-    "vscjava.vscode-java-pack",
-    "webhint.vscode-webhint",
-    "ms-playwright.playwright"
-  ]
+  // Extensions should be defined in `.devcontainer/devcontainer.json` instead of here.
+  "recommendations": []
 }

apps/agora/webapp/project.json

@@ -10,7 +10,7 @@
       "executor": "@angular-devkit/build-angular:browser",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/apps/agora/webapp",
+        "outputPath": "dist/apps/agora/webapp/browser/browser",
         "index": "apps/agora/webapp/src/index.html",
         "main": "apps/agora/webapp/src/main.ts",
         "polyfills": ["zone.js"],
@@ -60,7 +60,7 @@
       "options": {
         "host": "127.0.0.1",
         "port": 5200,
-        "proxyConfig": "apps/openchallenges/app/src/proxy.conf.json"
+        "proxyConfig": "apps/agora/webapp/src/proxy.conf.json"
       }
     },
     "extract-i18n": {
@@ -89,6 +89,63 @@
           "codeCoverage": true
         }
       }
+    },
+    "server": {
+      "dependsOn": ["build"],
+      "executor": "@angular-devkit/build-angular:server",
+      "options": {
+        "outputPath": "dist/apps/agora/webapp/browser/server",
+        "main": "apps/agora/webapp/server.ts",
+        "tsConfig": "apps/agora/webapp/tsconfig.server.json"
+      },
+      "configurations": {
+        "production": {
+          "outputHashing": "media"
+        },
+        "development": {
+          "buildOptimizer": false,
+          "optimization": false,
+          "sourceMap": true,
+          "extractLicenses": false,
+          "vendorChunk": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve-ssr": {
+      "executor": "@nguniversal/builders:ssr-dev-server",
+      "configurations": {
+        "development": {
+          "browserTarget": "agora-webapp:build:development",
+          "serverTarget": "agora-webapp:server:development"
+        },
+        "production": {
+          "browserTarget": "agora-webapp:build:production",
+          "serverTarget": "agora-webapp:server:production"
+        }
+      },
+      "defaultConfiguration": "development",
+      "options": {
+        "host": "127.0.0.1",
+        "port": 5200
+      }
+    },
+    "prerender": {
+      "executor": "@nguniversal/builders:prerender",
+      "options": {
+        "routes": ["/"]
+      },
+      "configurations": {
+        "development": {
+          "browserTarget": "agora-webapp:build:development",
+          "serverTarget": "agora-webapp:server:development"
+        },
+        "production": {
+          "browserTarget": "agora-webapp:build:production",
+          "serverTarget": "agora-webapp:server:production"
+        }
+      },
+      "defaultConfiguration": "production"
     }
   }
 }

apps/openchallenges/app/src/ssr.server.ts → apps/agora/webapp/server.ts

@@ -1,18 +1,20 @@
 import 'zone.js/dist/zone-node';
-// import 'reflect-metadata';
 
 import { APP_BASE_HREF } from '@angular/common';
 import { ngExpressEngine } from '@nguniversal/express-engine';
 import * as express from 'express';
 import { existsSync } from 'fs';
 import { join } from 'path';
 
-import { AppServerModule } from './main.server';
+import bootstrap from './src/main.server';
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
   const server = express();
-  const distFolder = join(process.cwd(), 'dist/apps/openchallenges/browser');
+  const distFolder = join(
+    process.cwd(),
+    'dist/apps/agora/webapp/browser/browser'
+  );
   const indexHtml = existsSync(join(distFolder, 'index.original.html'))
     ? 'index.original.html'
     : 'index';
@@ -21,7 +23,7 @@ export function app(): express.Express {
   server.engine(
     'html',
     ngExpressEngine({
-      bootstrap: AppServerModule,
+      bootstrap,
     })
   );
 
@@ -40,19 +42,9 @@ export function app(): express.Express {
 
   // All regular routes use the Universal engine
   server.get('*', (req, res) => {
-    const protocol = req.protocol;
-    const host = req.get('host');
     res.render(indexHtml, {
       req,
-      providers: [
-        { provide: APP_BASE_HREF, useValue: req.baseUrl },
-        // The base URL enables the app to load the app config file during server-side rendering.
-        {
-          provide: 'APP_BASE_URL',
-          useFactory: () => `${protocol}://${host}`,
-          deps: [],
-        },
-      ],
+      providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
     });
   });
 
@@ -80,4 +72,4 @@ if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
   run();
 }
 
-export * from './main.server';
+export default bootstrap;

apps/agora/webapp/src/app/app.config.server.ts

@@ -0,0 +1,9 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering()],
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

apps/agora/webapp/src/main.server.ts

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
+
+const bootstrap = () => bootstrapApplication(AppComponent, config);
+
+export default bootstrap;

apps/agora/webapp/tsconfig.server.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/server",
+    "target": "es2019",
+    "types": ["node"]
+  },
+  "files": ["src/main.server.ts", "server.ts"]
+}

apps/openchallenges/app/.env.example

@@ -1,4 +1,6 @@
-API_URL="http://localhost:8082/api/v1"
 APP_VERSION="1.0.0-alpha"
-DATA_UPDATED_ON="2023-08-14"
-ENVIRONMENT="prod"
+CSR_API_URL="http://localhost:8082/api/v1"
+DATA_UPDATED_ON="2023-09-26"
+ENVIRONMENT="production"
+GOOGLE_TAG_MANAGER_ID=""
+SSR_API_URL="http://openchallenges-api-gateway:8082/api/v1"

apps/openchallenges/app/Dockerfile

@@ -1,17 +1,24 @@
-# Serve app with nginx server
-FROM nginx:1.23.2-alpine
+FROM node:20.7.0-alpine
 
-RUN apk add --no-cache jq
+ENV APP_DIR=/app
 
-COPY dist/apps/openchallenges/app/browser /usr/share/nginx/html
-COPY docker/nginx /etc/nginx/.
-COPY docker/10-envsubst-on-app-config-template.sh /docker-entrypoint.d/.
+RUN apk add --no-cache curl envsubst jq su-exec
 
-RUN chmod +x /docker-entrypoint.d/10-envsubst-on-app-config-template.sh
+WORKDIR /
+COPY apps/openchallenges/app/docker-entrypoint.sh .
+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
 
 HEALTHCHECK --interval=2s --timeout=3s --retries=20 --start-period=5s \
   CMD curl --fail --silent "localhost:4200/health" | jq '.status' | grep UP || exit 1
 
 EXPOSE 4200
 
-CMD ["nginx", "-g", "daemon off;"]
+ENTRYPOINT ["/docker-entrypoint.sh"]
+
+CMD ["node", "main.js"]

apps/openchallenges/app/docker-entrypoint.d/10-envsubst-on-app-config-template.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+
+cd "${APP_DIR}/dist/apps/openchallenges/app/browser/browser/config"
+envsubst < config.json.template > config.json

apps/openchallenges/app/docker-entrypoint.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+set -e
+
+/docker-entrypoint.d/10-envsubst-on-app-config-template.sh
+
+if [ "$1" = 'node' ]; then
+    cd ${APP_DIR}
+    exec su-exec node "$@"
+fi
+
+exec "$@"