Fix: serve React app and its assets correctly within Express app.

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';
+export const CLIENT_ROOT = createURL(CLIENT_PROTOCOL, CLIENT_HOST, CLIENT_PORT);

Apps/Server/src/config/ResourceConfig.ts

@@ -0,0 +1,3 @@
+import path from 'path';
+
+export const CLIENT_DIR = path.join(__dirname, `../..`, `client`);

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);
     });
 }

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);