angular universal WIP

refs #104

backend/src/api/websocket-handler.ts

@@ -80,18 +80,7 @@ class WebsocketHandler {
             if (!_blocks) {
               return;
             }
-            client.send(JSON.stringify({
-              'mempoolInfo': memPool.getMempoolInfo(),
-              'vBytesPerSecond': memPool.getVBytesPerSecond(),
-              'lastDifficultyAdjustment': blocks.getLastDifficultyAdjustmentTime(),
-              'blocks': _blocks,
-              'conversions': fiatConversion.getTickers()['BTCUSD'],
-              'mempool-blocks': mempoolBlocks.getMempoolBlocks(),
-              'transactions': memPool.getLatestTransactions(),
-              'git-commit': backendInfo.gitCommitHash,
-              'hostname': backendInfo.hostname,
-              ...this.extraInitProperties
-            }));
+            client.send(JSON.stringify(this.getInitData(_blocks)));
           }
 
           if (parsedMessage.action === 'ping') {
@@ -127,6 +116,24 @@ class WebsocketHandler {
     });
   }
 
+  getInitData(_blocks?: Block[]) {
+    if (!_blocks) {
+      _blocks = blocks.getBlocks();
+    }
+    return {
+      'mempoolInfo': memPool.getMempoolInfo(),
+      'vBytesPerSecond': memPool.getVBytesPerSecond(),
+      'lastDifficultyAdjustment': blocks.getLastDifficultyAdjustmentTime(),
+      'blocks': _blocks,
+      'conversions': fiatConversion.getTickers()['BTCUSD'],
+      'mempool-blocks': mempoolBlocks.getMempoolBlocks(),
+      'transactions': memPool.getLatestTransactions(),
+      'git-commit': backendInfo.gitCommitHash,
+      'hostname': backendInfo.hostname,
+      ...this.extraInitProperties
+    };
+  }
+
   handleNewStatistic(stats: OptimizedStatistic) {
     if (!this.wss) {
       throw new Error('WebSocket.Server is not set');

backend/src/index.ts

@@ -142,6 +142,7 @@ class Server {
       .get(config.MEMPOOL.API_URL_PREFIX + 'fees/recommended', routes.getRecommendedFees)
       .get(config.MEMPOOL.API_URL_PREFIX + 'fees/mempool-blocks', routes.getMempoolBlocks)
       .get(config.MEMPOOL.API_URL_PREFIX + 'backend-info', routes.getBackendInfo)
+      .get(config.MEMPOOL.API_URL_PREFIX + 'init-data', routes.getInitData)
     ;
 
     if (config.STATISTICS.ENABLED && config.DATABASE.ENABLED) {

backend/src/routes.ts

@@ -6,6 +6,7 @@ import backendInfo from './api/backend-info';
 import mempoolBlocks from './api/mempool-blocks';
 import mempool from './api/mempool';
 import bisq from './api/bisq/bisq';
+import websocketHandler from './api/websocket-handler';
 import bisqMarket from './api/bisq/markets-api';
 import { OptimizedStatistic, RequiredSpec } from './interfaces';
 import { MarketsApiError } from './api/bisq/interfaces';
@@ -63,6 +64,15 @@ class Routes {
     res.json(this.cache['1y']);
   }
 
+  public getInitData(req: Request, res: Response) {
+    try {
+      const result = websocketHandler.getInitData();
+      res.json(result);
+    } catch (e) {
+      res.status(500).send(e.message);
+    }
+  }
+
   public async getRecommendedFees(req: Request, res: Response) {
     if (!mempool.isInSync()) {
       res.statusCode = 503;

frontend/angular.json

@@ -17,7 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/mempool",
+            "outputPath": "dist/mempool/browser",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -29,7 +29,8 @@
               "src/robots.txt"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/@fortawesome/fontawesome-svg-core/styles.css"
             ],
             "scripts": [
               "generated-config.js"
@@ -105,7 +106,8 @@
             "tsConfig": [
               "tsconfig.app.json",
               "tsconfig.spec.json",
-              "e2e/tsconfig.json"
+              "e2e/tsconfig.json",
+              "tsconfig.server.json"
             ],
             "exclude": [
               "**/node_modules/**"
@@ -123,6 +125,53 @@
               "devServerTarget": "mempool:serve:production"
             }
           }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/mempool/server",
+            "main": "server.ts",
+            "tsConfig": "tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "media",
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "sourceMap": false,
+              "optimization": true
+            }
+          }
+        },
+        "serve-ssr": {
+          "builder": "@nguniversal/builders:ssr-dev-server",
+          "options": {
+            "browserTarget": "mempool:build",
+            "serverTarget": "mempool:server"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "mempool:build:production",
+              "serverTarget": "mempool:server:production"
+            }
+          }
+        },
+        "prerender": {
+          "builder": "@nguniversal/builders:prerender",
+          "options": {
+            "browserTarget": "mempool:build:production",
+            "serverTarget": "mempool:server:production",
+            "routes": [
+              "/"
+            ]
+          },
+          "configurations": {
+            "production": {}
+          }
         }
       }
     }},

