Improved client side base path extraction

jordan-dalby · Nov 2, 2024 · 30df304 · 30df304
1 parent b293c98
commit 30df304
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 40 deletions.
diff --git a/client/src/api/snippets.ts b/client/src/api/snippets.ts
@@ -1,14 +1,13 @@
 import { Snippet } from '../types/types';
 
-const getBasePath = (): string => {
-  const envBasePath = process.env.BASE_PATH;
-  if (envBasePath) {
-    const normalized = envBasePath.endsWith('/') ? envBasePath.slice(0, -1) : envBasePath;
-    console.log('Using BASE_PATH from env:', normalized);
-    return normalized;
+declare global {
+  interface Window {
+    BASE_PATH?: string;
   }
-
-  return "";
+}
+
+const getBasePath = (): string => {
+  return window?.BASE_PATH?.endsWith('/') ? window.BASE_PATH.slice(0, -1) : window.BASE_PATH || '';
 };
 
 const BASE_PATH = getBasePath();

diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -7,5 +7,6 @@ services:
       - "5000:5000"
     environment:
       - PORT=5000
+      - BASE_PATH=
     volumes:
       - ./data:/data/snippets
diff --git a/server/src/app.js b/server/src/app.js
@@ -1,6 +1,7 @@
 const express = require('express');
 const bodyParser = require('body-parser');
 const path = require('path');
+const fs = require('fs');
 const { initializeDatabase } = require('./config/database');
 const snippetRoutes = require('./routes/snippetRoutes');
 
@@ -12,47 +13,29 @@ function app(server) {
     server.use(bodyParser.json());
     server.set('trust proxy', true);
 
-    server.use((req, res, next) => {
-        console.log(`[REQUEST] ${req.method} ${req.path}`);
-        next();
-    });
+    const injectBasePath = (req, res) => {
+        const indexPath = path.join(__dirname, '../../client/build', 'index.html');
+        let html = fs.readFileSync(indexPath, 'utf8');
+
+        const script = `<script>window.BASE_PATH = "${basePath || ''}";</script>`;
+        html = html.replace('<head>', '<head>' + script);
+
+        res.send(html);
+    };
 
     if (basePath) {
         const normalizedBasePath = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;
-        console.log(`Initializing server with base path: ${normalizedBasePath}`);
-
+        server.get(normalizedBasePath, injectBasePath);
+        server.use(express.static(path.join(__dirname, '../../client/build')));
+        server.use(`${normalizedBasePath}/api/snippets`, snippetRoutes);
+        server.get(`${normalizedBasePath}/*`, injectBasePath);
         server.get('/', (req, res) => {
-            console.log(`[REDIRECT] Redirecting / to ${normalizedBasePath}`);
             res.redirect(normalizedBasePath);
         });
-
-        server.get(normalizedBasePath, (req, res) => {
-            console.log(`[BASE] Serving index.html for base path`);
-            res.sendFile(path.join(__dirname, '../../client/build', 'index.html'));
-        });
-
-        const staticPath = path.join(__dirname, '../../client/build');
-        console.log(`Serving static files from: ${staticPath}`);
-        server.use(express.static(staticPath));
-
-        console.log(`Mounting API at: ${normalizedBasePath}/api/snippets`);
-        server.use(`${normalizedBasePath}/api/snippets`, snippetRoutes);
-
-        server.get(`${normalizedBasePath}/*`, (req, res) => {
-            console.log(`[SPA] Serving index.html for: ${req.path}`);
-            res.sendFile(path.join(__dirname, '../../client/build', 'index.html'));
-        });
-
-        server.use('*', (req, res) => {
-            console.log(`[404] Not found: ${req.path}`);
-            res.status(404).send('Not Found');
-        });
     } else {
         server.use(express.static(path.join(__dirname, '../../client/build')));
         server.use('/api/snippets', snippetRoutes);
-        server.get('*', (req, res) => {
-            res.sendFile(path.join(__dirname, '../../client/build', 'index.html'));
-        });
+        server.get('*', injectBasePath);
     }
 }