Configurable root path for serving the client

README.md

@@ -98,6 +98,11 @@ When running Sisyfos you can define the log level by setting the environment var
 -   debug (info level plus: data send and received from Audiomixer)
 -   trace (debug level plus: data send and received from Automation protocol)
 
+### Serve client on a different path:
+
+When running Sisyfos you can change the root path from the default of `/` to another value by setting the environment variable `ROOT_PATH`.
+
+
 ### Open GUI in browser:
 
 ```

client/index.tsx

@@ -44,7 +44,12 @@ const unsubscribe = window.storeRedux.subscribe(() => {
     window.reduxState = window.storeRedux.getState()
 })
 
-window.socketIoClient = io()
+const { pathname } = window.location
+const socketServerPath =
+    pathname + (pathname.endsWith('/') ? '' : '/') + 'socket.io/'
+window.socketIoClient = io({
+    path: socketServerPath,
+})
 window.socketIoClient.emit(SOCKET_GET_SNAPSHOT_LIST)
 window.socketIoClient.emit(SOCKET_GET_CCG_LIST)
 window.socketIoClient.emit(SOCKET_GET_MIXER_PRESET_LIST)

server/src/expressHandler.ts

@@ -5,18 +5,23 @@ import express from 'express'
 import path from 'path'
 import { Server } from 'http'
 import { Server as SocketServer } from 'socket.io'
+const ROOT_PATH = process.env.ROOT_PATH ?? '/'
+const SOCKET_SERVER_PATH =
+    ROOT_PATH + (ROOT_PATH.endsWith('/') ? '' : '/') + 'socket.io/'
 const app = express()
 const server = new Server(app)
-const socketServer = new SocketServer(server)
+const socketServer = new SocketServer(server, {
+    path: SOCKET_SERVER_PATH,
+})
 const SERVER_PORT = 1176
 const staticPath = path.join(
     path.dirname(require.resolve('client/package.json')),
     'dist'
 )
 logger.data(staticPath).debug('Express static file path:')
-app.use('/', express.static(staticPath))
+app.use(ROOT_PATH, express.static(staticPath))
 server.listen(SERVER_PORT)
-logger.info(`Server started at http://localhost:${SERVER_PORT}`)
+logger.info(`Server started at http://localhost:${SERVER_PORT}/${ROOT_PATH}`)
 
 socketServer.on('connection', (socket: any) => {
     logger.info(`Client connected: ${socket.client.id}`)