frontend/package.json

@@ -29,44 +29,55 @@
     "generate-config": "node generate-config.js",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "dev:ssr": "ng run mempool:serve-ssr",
+    "serve:ssr": "node dist/mempool/server/main.js",
+    "build:ssr": "ng build --prod && ng run mempool:server:production",
+    "prerender": "ng run mempool:prerender"
   },
   "dependencies": {
-    "@angular/animations": "~10.0.4",
-    "@angular/common": "~10.0.4",
-    "@angular/compiler": "~10.0.4",
-    "@angular/core": "~10.0.4",
-    "@angular/forms": "~10.0.4",
-    "@angular/localize": "^10.0.4",
-    "@angular/platform-browser": "~10.0.4",
-    "@angular/platform-browser-dynamic": "~10.0.4",
-    "@angular/router": "~10.0.4",
+    "@angular/animations": "~10.2.2",
+    "@angular/common": "~10.2.2",
+    "@angular/compiler": "~10.2.2",
+    "@angular/core": "~10.2.2",
+    "@angular/forms": "~10.2.2",
+    "@angular/localize": "^10.2.2",
+    "@angular/platform-browser": "~10.2.2",
+    "@angular/platform-browser-dynamic": "~10.2.2",
+    "@angular/platform-server": "~10.2.2",
+    "@angular/router": "~10.2.2",
     "@fortawesome/angular-fontawesome": "^0.7.0",
     "@fortawesome/fontawesome-common-types": "^0.2.30",
     "@fortawesome/fontawesome-svg-core": "^1.2.30",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@ng-bootstrap/ng-bootstrap": "^7.0.0",
+    "@nguniversal/express-engine": "10.1.0",
     "@types/qrcode": "^1.3.4",
     "bootstrap": "4.5.0",
     "chartist": "^0.11.4",
     "clipboard": "^2.0.4",
+    "domino": "^2.1.6",
+    "express": "^4.15.2",
     "ngx-bootrap-multiselect": "^2.0.0",
     "ngx-infinite-scroll": "^9.0.0",
     "qrcode": "^1.4.4",
-    "rxjs": "^6.6.0",
+    "rxjs": "^6.6.3",
     "tlite": "^0.1.9",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.1002.0",
-    "@angular/cli": "~10.0.3",
-    "@angular/compiler-cli": "~10.0.4",
-    "@angular/language-service": "~10.0.4",
+    "@angular/cli": "~10.2.0",
+    "@angular/compiler-cli": "~10.2.2",
+    "@angular/language-service": "~10.2.2",
+    "@nguniversal/builders": "^10.0.1",
+    "@types/express": "^4.17.0",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
+    "http-proxy-middleware": "^1.0.5",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.0.0",

frontend/server.ts

@@ -0,0 +1,97 @@
+import 'zone.js/dist/zone-node';
+
+import { ngExpressEngine } from '@nguniversal/express-engine';
+import * as express from 'express';
+import * as fs from 'fs';
+import * as path from 'path';
+import * as domino from 'domino';
+import { createProxyMiddleware } from 'http-proxy-middleware';
+
+import { join } from 'path';
+import { AppServerModule } from './src/main.server';
+import { APP_BASE_HREF } from '@angular/common';
+import { existsSync } from 'fs';
+
+const template = fs.readFileSync(path.join(__dirname, '../../mempool', 'index.html')).toString();
+
+const win = domino.createWindow(template);
+
+// @ts-ignore
+win.matchMedia = () => {
+  return {
+    matches: true
+  };
+};
+
+// @ts-ignore
+win.setTimeout = (fn) => { fn(); };
+win.document.body.scrollTo = (() => {});
+
+global['window'] = win;
+global['document'] = win.document;
+global['history'] = { state: { data: {} } };
+
+
+// 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/mempool/browser');
+  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+
+  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
+  server.engine('html', ngExpressEngine({
+    bootstrap: AppServerModule,
+  }));
+
+  server.set('view engine', 'html');
+  server.set('views', distFolder);
+
+  // Example Express Rest API endpoints
+  // server.get('/api/**', (req, res) => { });
+  // Serve static files from /browser
+  server.get('*.*', express.static(distFolder, {
+    maxAge: '1y'
+  }));
+
+  server.get('/api/v1/**', createProxyMiddleware({
+    target: 'http://localhost:8999',
+    changeOrigin: true,
+   },
+ ));
+
+  server.get('/api/**', createProxyMiddleware({
+     target: 'http://localhost:50001',
+     changeOrigin: true,
+     pathRewrite: {'^/api' : '/'}
+    },
+  ));
+
+  // All regular routes use the Universal engine
+  server.get('*', (req, res) => {
+    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+  });
+
+  return server;
+}
+
+function run(): void {
+  const port = process.env.PORT || 4000;
+
+  // Start up the Node server
+  const server = app();
+  server.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+// 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 * from './src/main.server';

frontend/src/app/app-routing.module.ts

@@ -222,7 +222,9 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {
+    initialNavigation: 'enabled'
+})],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

