Bugfix/fix missing assets during local development (#1253)

* Extend setup for development (missing assets)

* Update changelog

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Sorted the benchmarks by name
 
+### Fixed
+
+- Fixed the missing assets during the local development
+
 ## 1.192.0 - 11.09.2022
 
 ### Changed

README.md

@@ -153,6 +153,7 @@ Please follow the instructions of the Ghostfolio [Unraid Community App](https://
 ### Setup
 
 1. Run `yarn install`
+1. Run `yarn build:dev` to build the source code including the assets
 1. Run `docker-compose --env-file ./.env -f docker/docker-compose.dev.yml up -d` to start [PostgreSQL](https://www.postgresql.org) and [Redis](https://redis.io)
 1. Run `yarn database:setup` to initialize the database schema and populate your database with (example) data
 1. Start the server and the client (see [_Development_](#Development))

apps/api/src/app/frontend.middleware.ts

@@ -4,22 +4,36 @@ import * as path from 'path';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { DEFAULT_LANGUAGE_CODE } from '@ghostfolio/common/config';
 import { Injectable, NestMiddleware } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
 import { NextFunction, Request, Response } from 'express';
 
 @Injectable()
 export class FrontendMiddleware implements NestMiddleware {
-  public indexHtmlDe = fs.readFileSync(
-    this.getPathOfIndexHtmlFile('de'),
-    'utf8'
-  );
-  public indexHtmlEn = fs.readFileSync(
-    this.getPathOfIndexHtmlFile(DEFAULT_LANGUAGE_CODE),
-    'utf8'
-  );
+  public indexHtmlDe = '';
+  public indexHtmlEn = '';
+  public isProduction: boolean;
 
   public constructor(
+    private readonly configService: ConfigService,
     private readonly configurationService: ConfigurationService
-  ) {}
+  ) {
+    const NODE_ENV =
+      this.configService.get<'development' | 'production'>('NODE_ENV') ??
+      'development';
+
+    this.isProduction = NODE_ENV === 'production';
+
+    try {
+      this.indexHtmlDe = fs.readFileSync(
+        this.getPathOfIndexHtmlFile('de'),
+        'utf8'
+      );
+      this.indexHtmlEn = fs.readFileSync(
+        this.getPathOfIndexHtmlFile(DEFAULT_LANGUAGE_CODE),
+        'utf8'
+      );
+    } catch {}
+  }
 
   public use(req: Request, res: Response, next: NextFunction) {
     let featureGraphicPath = 'assets/cover.png';
@@ -31,7 +45,11 @@ export class FrontendMiddleware implements NestMiddleware {
       featureGraphicPath = 'assets/images/blog/500-stars-on-github.jpg';
     }
 
-    if (req.path.startsWith('/api/') || this.isFileRequest(req.url)) {
+    if (
+      req.path.startsWith('/api/') ||
+      this.isFileRequest(req.url) ||
+      !this.isProduction
+    ) {
       // Skip
       next();
     } else if (req.path === '/de' || req.path.startsWith('/de/')) {