feat: unlock changing port in UI (#476)

* refactor: unlock changing port in UI

* Change server port (#464)

* Ability to save custom port

* Launch server on custom port & pass that port to electron

* Add serverPort validation

* Prevent changing port in docker

---------

Co-authored-by: Snehanshu Phukon <snehanshu@mamboemm.com>

---------

Co-authored-by: স্নেহাংশু ফুকন <hello@snehanshu.com>
Co-authored-by: Snehanshu Phukon <snehanshu@mamboemm.com>

apps/electron/electron.config.js

@@ -3,13 +3,13 @@ module.exports = {
     shutdownCode: 99,
   },
   reactAppUrl: {
-    development: 'http://localhost:3000/editor',
-    production: 'http://localhost:4001/editor',
+    development: (port = 4001) => `http://localhost:${port}/editor`,
+    production: (port = 4001) => `http://localhost:${port}/editor`,
   },
   server: {
-    pathToEntrypoint: '../extraResources/server/index.cjs'
+    pathToEntrypoint: '../extraResources/server/index.cjs',
   },
   assets: {
     pathToAssets: './assets/',
-  }
+  },
 };

apps/electron/main.js

@@ -30,21 +30,23 @@ let splash;
 let tray = null;
 
 async function startBackend() {
-  await (async () => {
-    // in dev mode, we expect both UI and server to be running
-    if (!isProduction) {
-      return;
-    }
+  // in dev mode, we expect both UI and server to be running
+  if (!isProduction) {
+    return;
+  }
 
-    const ontimeServer = require(nodePath);
-    const { initAssets, startServer, startOSCServer, startIntegrations } = ontimeServer;
+  const ontimeServer = require(nodePath);
+  const { initAssets, startServer, startOSCServer, startIntegrations } = ontimeServer;
 
-    await initAssets();
+  await initAssets();
 
-    loaded = await startServer();
-    await startOSCServer();
-    await startIntegrations();
-  })();
+  const result = await startServer();
+  loaded = result.message;
+
+  await startOSCServer();
+  await startIntegrations();
+
+  return result.serverPort;
 }
 
 /**
@@ -155,9 +157,11 @@ app.whenReady().then(() => {
   });
 
   startBackend()
-    .then(() => {
+    .then((port) => {
       // Load page served by node or use React dev run
-      const clientUrl = isProduction ? electronConfig.reactAppUrl.production : electronConfig.reactAppUrl.development;
+      const clientUrl = isProduction
+        ? electronConfig.reactAppUrl.production(port)
+        : electronConfig.reactAppUrl.development(port);
 
       win
         .loadURL(clientUrl)