frontend/src/app/app.constants.ts

@@ -54,7 +54,7 @@ const defaultEnv: Env = {
   'KEEP_BLOCKS_AMOUNT': 8
 };
 
-const browserWindow = window || {};
+const browserWindow = {};
 // @ts-ignore
 const browserWindowEnv = browserWindow.__env || {};
 export const env: Env = Object.assign(defaultEnv, browserWindowEnv);

frontend/src/app/app.module.ts

@@ -84,7 +84,7 @@ import { StorageService } from './services/storage.service';
     TermsOfServiceComponent,
   ],
   imports: [
-    BrowserModule,
+    BrowserModule.withServerTransition({ appId: 'serverApp' }),
     AppRoutingModule,
     HttpClientModule,
     BrowserAnimationsModule,

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+
+import { AppModule } from './app.module';
+import { AppComponent } from './components/app/app.component';
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}

frontend/src/app/components/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component, HostListener, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
 import { Router, NavigationEnd } from '@angular/router';
 import { WebsocketService } from '../../services/websocket.service';
 import { StateService } from 'src/app/services/state.service';
@@ -15,6 +16,7 @@ export class AppComponent implements OnInit {
     public router: Router,
     private websocketService: WebsocketService,
     private stateService: StateService,
+    private location: Location,
   ) { }
 
   @HostListener('document:keydown', ['$event'])
@@ -28,7 +30,7 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     this.router.events.subscribe((val) => {
       if (val instanceof NavigationEnd) {
-        this.link.setAttribute('href', 'https://mempool.space' + (location.pathname === '/' ? '' : location.pathname));
+        this.link.setAttribute('href', 'https://mempool.space' + (this.location.path() === '/' ? '' : this.location.path()));
       }
     });
   }

frontend/src/app/components/statistics/chartist.component.ts

