refactor: add prefix to relative assets

refactor: add prefix to server entrypoints
refactor: add prefix to express router
refactor: add prefix to router basename

apps/server/src/adapters/WebsocketAdapter.ts

@@ -47,8 +47,8 @@ export class SocketServer implements IAdapter {
     this.wss = null;
   }
 
-  init(server: Server) {
-    this.wss = new WebSocketServer({ path: '/ws', server, maxPayload: this.MAX_PAYLOAD });
+  init(server: Server, prefix?: string) {
+    this.wss = new WebSocketServer({ path: `${prefix}/ws`, server, maxPayload: this.MAX_PAYLOAD });
 
     this.wss.on('connection', (ws) => {
       const clientId = generateId();

apps/server/src/app.ts

@@ -6,10 +6,10 @@ import expressStaticGzip from 'express-static-gzip';
 import http, { type Server } from 'http';
 import cors from 'cors';
 import serverTiming from 'server-timing';
-import { extname, resolve } from 'path';
+import { extname } from 'node:path';
 
 // import utils
-import { publicDir, srcDir } from './setup/index.js';
+import { publicDir, srcDir, srcFiles } from './setup/index.js';
 import { environment, isProduction, updateRouterPrefix } from './externals.js';
 import { ONTIME_VERSION } from './ONTIME_VERSION.js';
 import { consoleSuccess, consoleHighlight, consoleError } from './utils/console.js';
@@ -53,8 +53,14 @@ if (!canLog) {
   console.log(`Ontime public directory at ${publicDir.root} `);
 }
 
-// calls an update to the client router prefix
-updateRouterPrefix();
+/**
+ * When running in Ontime cloud, the client is not at the root segment
+ * ie: https://cloud.getontime.com/client-hash/timer
+ * This means:
+ * - changing the base path in the index.html file
+ * - prepending all express routes with the given prefix
+ */
+const prefix = updateRouterPrefix();
 
 // Create express APP
 const app = express();
@@ -75,20 +81,20 @@ app.use(express.urlencoded({ extended: true }));
 app.use(express.json({ limit: '1mb' }));
 
 // Implement route endpoints
-app.use('/data', appRouter); // router for application data
-app.use('/api', integrationRouter); // router for integrations
+app.use(`${prefix}/data`, appRouter); // router for application data
+app.use(`${prefix}/api`, integrationRouter); // router for integrations
 
 // serve static external files
-app.use('/external', express.static(publicDir.externalDir));
-app.use('/user', express.static(publicDir.userDir));
-
-// if the user reaches to the root, we show a 404
-app.use('/external', (req, res) => {
+app.use(`${prefix}/external`, express.static(publicDir.externalDir));
+app.use(`${prefix}/external`, (req, res) => {
+  // if the user reaches to the root, we show a 404
   res.status(404).send(`${req.originalUrl} not found`);
 });
+app.use(`${prefix}/user`, express.static(publicDir.userDir));
 
 // serve static - react, in dev/test mode we fetch the React app from module
 app.use(
+  prefix,
   expressStaticGzip(srcDir.clientDir, {
     enableBrotli: true,
     orderPreference: ['br'],
@@ -111,8 +117,8 @@ app.use(
   }),
 );
 
-app.get('*', (_req, res) => {
-  res.sendFile(resolve(srcDir.clientDir, 'index.html'));
+app.get(`${prefix}/*`, (_req, res) => {
+  res.sendFile(srcFiles.clientIndexHtml);
 });
 
 // Implement catch all
@@ -176,7 +182,7 @@ export const startServer = async (
   const { serverPort } = getDataProvider().getSettings();
 
   expressServer = http.createServer(app);
-  socket.init(expressServer);
+  socket.init(expressServer, prefix);
 
   /**
    * Module initialises the services and provides initial payload for the store
@@ -221,10 +227,10 @@ export const startServer = async (
 
   expressServer.listen(serverPort, '0.0.0.0', () => {
     const nif = getNetworkInterfaces();
-    consoleSuccess(`Local: http://localhost:${serverPort}/editor`);
+    consoleSuccess(`Local: http://localhost:${serverPort}${prefix}/editor`);
     for (const key in nif) {
       const address = nif[key].address;
-      consoleSuccess(`Network: http://${address}:${serverPort}/editor`);
+      consoleSuccess(`Network: http://${address}:${serverPort}${prefix}/editor`);
     }
   });
 

apps/server/src/externals.ts

@@ -3,7 +3,8 @@
  */
 
 import { readFileSync, writeFileSync } from 'node:fs';
-import { resolve } from 'node:path';
+
+import { srcFiles } from './setup/index.js';
 
 // =================================================
 // resolve running environment
@@ -19,19 +20,20 @@ export const isProduction = isDocker || (env === 'production' && !isTest);
  * This is only needed in the cloud environment where the client is not at the root segment
  * ie: https://cloud.getontime.com/client-hash/timer
  */
-export function updateRouterPrefix(prefix: string | undefined = process.env.ROUTER_PREFIX) {
+export function updateRouterPrefix(prefix: string | undefined = process.env.ROUTER_PREFIX): string {
   if (!prefix) {
-    return;
+    return '';
   }
 
-  const indexFile = resolve('.', 'client', 'index.html');
   try {
-    const data = readFileSync(indexFile, { encoding: 'utf-8', flag: 'r' }).replace(
-      /<base href="[^"]*">/g,
-      `<base href="${prefix}" />`,
+    const data = readFileSync(srcFiles.clientIndexHtml, { encoding: 'utf-8', flag: 'r' }).replace(
+      '<base href="/" />',
+      `<base href="/${prefix}/" />`,
     );
-    writeFileSync(indexFile, data, { encoding: 'utf-8', flag: 'w' });
+    writeFileSync(srcFiles.clientIndexHtml, data, { encoding: 'utf-8', flag: 'w' });
   } catch (_error) {
     /** unhandled */
   }
+
+  return `/${prefix}`;
 }

apps/server/src/setup/index.ts

@@ -77,6 +77,8 @@ export const srcDir = {
 } as const;
 
 export const srcFiles = {
+  /** Path to start index.html */
+  clientIndexHtml: join(srcDir.clientDir, 'index.html'),
   /** Path to bundled CSS  */
   cssOverride: join(srcDir.root, config.user, config.styles.directory, config.styles.filename),
   /** Path to bundled external readme */