Merge pull request #148 from Morphclue/build/esbuild

ESBuild

apps/frontend/project.json

@@ -7,12 +7,13 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:browser",
-      "outputs": ["{options.outputPath}"],
+      "executor": "@nx/angular:application",
+      "outputs": ["{options.outputPath.base}"],
       "options": {
-        "outputPath": "dist/apps/frontend/browser",
+        "outputPath": {
+          "base": "dist/apps/frontend"
+        },
         "index": "apps/frontend/src/index.html",
-        "main": "apps/frontend/src/main.ts",
         "polyfills": [
           "@angular/localize/init",
           "zone.js",
@@ -28,8 +29,13 @@
         "styles": ["apps/frontend/src/styles.scss"],
         "allowedCommonJsDependencies": ["validator"],
         "scripts": [],
-        "serviceWorker": true,
-        "ngswConfigPath": "apps/frontend/ngsw-config.json"
+        "serviceWorker": "apps/frontend/ngsw-config.json",
+        "browser": "apps/frontend/src/main.ts",
+        "server": "apps/frontend/src/main.server.ts",
+        "prerender": true,
+        "ssr": {
+          "entry": "apps/frontend/server.ts"
+        }
       },
       "configurations": {
         "production": {
@@ -54,9 +60,7 @@
           ]
         },
         "development": {
-          "buildOptimizer": false,
           "optimization": false,
-          "vendorChunk": true,
           "extractLicenses": false,
           "sourceMap": true,
           "namedChunks": true
@@ -65,7 +69,7 @@
       "defaultConfiguration": "production"
     },
     "serve": {
-      "executor": "@angular-devkit/build-angular:dev-server",
+      "executor": "@nx/angular:dev-server",
       "configurations": {
         "production": {
           "buildTarget": "frontend:build:production"
@@ -101,65 +105,6 @@
       "options": {
         "buildTarget": "frontend:build"
       }
-    },
-    "server": {
-      "dependsOn": ["build"],
-      "executor": "@angular-devkit/build-angular:server",
-      "options": {
-        "outputPath": "dist/apps/frontend/server",
-        "main": "apps/frontend/server.ts",
-        "tsConfig": "apps/frontend/tsconfig.server.json"
-      },
-      "configurations": {
-        "production": {
-          "outputHashing": "media",
-          "fileReplacements": [
-            {
-              "replace": "apps/frontend/src/environments/environment.ts",
-              "with": "apps/frontend/src/environments/environment.prod.ts"
-            }
-          ]
-        },
-        "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": "frontend:build:development",
-          "serverTarget": "frontend:server:development"
-        },
-        "production": {
-          "browserTarget": "frontend:build:production",
-          "serverTarget": "frontend:server:production"
-        }
-      },
-      "defaultConfiguration": "development"
-    },
-    "prerender": {
-      "executor": "@angular-devkit/build-angular:prerender",
-      "options": {
-        "routes": ["/"]
-      },
-      "configurations": {
-        "development": {
-          "browserTarget": "frontend:build:development",
-          "serverTarget": "frontend:server:development"
-        },
-        "production": {
-          "browserTarget": "frontend:build:production",
-          "serverTarget": "frontend:server:production"
-        }
-      },
-      "defaultConfiguration": "production"
     }
   }
 }

apps/frontend/server.ts

@@ -1,34 +1,31 @@
-import 'zone.js/node';
-
 import { APP_BASE_HREF } from '@angular/common';
 import { CommonEngine } from '@angular/ssr';
 import express from 'express';
-import { existsSync } from 'node:fs';
-import { join } from 'node:path';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-import { AppServerModule } from './src/main.server';
+import AppServerModule 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/frontend/browser');
-  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
-    ? join(distFolder, 'index.original.html')
-    : join(distFolder, 'index.html');
+  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+  const browserDistFolder = resolve(serverDistFolder, '../browser');
+  const indexHtml = join(serverDistFolder, 'index.server.html');
 
   const commonEngine = new CommonEngine();
 
   server.set('view engine', 'html');
-  server.set('views', distFolder);
+  server.set('views', browserDistFolder);
 
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
   server.get(
     '*.*',
-    express.static(distFolder, {
+    express.static(browserDistFolder, {
       maxAge: '1y',
-    })
+    }),
   );
 
   // All regular routes use the Angular engine
@@ -40,8 +37,11 @@ export function app(): express.Express {
         bootstrap: AppServerModule,
         documentFilePath: indexHtml,
         url: `${protocol}://${headers.host}${originalUrl}`,
-        publicPath: distFolder,
-        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+        publicPath: browserDistFolder,
+        providers: [
+          { provide: APP_BASE_HREF, useValue: baseUrl },
+          { provide: 'BASE_URL', useValue: `${protocol}://${headers.host}` },
+        ],
       })
       .then((html) => res.send(html))
       .catch((err) => next(err));
@@ -60,14 +60,4 @@ function run(): void {
   });
 }
 
-// Webpack will replace 'require' with '__webpack_require__'
-// '__non_webpack_require__' is a proxy to Node 'require'
-// The below code is to ensure that the server is run only when not requiring the bundle.
-declare const __non_webpack_require__: NodeRequire;
-const mainModule = __non_webpack_require__.main;
-const moduleFilename = (mainModule && mainModule.filename) || '';
-if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
-  run();
-}
-
-export default AppServerModule;
+run();

apps/frontend/src/app/app.component.ts

@@ -2,8 +2,6 @@ import {Component, Inject, OnInit, Optional} from '@angular/core';
 import {Meta} from '@angular/platform-browser';
 import {SwUpdate} from '@angular/service-worker';
 
