From 91678028b556c958456d65e980386ad3ce6ab7b1 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 14 Sep 2022 19:26:59 +0200
Subject: [PATCH] Bugfix/fix missing assets during local development (#1253)

* Extend setup for development (missing assets)

* Update changelog
---
 CHANGELOG.md                            |  4 +++
 README.md                               |  1 +
 apps/api/src/app/frontend.middleware.ts | 38 ++++++++++++++++++-------
 3 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c4016ea2e..7d77c5578 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/README.md b/README.md
index 284087a10..3343ca7b8 100644
--- a/README.md
+++ b/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))
diff --git a/apps/api/src/app/frontend.middleware.ts b/apps/api/src/app/frontend.middleware.ts
index c45a35749..b650555fd 100644
--- a/apps/api/src/app/frontend.middleware.ts
+++ b/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/')) {