[OGUI-1939] Add Vite dev server and HMR integration

InfoLogger/README.md

@@ -106,7 +106,7 @@ Run `npm run docker:cleanup` to remove all containers created by the above and t
 
 Sources live in [src/](src/) and are bundled by [Vite](https://vite.dev/) ([vite.config.mjs](vite.config.mjs)). A lightweight MVC app on top of `@aliceo2/web-ui`.
 
-- **Build & serving** - `npm run build` bundles the frontend into `dist/`, which [index.js](index.js) serves (`npm run mocha` builds first).
+- **Build & serving** - With `NODE_ENV=development` (set by `npm run start:dev` and the docker compose files), [index.js](index.js) serves the frontend through Vite middleware, with hot module reload over a WebSocket on port `5173`. Otherwise it serves the bundle from `dist/`, produced by `npm run build` (`npm run mocha` builds first).
 - **App shell** - [index.html](index.html) bootstraps [src/index.js](src/index.js), which mounts the top-level [Model](src/Model.js) and renders [view.js](src/view.js).
 - **Sub-models** - [log/Log.js](src/log/Log.js) drives the log table (rendering in `tableLogs*.js`, inspector, status bar, context menu, zoom, etc.). [logFilter/LogFilter.js](src/logFilter/LogFilter.js) owns the filter inputs. [table/Table.js](src/table/Table.js) holds shared table state.
 - **Supporting code** - [services/](src/services/), [constants/](src/constants/), [common/](src/common/), [about/](src/about/) (about component).

InfoLogger/docker-compose.dev.yaml

@@ -11,6 +11,7 @@ services:
 
     ports:
       - "8080:8080"
+      - "5173:5173" # Vite HMR WS
 
     volumes:
       - type: bind
@@ -41,3 +42,8 @@ services:
         read_only: true
         source: ./index.js
         target: /home/node/app/index.js
+        # Use the local Framework source to allow edits from it to come through before it gets released
+      - type: bind
+        read_only: true
+        source: ../Framework
+        target: /home/node/app/node_modules/@aliceo2/web-ui

InfoLogger/docker-compose.test.yaml

@@ -6,5 +6,9 @@ services:
 
     restart: "no"
 
-    environment:
-      NODE_ENV: development
+    volumes:
+      # Use the local Framework source to allow edits from it to come through before it gets released
+      - type: bind
+        read_only: true
+        source: ../Framework
+        target: /home/node/app/node_modules/@aliceo2/web-ui

InfoLogger/index.js

@@ -21,20 +21,47 @@ const api = require('./lib/api.js');
 
 // -------------------------------------------------------
 
-// Start server HTTP and bind WebSocket to it
-const http = new HttpServer(config.http, config.jwt, config.openId);
+const isDev = process.env.NODE_ENV === 'development';
+const VITE_HMR_PORT = 5173;
+
+// Start server HTTP and bind WebSocket to it; the HMR port is only allowed in CSP during development
+const http = new HttpServer({
+  ...config.http,
+  ...isDev && { extraConnectSrc: [`ws://${config.http.hostname ?? 'localhost'}:${VITE_HMR_PORT}`] },
+}, config.jwt, config.openId);
 const ws = new WebSocket(http);
 
 const logger = LogManager.getLogger(`${process.env.npm_config_log_label ?? 'ilg'}/index`);
 
 // Expose application to /
-const distPath = path.join(__dirname, 'dist');
-if (!fs.existsSync(distPath)) {
-  logger.errorMessage(`Frontend build not found at ${distPath}, run "npm run build" first`);
-} else {
-  logger.infoMessage(`Serving frontend files from ${distPath}`);
-}
-http.addStaticPath(distPath);
-
-// Attach services to web server
-api.attachTo(http, ws);
+const start = async () => {
+  if (isDev) {
+    logger.infoMessage(`Serving frontend files through Vite middleware, HMR on port ${VITE_HMR_PORT}`);
+    const { createServer } = require('vite');
+
+    const vite = await createServer({
+      server: { middlewareMode: true, hmr: { port: VITE_HMR_PORT } },
+      appType: 'mpa',
+    });
+
+    // Vite ends unmatched requests with 404, so API calls must skip it
+    http.routerStatics.use((req, res, next) =>
+      req.path.startsWith('/api/') ? next() : vite.middlewares(req, res, next));
+  } else {
+    const distPath = path.join(__dirname, 'dist');
+    if (!fs.existsSync(distPath)) {
+      logger.errorMessage(`Frontend build not found at ${distPath}, run "npm run build" first`);
+    } else {
+      logger.infoMessage(`Serving frontend files from ${distPath}`);
+    }
+    http.addStaticPath(distPath);
+  }
+
+  // Attach services to web server
+  api.attachTo(http, ws);
+};
+
+start().catch((error) => {
+  logger.errorMessage(`Failed to start InfoLogger GUI: ${error.message}`);
+  process.exit(1);
+});