[OGUI-1933] Bundle ILG frontend with Vite and serve dist

InfoLogger/.dockerignore

@@ -5,7 +5,10 @@
 !lib/
 !package*.json
 !public/
+!src/
+!index.html
 !index.js
+!vite.config.mjs
 !test/
 !eslint.config.js
 !config.js

InfoLogger/.gitignore

@@ -7,5 +7,6 @@ node_modules
 coverage*
 db.json
 testdb.json
+dist
 
 error.log

InfoLogger/.npmignore

@@ -0,0 +1,11 @@
+config.js
+*~
+.DS_Store
+cert/*
+node_modules
+.nyc*
+coverage*
+db.json
+testdb.json
+
+error.log

InfoLogger/README.md

@@ -104,12 +104,14 @@ Run `npm run docker:cleanup` to remove all containers created by the above and t
 
 ## Frontend
 
-Static files served from [public/](public/); no build step. A lightweight MVC app on top of `@aliceo2/web-ui`.
-
-- **App shell** - [index.html](public/index.html) bootstraps [index.js](public/index.js), which mounts the top-level [Model](public/Model.js) and renders [view.js](public/view.js).
-- **Sub-models** - [log/Log.js](public/log/Log.js) drives the log table (rendering in `tableLogs*.js`, inspector, status bar, context menu, zoom, etc.). [logFilter/LogFilter.js](public/logFilter/LogFilter.js) owns the filter inputs. [table/Table.js](public/table/Table.js) holds shared table state.
-- **Supporting code** - [services/](public/services/), [constants/](public/constants/), [common/](public/common/), [about/](public/about/) (about component).
-- **Styles** - [app.css](public/app.css), layered on the framework's [bootstrap.css](../Framework/Frontend/css/src/bootstrap.css).
+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).
+- **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).
+- **Styles** - [app.css](src/app.css), layered on the framework's [bootstrap.css](../Framework/Frontend/css/src/bootstrap.css).
+- **Static assets** - [public/](public/) holds files copied as-is into the bundle (vendored `moment` / `moment-timezone`).
 
 ## Local Development
 

InfoLogger/docker-compose.dev.yaml

@@ -21,6 +21,18 @@ services:
         read_only: true
         source: ./public
         target: /home/node/app/public
+      - type: bind
+        read_only: true
+        source: ./src
+        target: /home/node/app/src
+      - type: bind
+        read_only: true
+        source: ./index.html
+        target: /home/node/app/index.html
+      - type: bind
+        read_only: true
+        source: ./vite.config.mjs
+        target: /home/node/app/vite.config.mjs
       - type: bind
         read_only: true
         source: ./config.js

InfoLogger/eslint.config.js

@@ -25,6 +25,7 @@ module.exports = [
       'tmp/',
       '.nyc_output/',
       'coverage/',
+      'dist/',
       'docker/database/',
     ],
   },

InfoLogger/public/index.html → InfoLogger/index.html

@@ -2,7 +2,8 @@
 <title>InfoLogger - Alice O2 UI</title>
 <meta name="description" content="InfoLogger interface of Alice O2">
 <link rel="stylesheet" href="/css/src/bootstrap.css">
-<link rel="stylesheet" href="/app.css">
+<link rel="stylesheet" href="/src/app.css">
+<link rel="modulepreload" href="/mithril/mithril.min.js">
 
 <body class="scroll-off">
   <!-- This loader will be replaced by the web app when is loaded and renders -->
@@ -19,6 +20,6 @@
   </div>
 </body>
 
-<script src="./common/moment.js"></script>
-<script src="./common/moment-timezone.js"></script>
-<script src="./index.js" type="module"></script>
+<script src="/moment.js"></script>
+<script src="/moment-timezone.js"></script>
+<script src="./src/index.js" type="module"></script>

InfoLogger/index.js

@@ -12,8 +12,9 @@
  * or submit itself to any jurisdiction.
  */
 
+const fs = require('fs');
 const path = require('path');
-const { HttpServer, WebSocket } = require('@aliceo2/web-ui');
+const { HttpServer, WebSocket, LogManager } = require('@aliceo2/web-ui');
 
 const config = require('./lib/configProvider.js');
 const api = require('./lib/api.js');
@@ -24,8 +25,16 @@ const api = require('./lib/api.js');
 const http = new HttpServer(config.http, config.jwt, config.openId);
 const ws = new WebSocket(http);
 
+const logger = LogManager.getLogger(`${process.env.npm_config_log_label ?? 'ilg'}/index`);
+
 // Expose application to /
-http.addStaticPath(path.join(__dirname, 'public'));
+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);