-import {TokenService} from './core/services';
-
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -13,7 +11,6 @@ export class AppComponent implements OnInit {
   title = 'apollusia';
 
   constructor(
-    private tokenService: TokenService,
     private swUpdate: SwUpdate,
     private meta: Meta,
     @Optional() @Inject('BASE_URL') private baseUrl?: string,

apps/frontend/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
+import {HTTP_INTERCEPTORS, HttpClientModule, provideHttpClient, withFetch} from '@angular/common/http';
 import {isDevMode, NgModule} from '@angular/core';
 import {ReactiveFormsModule} from '@angular/forms';
 import {BrowserModule, provideClientHydration} from '@angular/platform-browser';
@@ -17,7 +17,7 @@ import {LegalModule} from './legal/legal.module';
 @NgModule({
   declarations: [AppComponent],
   imports: [
-    BrowserModule.withServerTransition({appId: 'serverApp'}),
+    BrowserModule,
     AppRoutingModule,
     NgbModule,
     ModalModule,
@@ -42,6 +42,11 @@ import {LegalModule} from './legal/legal.module';
       multi: true,
     },
     provideClientHydration(),
+    provideHttpClient(withFetch()),
+    ...globalThis.document ? [{
+      provide: 'BASE_URL',
+      useValue: globalThis.document?.baseURI,
+    }] : [],
   ],
   bootstrap: [AppComponent],
 })

apps/frontend/src/app/app.server.module.ts

@@ -1,21 +1,11 @@
-import {NgModule} from '@angular/core';
-import {ServerModule} from '@angular/platform-server';
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
 
-import {AppComponent} from './app.component';
-import {AppModule} from './app.module';
+import { AppComponent } from './app.component';
+import { AppModule } from './app.module';
 
 @NgModule({
-  imports: [
-    AppModule,
-    ServerModule,
-  ],
+  imports: [AppModule, ServerModule],
   bootstrap: [AppComponent],
-  providers: [
-    {
-      provide: 'BASE_URL',
-      useValue: process.env['BASE_URL'],
-    },
-  ],
 })
-export class AppServerModule {
-}
+export class AppServerModule {}

apps/frontend/src/app/core/info-table/info-table.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Inject, Input, OnInit, Optional} from '@angular/core';
 import {ToastService} from '@mean-stream/ngbx';
 
 import {ReadPoll} from '../../model';
@@ -17,11 +17,12 @@ export class InfoTableComponent implements OnInit {
 
   constructor(
     private toastService: ToastService,
+    @Optional() @Inject('BASE_URL') private baseUrl?: string,
   ) {
   }
 
   ngOnInit() {
-    this.url = `${document.baseURI}poll/${this.poll.id}/participate`;
+    this.url = `${this.baseUrl}poll/${this.poll.id}/participate`;
   }
 
   copyToClipboard() {

apps/frontend/src/app/poll/choose-events/choose-events.component.ts

@@ -148,7 +148,17 @@ export class ChooseEventsComponent implements OnInit {
       this.currentSort = sortMethod.name;
       this.currentSortDirection = sortMethod.defaultDirection;
     }
-    this.participants?.sortBy(sortMethod.by, this.currentSortDirection);
+    this.participants?.sort((a, b) => {
+      const aVal = sortMethod.by(a);
+      const bVal = sortMethod.by(b);
+      if (aVal < bVal) {
+        return -this.currentSortDirection;
+      }
+      if (aVal > bVal) {
+        return this.currentSortDirection;
+      }
+      return 0;
+    });
   }
 
   // Helpers

apps/frontend/src/main.server.ts

@@ -1 +1 @@
-export {AppServerModule} from './app/app.server.module';
+export { AppServerModule as default } from './app/app.server.module';

apps/frontend/src/polyfills.ts

@@ -1,19 +0,0 @@
-declare global {
-  interface Array<T> {
-    sortBy(expr: (item: T) => any, direction?: 1 | -1): T[];
-  }
-}
-
-Array.prototype.sortBy = function(expr, direction = 1) {
-  return this.sort((a, b) => {
-    const aVal = expr(a);
-    const bVal = expr(b);
-    if (aVal < bVal) {
-      return -direction;
-    }
-    if (aVal > bVal) {
-      return direction;
-    }
-    return 0;
-  });
-};

apps/frontend/src/styles.scss

@@ -14,10 +14,10 @@ $primary: $french-violet;
 $dark: $persian-indigo;
 
 /* Imports */
-@import 'node_modules/bootstrap/scss/bootstrap';
-@import 'node_modules/bootstrap-icons/font/bootstrap-icons.css';
-@import 'node_modules/angular-calendar/css/angular-calendar.css';
-@import 'node_modules/flatpickr/dist/flatpickr.css';
+@import 'bootstrap/scss/bootstrap'; // NB: @import 'bootstrap' does not allow variable overrides
+@import 'bootstrap-icons';
+@import 'angular-calendar/scss/angular-calendar';
+@import 'flatpickr';
 
 .logo-glow {
   filter: drop-shadow(0 0 10px $primary);
@@ -106,8 +106,8 @@ $dark: $persian-indigo;
 }
 
 .ngb-dp-today {
+  @extend .fw-bold;
   color: $primary;
-  font-weight: $font-weight-bold;
 }
 
 .ngb-dp-day:hover {

apps/frontend/tsconfig.app.json

@@ -2,11 +2,14 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": [
-      "@angular/localize"
-    ]
+    "types": ["@angular/localize", "node"]
   },
-  "files": ["src/main.ts", "src/polyfills.ts"],
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts",
+    "src/main.server.ts",
+    "server.ts"
+  ],
   "include": ["src/**/*.d.ts"],
   "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
 }

apps/frontend/tsconfig.json

@@ -3,7 +3,6 @@
     "target": "es2022",
     "useDefineForClassFields": false,
     "forceConsistentCasingInFileNames": true,
-    "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "strict": true,