From cbf0048d294be7de4f31075eb9469759a105ce41 Mon Sep 17 00:00:00 2001
From: David Leclerc <d.leclerc.pro@gmail.com>
Date: Wed, 13 Dec 2023 07:18:08 +0100
Subject: [PATCH] Fix: serve React app and its assets correctly within Express
 app.

---
 Apps/Server/src/config/AppConfig.ts      |  3 +--
 Apps/Server/src/config/ResourceConfig.ts |  3 +++
 Apps/Server/src/routes/index.ts          | 24 +++++++++++++++++++++---
 Apps/Server/src/utils/logger.ts          |  2 +-
 4 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 Apps/Server/src/config/ResourceConfig.ts

diff --git a/Apps/Server/src/config/AppConfig.ts b/Apps/Server/src/config/AppConfig.ts
index d7f46d7..cb491db 100644
--- a/Apps/Server/src/config/AppConfig.ts
+++ b/Apps/Server/src/config/AppConfig.ts
@@ -16,5 +16,4 @@ export const ROOT = `${createURL(PROTOCOL, HOST, PORT)}/`;
 export const CLIENT_PROTOCOL = process.env.CLIENT_PROTOCOL!;
 export const CLIENT_HOST = process.env.CLIENT_HOST!;
 export const CLIENT_PORT = parseInt(process.env.CLIENT_PORT!);
-export const CLIENT_ROOT = createURL(CLIENT_PROTOCOL, CLIENT_HOST, CLIENT_PORT);
-export const CLIENT_DIRECTORY = 'client';
\ No newline at end of file
+export const CLIENT_ROOT = createURL(CLIENT_PROTOCOL, CLIENT_HOST, CLIENT_PORT);
\ No newline at end of file
diff --git a/Apps/Server/src/config/ResourceConfig.ts b/Apps/Server/src/config/ResourceConfig.ts
new file mode 100644
index 0000000..76c7b90
--- /dev/null
+++ b/Apps/Server/src/config/ResourceConfig.ts
@@ -0,0 +1,3 @@
+import path from 'path';
+
+export const CLIENT_DIR = path.join(__dirname, `../..`, `client`);
\ No newline at end of file
diff --git a/Apps/Server/src/routes/index.ts b/Apps/Server/src/routes/index.ts
index 4bdb1a5..6588243 100644
--- a/Apps/Server/src/routes/index.ts
+++ b/Apps/Server/src/routes/index.ts
@@ -1,7 +1,10 @@
 import express, { Router } from 'express';
 import { RequestMiddleware } from '../middleware/RequestMiddleware';
-import { CLIENT_DIRECTORY, CLIENT_ROOT, PROD } from '../config/AppConfig';
+import { CLIENT_ROOT, PROD } from '../config/AppConfig';
 import ApiRouter from './api';
+import { logger } from '../utils/logger';
+import path from 'path';
+import { CLIENT_DIR } from '../config/ResourceConfig';
 
 
 
@@ -21,12 +24,27 @@ router.use(`/api`, ApiRouter);
 
 // Client app
 if (PROD) {
-    router.use('/', express.static(CLIENT_DIRECTORY));
+
+    // Serve React app's static files
+    router.use(express.static(path.join(CLIENT_DIR)));
+
+    // Define a route that serves the React app
+    router.get('*', (req, res) => {
+        const url = path.join(CLIENT_DIR, 'index.html');
+
+        logger.trace(`Serving client app from: ${url}`);
+
+        return res.sendFile(url);
+    });
 } else {
-    router.use('/', (req, res, next) => {
+    
+    // Redirect app to React's development server
+    router.get('*', (req, res, next) => {
         const path = req.originalUrl;
         const url = `${CLIENT_ROOT}${path}`;
 
+        logger.trace(`Redirecting request to: ${url}`);
+
         return res.redirect(url);
     });
 }
diff --git a/Apps/Server/src/utils/logger.ts b/Apps/Server/src/utils/logger.ts
index 1399f3a..129d282 100644
--- a/Apps/Server/src/utils/logger.ts
+++ b/Apps/Server/src/utils/logger.ts
@@ -12,7 +12,7 @@ const DEV_OPTIONS = {
 };
 
 const PROD_OPTIONS = {
-    level: 'trace',
+    level: 'debug',
 };
 
 export const logger = pino(PROD ? PROD_OPTIONS : DEV_OPTIONS);
\ No newline at end of file