@@ -194,7 +194,7 @@ export class ChartistComponent implements OnInit, OnChanges, OnDestroy {
     };
   };
 
-}(window, document, Chartist));
+}(null, null, Chartist));
 
 
 /**
@@ -278,7 +278,7 @@ export class ChartistComponent implements OnInit, OnChanges, OnDestroy {
     };
   };
 
-}(window, document, Chartist));
+}(null, null, Chartist));
 
 const defaultOptions = {
     className: '',

frontend/src/app/components/time-since/time-since.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDetectorRef, OnChanges, PLATFORM_ID, Inject } from '@angular/core';
 
 @Component({
   selector: 'app-time-since',
@@ -6,6 +7,7 @@ import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, ChangeDet
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy {
+  isBrowser: boolean = isPlatformBrowser(this.platformId);
   interval: number;
   text: string;
   intervals = {};
@@ -14,7 +16,8 @@ export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy {
   @Input() fastRender = false;
 
   constructor(
-    private ref: ChangeDetectorRef
+    private ref: ChangeDetectorRef,
+    @Inject(PLATFORM_ID) private platformId: any,
   ) {
     if (document.body.clientWidth < 768) {
       this.intervals = {
@@ -40,6 +43,11 @@ export class TimeSinceComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnInit() {
+    if (!this.isBrowser) {
+      this.text = this.calculate();
+      this.ref.markForCheck();
+      return;
+    }
     this.interval = window.setInterval(() => {
       this.text = this.calculate();
       this.ref.markForCheck();

frontend/src/app/services/api.service.ts

@@ -1,9 +1,11 @@
-import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
+import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { Observable } from 'rxjs';
+import { isPlatformBrowser } from '@angular/common';
 import { StateService } from './state.service';
 import { env } from '../app.constants';
+import { WebsocketResponse } from '../interfaces/websocket.interface';
 
 const API_BASE_URL = '{network}/api/v1';
 
@@ -11,19 +13,28 @@ const API_BASE_URL = '{network}/api/v1';
   providedIn: 'root'
 })
 export class ApiService {
-  apiBaseUrl: string;
+  private apiBaseUrl: string;
+  private isBrowser: boolean = isPlatformBrowser(this.platformId);
 
   constructor(
     private httpClient: HttpClient,
     private stateService: StateService,
+    @Inject(PLATFORM_ID) private platformId: any,
   ) {
-    this.apiBaseUrl = API_BASE_URL.replace('{network}', '');
     this.stateService.networkChanged$.subscribe((network) => {
       if (network === 'bisq' && !env.BISQ_SEPARATE_BACKEND) {
         network = '';
       }
       this.apiBaseUrl = API_BASE_URL.replace('{network}', network ? '/' + network : '');
+      if (!this.isBrowser) {
+        this.apiBaseUrl = 'http://localhost:8999' + this.apiBaseUrl;
+      }
     });
+
+    this.apiBaseUrl = API_BASE_URL.replace('{network}', '');
+    if (!this.isBrowser) {
+      this.apiBaseUrl = 'http://localhost:8999' + this.apiBaseUrl;
+    }
   }
 
   list2HStatistics$(): Observable<OptimizedMempoolStats[]> {
@@ -73,4 +84,8 @@ export class ApiService {
   getDonation$(): Observable<any[]> {
     return this.httpClient.get<any[]>(this.apiBaseUrl + '/donations');
   }
+
+  getInitData$(): Observable<WebsocketResponse> {
+    return this.httpClient.get<WebsocketResponse>(this.apiBaseUrl + '/init-data');
+  }
 }

frontend/src/app/services/audio.service.ts

@@ -4,13 +4,17 @@ import { Injectable } from '@angular/core';
   providedIn: 'root'
 })
 export class AudioService {
-  audio = new Audio();
+  audio: HTMLAudioElement;
   isPlaying = false;
 
-  constructor() { }
+  constructor() {
+    try {
+      this.audio = new Audio();
+    } catch (e) {}
+  }
 
   public playSound(name: 'magic' | 'chime' | 'cha-ching' | 'bright-harmony') {
-    if (this.isPlaying) {
+    if (this.isPlaying || !this.audio) {
       return;
     }
     this.isPlaying = true;

frontend/src/app/services/electrs-api.service.ts

@@ -1,22 +1,27 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { Block, Transaction, Address, Outspend, Recent, Asset } from '../interfaces/electrs.interface';
 import { StateService } from './state.service';
-import { env } from '../app.constants';
 
-const API_BASE_URL = '{network}/api';
+let API_BASE_URL = '{network}/api';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ElectrsApiService {
-  apiBaseUrl: string;
+  private apiBaseUrl: string;
+  private isBrowser: boolean = isPlatformBrowser(this.platformId);
 
   constructor(
     private httpClient: HttpClient,
     private stateService: StateService,
+    @Inject(PLATFORM_ID) private platformId: any,
   ) {
+    if (!this.isBrowser) {
+      API_BASE_URL = 'http://localhost:4200/api';
+    }
     this.apiBaseUrl = API_BASE_URL.replace('{network}', '');
     this.stateService.networkChanged$.subscribe((network) => {
       if (network === 'bisq') {

frontend/src/app/services/state.service.ts

@@ -1,11 +1,12 @@
-import { Injectable } from '@angular/core';
-import { ReplaySubject, BehaviorSubject, Subject, fromEvent } from 'rxjs';
+import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { ReplaySubject, BehaviorSubject, Subject, fromEvent, Observable } from 'rxjs';
 import { Block, Transaction } from '../interfaces/electrs.interface';
 import { MempoolBlock, MempoolInfo, TransactionStripped } from '../interfaces/websocket.interface';
 import { OptimizedMempoolStats } from '../interfaces/node-api.interface';
 import { Router, NavigationStart } from '@angular/router';
 import { env } from '../app.constants';
-import { shareReplay, map } from 'rxjs/operators';
+import { isPlatformBrowser } from '@angular/common';
+import { map, shareReplay } from 'rxjs/operators';
 
 interface MarkBlockState {
   blockHeight?: number;
@@ -17,6 +18,7 @@ interface MarkBlockState {
   providedIn: 'root'
 })
 export class StateService {
+  isBrowser: boolean = isPlatformBrowser(this.platformId);
   network = '';
   latestBlockHeight = 0;
 
@@ -40,21 +42,28 @@ export class StateService {
 
   viewFiat$ = new BehaviorSubject<boolean>(false);
   connectionState$ = new BehaviorSubject<0 | 1 | 2>(2);
-  isTabHidden$ = fromEvent(document, 'visibilitychange').pipe(map((event) => this.isHidden()), shareReplay());
+  isTabHidden$: Observable<boolean>;
 
   markBlock$ = new ReplaySubject<MarkBlockState>();
   keyNavigation$ = new Subject<KeyboardEvent>();
 
   constructor(
+    @Inject(PLATFORM_ID) private platformId: any,
     private router: Router,
   ) {
-    this.setNetworkBasedonUrl(window.location.pathname);
-
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationStart) {
         this.setNetworkBasedonUrl(event.url);
       }
     });
+
+    if (this.isBrowser) {
+      this.setNetworkBasedonUrl(window.location.pathname);
+      this.isTabHidden$ = fromEvent(document, 'visibilitychange').pipe(map(() => this.isHidden()), shareReplay());
+    } else {
+      this.setNetworkBasedonUrl('/');
+      this.isTabHidden$ = new BehaviorSubject(false);
+    }
   }
 
   setNetworkBasedonUrl(url: string) {

frontend/src/app/services/storage.service.ts

@@ -7,16 +7,12 @@ export class StorageService {
   getValue(key: string): string {
     try {
       return localStorage.getItem(key);
-    } catch (e) {
-      console.log(e);
-    }
+    } catch (e) { }
   }
 
   setValue(key: string, value: any): void {
     try {
       localStorage.setItem(key, value);
-    } catch (e) {
-      console.log(e);
-    }
+    } catch (e) { }
   }
 }

frontend/src/app/services/websocket.service.ts

@@ -1,13 +1,16 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
 import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
 import { WebsocketResponse } from '../interfaces/websocket.interface';
 import { StateService } from './state.service';
 import { Block, Transaction } from '../interfaces/electrs.interface';
 import { Subscription } from 'rxjs';
 import { env } from '../app.constants';
+import { isPlatformBrowser } from '@angular/common';
+import { ApiService } from './api.service';
+import { take } from 'rxjs/operators';
 
-const WEB_SOCKET_PROTOCOL = (document.location.protocol === 'https:') ? 'wss:' : 'ws:';
-const WEB_SOCKET_URL = WEB_SOCKET_PROTOCOL + '//' + document.location.hostname + ':' + document.location.port + '{network}/api/v1/ws';
+const WEB_SOCKET_PROTOCOL = 'ws:';
+const WEB_SOCKET_URL = WEB_SOCKET_PROTOCOL + '//localhost:8999{network}/api/v1/ws';
 
 const OFFLINE_RETRY_AFTER_MS = 10000;
 const OFFLINE_PING_CHECK_AFTER_MS = 30000;
@@ -26,33 +29,44 @@ export class WebsocketService {
   private onlineCheckTimeoutTwo: number;
   private subscription: Subscription;
   private network = '';
+  private isBrowser: boolean = isPlatformBrowser(this.platformId);
 
   constructor(
     private stateService: StateService,
+    private apiService: ApiService,
+    @Inject(PLATFORM_ID) private platformId: any,
   ) {
-    this.network = this.stateService.network === 'bisq' && !env.BISQ_SEPARATE_BACKEND ? '' : this.stateService.network;
-    this.websocketSubject = webSocket<WebsocketResponse>(WEB_SOCKET_URL.replace('{network}', this.network ? '/' + this.network : ''));
-    this.startSubscription();
+    if (!this.isBrowser) {
+      this.stateService.isLoadingWebSocket$.next(false);
+      this.apiService.getInitData$()
+        .pipe(take(1))
+        .subscribe((response) => this.handleResponse(response));
 
-    this.stateService.networkChanged$.subscribe((network) => {
-      if (network === 'bisq' && !env.BISQ_SEPARATE_BACKEND) {
-        network = '';
-      }
-      if (network === this.network) {
-        return;
-      }
-      this.network = network;
-      clearTimeout(this.onlineCheckTimeout);
-      clearTimeout(this.onlineCheckTimeoutTwo);
-
-      this.stateService.latestBlockHeight = 0;
-
-      this.websocketSubject.complete();
-      this.subscription.unsubscribe();
+    } else {
+      this.network = this.stateService.network === 'bisq' && !env.BISQ_SEPARATE_BACKEND ? '' : this.stateService.network;
       this.websocketSubject = webSocket<WebsocketResponse>(WEB_SOCKET_URL.replace('{network}', this.network ? '/' + this.network : ''));
-
       this.startSubscription();
-    });
+
+      this.stateService.networkChanged$.subscribe((network) => {
+        if (network === 'bisq' && !env.BISQ_SEPARATE_BACKEND) {
+          network = '';
+        }
+        if (network === this.network) {
+          return;
+        }
+        this.network = network;
+        clearTimeout(this.onlineCheckTimeout);
+        clearTimeout(this.onlineCheckTimeoutTwo);
+
+        this.stateService.latestBlockHeight = 0;
+
+        this.websocketSubject.complete();
+        this.subscription.unsubscribe();
+        this.websocketSubject = webSocket<WebsocketResponse>(WEB_SOCKET_URL.replace('{network}', this.network ? '/' + this.network : ''));
+
+        this.startSubscription();
+      });
+    }
   }
 
   startSubscription(retrying = false) {
@@ -64,100 +78,7 @@ export class WebsocketService {
     this.subscription = this.websocketSubject
       .subscribe((response: WebsocketResponse) => {
         this.stateService.isLoadingWebSocket$.next(false);
-        if (response.blocks && response.blocks.length) {
-          const blocks = response.blocks;
-          blocks.forEach((block: Block) => {
-            if (block.height > this.stateService.latestBlockHeight) {
-              this.stateService.latestBlockHeight = block.height;
-              this.stateService.blocks$.next([block, false]);
-            }
-          });
-        }
-
-        if (response.tx) {
-          this.stateService.mempoolTransactions$.next(response.tx);
-        }
-
-        if (response.block) {
-          if (response.block.height > this.stateService.latestBlockHeight) {
-            this.stateService.latestBlockHeight = response.block.height;
-            this.stateService.blocks$.next([response.block, !!response.txConfirmed]);
-          }
-
-          if (response.txConfirmed) {
-            this.isTrackingTx = false;
-          }
-        }
-
-        if (response.conversions) {
-          this.stateService.conversions$.next(response.conversions);
-        }
-
-        if (response.rbfTransaction) {
-          this.stateService.txReplaced$.next(response.rbfTransaction);
-        }
-
-        if (response['mempool-blocks']) {
-          this.stateService.mempoolBlocks$.next(response['mempool-blocks']);
-        }
-
-        if (response.transactions) {
-          response.transactions.forEach((tx) => this.stateService.transactions$.next(tx));
-        }
-
-        if (response['bsq-price']) {
-          this.stateService.bsqPrice$.next(response['bsq-price']);
-        }
-
-        if (response['git-commit']) {
-          this.stateService.gitCommit$.next(response['git-commit']);
-
-          if (!this.latestGitCommit) {
-            this.latestGitCommit = response['git-commit'];
-          } else {
-            if (this.latestGitCommit !== response['git-commit']) {
-              setTimeout(() => {
-                window.location.reload();
-              }, Math.floor(Math.random() * 60000) + 60000);
-            }
-          }
-        }
-
-        if (response['address-transactions']) {
-          response['address-transactions'].forEach((addressTransaction: Transaction) => {
-            this.stateService.mempoolTransactions$.next(addressTransaction);
-          });
-        }
-
-        if (response['block-transactions']) {
-          response['block-transactions'].forEach((addressTransaction: Transaction) => {
-            this.stateService.blockTransactions$.next(addressTransaction);
-          });
-        }
-
-        if (response['live-2h-chart']) {
-          this.stateService.live2Chart$.next(response['live-2h-chart']);
-        }
-
-        if (response.mempoolInfo) {
-          this.stateService.mempoolInfo$.next(response.mempoolInfo);
-        }
-
-        if (response.vBytesPerSecond !== undefined) {
-          this.stateService.vbytesPerSecond$.next(response.vBytesPerSecond);
-        }
-
-        if (response.lastDifficultyAdjustment !== undefined) {
-          this.stateService.lastDifficultyAdjustment$.next(response.lastDifficultyAdjustment);
-        }
-
-        if (response['git-commit']) {
-          this.stateService.gitCommit$.next(response['git-commit']);
-        }
-
-        if (response.donationConfirmed) {
-          this.stateService.donationConfirmed$.next(true);
-        }
+        this.handleResponse(response);
 
         if (this.goneOffline === true) {
           this.goneOffline = false;
@@ -226,6 +147,9 @@ export class WebsocketService {
   }
 
   want(data: string[], force = false) {
+    if (!this.isBrowser) {
+      return;
+    }
     if (data === this.lastWant && !force) {
       return;
     }
@@ -257,4 +181,101 @@ export class WebsocketService {
       }, EXPECT_PING_RESPONSE_AFTER_MS);
     }, OFFLINE_PING_CHECK_AFTER_MS);
   }
+
+  handleResponse(response: WebsocketResponse) {
+    if (response.blocks && response.blocks.length) {
+      const blocks = response.blocks;
+      blocks.forEach((block: Block) => {
+        if (block.height > this.stateService.latestBlockHeight) {
+          this.stateService.latestBlockHeight = block.height;
+          this.stateService.blocks$.next([block, false]);
+        }
+      });
+    }
+
+    if (response.tx) {
+      this.stateService.mempoolTransactions$.next(response.tx);
+    }
+
+    if (response.block) {
+      if (response.block.height > this.stateService.latestBlockHeight) {
+        this.stateService.latestBlockHeight = response.block.height;
+        this.stateService.blocks$.next([response.block, !!response.txConfirmed]);
+      }
+
+      if (response.txConfirmed) {
+        this.isTrackingTx = false;
+      }
+    }
+
+    if (response.conversions) {
+      this.stateService.conversions$.next(response.conversions);
+    }
+
+    if (response.rbfTransaction) {
+      this.stateService.txReplaced$.next(response.rbfTransaction);
+    }
+
+    if (response['mempool-blocks']) {
+      this.stateService.mempoolBlocks$.next(response['mempool-blocks']);
+    }
+
+    if (response.transactions) {
+      response.transactions.forEach((tx) => this.stateService.transactions$.next(tx));
+    }
+
+    if (response['bsq-price']) {
+      this.stateService.bsqPrice$.next(response['bsq-price']);
+    }
+
+    if (response['git-commit']) {
+      this.stateService.gitCommit$.next(response['git-commit']);
+
+      if (!this.latestGitCommit) {
+        this.latestGitCommit = response['git-commit'];
+      } else {
+        if (this.latestGitCommit !== response['git-commit']) {
+          setTimeout(() => {
+            window.location.reload();
+          }, Math.floor(Math.random() * 60000) + 60000);
+        }
+      }
+    }
+
+    if (response['address-transactions']) {
+      response['address-transactions'].forEach((addressTransaction: Transaction) => {
+        this.stateService.mempoolTransactions$.next(addressTransaction);
+      });
+    }
+
+    if (response['block-transactions']) {
+      response['block-transactions'].forEach((addressTransaction: Transaction) => {
+        this.stateService.blockTransactions$.next(addressTransaction);
+      });
+    }
+
+    if (response['live-2h-chart']) {
+      this.stateService.live2Chart$.next(response['live-2h-chart']);
+    }
+
+    if (response.mempoolInfo) {
+      this.stateService.mempoolInfo$.next(response.mempoolInfo);
+    }
+
+    if (response.vBytesPerSecond !== undefined) {
+      this.stateService.vbytesPerSecond$.next(response.vBytesPerSecond);
+    }
+
+    if (response.lastDifficultyAdjustment !== undefined) {
+      this.stateService.lastDifficultyAdjustment$.next(response.lastDifficultyAdjustment);
+    }
+
+    if (response['git-commit']) {
+      this.stateService.gitCommit$.next(response['git-commit']);
+    }
+
+    if (response.donationConfirmed) {
+      this.stateService.donationConfirmed$.next(true);
+    }
+  }
 }

frontend/src/index.html

@@ -32,10 +32,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
-  <noscript>
-    <div style="font-size: 36px">&#128680; mempool requires javascript&#128680;</div>
-    <div style="font-size: 20px">&nbsp; You need to enable JS in your browser to use this website.</div>
-  </noscript>
   <app-root></app-root>
   <script type="text/javascript">
     if (document.location.hostname === "mempool.space")

frontend/src/main.server.ts

@@ -0,0 +1,23 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+*/
+
+import * as domino from 'domino';
+
+const win = domino.createWindow();
+
+global['window'] = win;
+global['document'] = win.document;
+
+import '@angular/localize/init';
+
+import { enableProdMode } from '@angular/core';
+
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+export { AppServerModule } from './app/app.server.module';
+export { renderModule, renderModuleFactory } from '@angular/platform-server';

frontend/src/main.ts

@@ -8,5 +8,7 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+document.addEventListener('DOMContentLoaded', () => {
+  platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.error(err));
+});

frontend/tsconfig.json

@@ -12,6 +12,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.server.json"
     }
   ]
 }

frontend/tsconfig.server.json

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