@nebula.js/cli-serve 8.0.0-alpha.2 → 8.0.0-alpha.3

package/lib/https.js

@@ -0,0 +1,40 @@
+import fs from 'fs';
+import path from 'path';
+import { homedir } from 'os';
+
+export const getCertificatePaths = (home = homedir()) => ({
+  keyPath: path.join(home, '.certs/key.pem'),
+  certPath: path.join(home, '.certs/cert.pem'),
+});
+
+/**
+ * Serve over https when asked for and over http when asked not to. When it is not asked for either way, https is used
+ * if the certificates are installed, as they are on a development machine, and http is used if they are not, as on a CI
+ * runner.
+ * @param {object} options
+ * @param {boolean} [options.https] `--https` or `--no-https`
+ * @returns {{ https: boolean, reason: string, keyPath: string, certPath: string }} `reason` tells why it is served as it is
+ */
+export const resolveHttps = ({ https, paths = getCertificatePaths(), exists = fs.existsSync } = {}) => {
+  const { keyPath, certPath } = paths;
+  const installed = exists(keyPath) && exists(certPath);
+
+  if (https === true && !installed) {
+    const missing = !exists(keyPath) ? `key cert at path ${keyPath}` : `cert at path ${certPath}`;
+    throw new Error(`Failed to start using HTTPS. Missing ${missing}, install certificates or use --no-https`);
+  }
+
+  const dir = path.dirname(keyPath);
+  let reason;
+  if (https === true) {
+    reason = 'asked for with the https option';
+  } else if (https === false) {
+    reason = 'turned off with the https option, as with --no-https';
+  } else if (installed) {
+    reason = `certificates found in ${dir}`;
+  } else {
+    reason = `no certificates in ${dir}, install them to serve over https`;
+  }
+
+  return { https: https ?? installed, reason, keyPath, certPath };
+};

package/lib/init-config.js

@@ -34,6 +34,7 @@ const options = {
     default: 'localhost',
   },
   port: {
+    alias: 'p',
     type: 'number',
     description: 'Specify a port number to listen for requests on',
   },
@@ -82,11 +83,6 @@ const options = {
     description: 'Path to a folder that will be used as basis when locating fixtures',
     default: 'test/component',
   },
-  mfe: {
-    type: 'boolean',
-    description: 'Serves bundle to use in micro frontend',
-    default: false,
-  },
   open: {
     type: 'boolean',
     description: 'Opens browser on serving nebula',
@@ -94,8 +90,8 @@ const options = {
   },
   https: {
     type: 'boolean',
-    description: 'Uses https protocol, requires certificates',
-    default: false,
+    description:
+      'Uses https protocol, requires certificates. Without --https or --no-https, https is used when the certificates are installed',
   },
 };
 

package/lib/rsbuild.serve.js

@@ -3,7 +3,6 @@ import path from 'path';
 import fs from 'fs';
 import http from 'http';
 import https from 'https';
-import { homedir } from 'os';
 import { fileURLToPath } from 'url';
 import chalk from 'chalk';
 import express from 'express';
@@ -11,12 +10,9 @@ import { createRsbuild } from '@rsbuild/core';
 
 import snapshooterFn from './snapshot-server.js';
 import snapshotRouter from './snapshot-router.js';
+import { resolveHttps } from './https.js';
 
 const moduleDir = path.dirname(fileURLToPath(import.meta.url));
-const homeDir = homedir();
-
-const httpsKeyPath = path.join(homeDir, '.certs/key.pem');
-const httpsCertPath = path.join(homeDir, '.certs/cert.pem');
 
 const HEADERS = {
   'Access-Control-Allow-Credentials': 'true',
@@ -71,23 +67,15 @@ export default async ({
   webIntegrationId,
   snName,
   snUrl,
+  snModule,
   pages = publishedPages,
   open = true,
   entryWatcher,
   serveConfig,
 }) => {
-  const HTTPS = serveConfig.mfe || serveConfig.https;
+  const { https: HTTPS, reason: httpsReason, keyPath, certPath } = resolveHttps({ https: serveConfig.https });
   const url = `${HTTPS ? 'https' : 'http'}://${host}:${port}`;
 
-  if (HTTPS) {
-    if (!fs.existsSync(httpsKeyPath)) {
-      throw new Error(`Failed to start using HTTPS. Missing key cert at path ${httpsKeyPath}`);
-    }
-    if (!fs.existsSync(httpsCertPath)) {
-      throw new Error(`Failed to start using HTTPS. Missing cert at path ${httpsCertPath}`);
-    }
-  }
-
   const snapshotRoute = '/njs';
 
   const snapshooter = snapshooterFn({ snapshotUrl: `${url}/eRender.html` });
@@ -156,6 +144,7 @@ export default async ({
       supernova: {
         name: snName,
         url: snUrl,
+        module: snModule,
       },
       sock: {
         port: entryWatcher && entryWatcher.port,
@@ -189,38 +178,36 @@ export default async ({
         port,
         allowedHosts: disableHostCheck ? true : undefined,
         headers: HEADERS,
-        open: Boolean(open && !serveConfig.mfe),
-        // Disable the pages of nebula serve in MFE mode, it only serves the bundle
-        publicDir: serveConfig.mfe ? false : { name: contentBase, copyOnBuild: false },
+        open: Boolean(open),
+        publicDir: { name: contentBase, copyOnBuild: false },
         proxy: {
           '/render': {
             target: `${url}/eRender.html`,
             ignorePath: true,
+            // the server calls itself, and the local certificate is not one that node trusts
+            secure: false,
           },
         },
       },
     },
   });
 
-  // in MFE mode there is nothing to build, the bundle of the visualization is built by nebula build
-  const devServer = await rsbuild.createDevServer({ runCompile: !serveConfig.mfe, getPortSilently: true });
+  const devServer = await rsbuild.createDevServer({ getPortSilently: true });
   app.use(devServer.middlewares);
 
-  if (!serveConfig.mfe) {
-    // The hub is served for all paths that ask for a page: @qlik/api detects the authorization code of the OAuth2
-    // callback at /auth/login/callback in the URL, to complete the token exchange in the page
-    app.use((req, res, next) => {
-      if (req.method === 'GET' && !path.extname(req.path) && req.accepts('html')) {
-        // the folder is the root, a path with a segment that starts with a dot, such as .pnpm, is not sent otherwise
-        res.sendFile('index.html', { root: contentBase });
-      } else {
-        next();
-      }
-    });
-  }
+  // The hub is served for all paths that ask for a page: @qlik/api detects the authorization code of the OAuth2
+  // callback at /auth/login/callback in the URL, to complete the token exchange in the page
+  app.use((req, res, next) => {
+    if (req.method === 'GET' && !path.extname(req.path) && req.accepts('html')) {
+      // the folder is the root, a path with a segment that starts with a dot, such as .pnpm, is not sent otherwise
+      res.sendFile('index.html', { root: contentBase });
+    } else {
+      next();
+    }
+  });
 
   const httpServer = HTTPS
-    ? https.createServer({ key: fs.readFileSync(httpsKeyPath), cert: fs.readFileSync(httpsCertPath) }, app)
+    ? https.createServer({ key: fs.readFileSync(keyPath), cert: fs.readFileSync(certPath) }, app)
     : http.createServer(app);
 
   const close = async () => {
@@ -235,15 +222,8 @@ export default async ({
   const started = () => {
     console.log(styledBanner());
 
-    if (serveConfig.mfe) {
-      const bundleUrl = `${url}/pkg/${encodeURIComponent(snName)}`;
-      console.log('Development server running in MFE mode');
-      console.log(`Bundle served at ${chalk.green(bundleUrl)}`);
-      console.log('');
-      console.log('Use the bundle when overriding the import map');
-    } else {
-      console.log(`Development server running at ${chalk.green(url)}`);
-    }
+    console.log(`Development server running at ${chalk.green(url)}`);
+    console.log(`Protocol: ${chalk.green(HTTPS ? 'https' : 'http')}, ${httpsReason}`);
 
     return { context: '', url, close };
   };
@@ -265,17 +245,12 @@ export default async ({
       }
     };
 
-    if (!serveConfig.mfe) {
-      rsbuild.onDevCompileDone(({ stats }) => start(stats));
-    }
+    rsbuild.onDevCompileDone(({ stats }) => start(stats));
 
     httpServer.on('error', reject);
     httpServer.listen(port, host, async () => {
       devServer.connectWebSocket({ server: httpServer });
       await devServer.afterListen();
-      if (serveConfig.mfe) {
-        start();
-      }
     });
   });
 };

package/lib/serve.js

@@ -7,6 +7,7 @@ import extend from 'extend';
 import yargs from 'yargs';
 import { WebSocketServer } from 'ws';
 import chokidar from 'chokidar';
+import express from 'express';
 import build from '@nebula.js/cli-build';
 
 import initConfig from './init-config.js';
@@ -15,15 +16,15 @@ import rsbuildServe from './rsbuild.serve.js';
 
 const require = createRequire(import.meta.url);
 
-const initiateWatch = async ({ snPath, snName, host }) => {
+// The files of nebula build are served by their file names, from the root, as the modules import their chunks and are
+// imported by their source maps relative to their own urls.
+export const getModuleUrl = (file) => `/${path.basename(file)}`;
+
+// `snPath` is the es module of the visualization and `systemPath` the systemjs module of it
+export const initiateWatch = async ({ snPath, snName, host, systemPath }) => {
   if (!snPath) {
     return null;
   }
-  // TODO - timeout
-  let onInitiated;
-  const done = new Promise((resolve) => {
-    onInitiated = resolve;
-  });
 
   const wsPort = await portfinder.getPortPromise({ port: 5001, host });
 
@@ -37,10 +38,6 @@ const initiateWatch = async ({ snPath, snName, host }) => {
     disableGlobbing: true,
   });
 
-  choker.on('add', () => {
-    onInitiated();
-  });
-
   choker.on('change', () => {
     [...ws.clients].forEach((client) => {
       client.send(
@@ -51,46 +48,11 @@ const initiateWatch = async ({ snPath, snName, host }) => {
     });
   });
 
-  const cache = {};
-
   return {
     addRoutes(app, options) {
-      app.get('/pkg/:name', async (req, res) => {
-        const { name } = req.params;
-        await done;
-
-        let file;
-        if (cache[name]) {
-          file = cache[name];
-        } else if (name === snName) {
-          file = snPath;
-        } else if (/\.map$/.test(name)) {
-          const sources = Object.keys(cache);
-          for (let i = 0; i < sources.length; i++) {
-            const p = cache[sources[i]];
-            const filename = path.basename(p);
-            if (`${filename}.map` === name) {
-              file = path.resolve(path.dirname(p), name);
-              break;
-            }
-          }
-        } else {
-          file = require.resolve(name, {
-            paths: [process.cwd()],
-          });
-        }
-
-        cache[name] = file;
-
-        if (fs.existsSync(file)) {
-          const f = fs.readFileSync(file);
-          res.set(options.headers);
-          // a module script is only run when the type of it is javascript
-          res.type(/\.map$/.test(file) ? 'application/json' : 'text/javascript');
-          res.send(f);
-        } else {
-          res.sendStatus('404');
-        }
+      // the directories that nebula build writes to, which are not served by their names
+      [...new Set([snPath, systemPath].filter(Boolean).map((file) => path.dirname(file)))].forEach((dir) => {
+        app.use(express.static(dir, { index: false, setHeaders: (res) => res.set(options.headers) }));
       });
     },
     async close() {
@@ -121,6 +83,8 @@ export default async (argv, { pages } = {}) => {
   let snName;
   let watcher;
   let snUrl;
+  let systemPath;
+  const watchers = [];
   if (/^https?/.test(serveConfig.entry)) {
     snName = 'remote';
     snUrl = serveConfig.entry;
@@ -139,25 +103,34 @@ export default async (argv, { pages } = {}) => {
   }
 
   if (runFromDirectory) {
+    let externalPkg = {};
+    try {
+      externalPkg = require(path.resolve(context, 'package.json'));
+    } catch (e) {
+      //
+    }
+    // the web app loads the es module, the micro frontend tooling loads the systemjs module, so both are served
+    const formats = ['esm', ...(externalPkg.systemjs ? ['systemjs'] : [])];
     if (serveConfig.build !== false) {
-      watcher = await build({
-        watch: serveConfig.mfe ? 'systemjs' : 'esm',
-        external: provided,
-        config: serveConfig.config,
-        cwd: context,
-      });
+      // the formats of one package are built one after the other, to keep the output of the builds apart
+      await formats.reduce(async (previous, format) => {
+        await previous;
+        watchers.push(await build({ watch: format, external: provided, config: serveConfig.config, cwd: context }));
+      }, Promise.resolve());
+      // build({ watch }) has no watcher when the build is not possible
+      watcher = { close: () => Promise.all(watchers.map((w) => w && w.close())) };
     }
-    try {
-      const externalPkg = require(path.resolve(context, 'package.json'));
-      const externalEntry = serveConfig.mfe ? externalPkg.systemjs : externalPkg.module;
+    const externalEntry = externalPkg.module;
+    if (externalEntry) {
       snName = externalPkg.name;
       snPath = path.resolve(context, externalEntry);
-    } catch (e) {
-      //
+    }
+    if (externalPkg.systemjs) {
+      systemPath = path.resolve(context, externalPkg.systemjs);
     }
   }
 
-  const ww = snUrl ? null : await initiateWatch({ snPath, snName: serveConfig.type || snName, host });
+  const ww = snUrl ? null : await initiateWatch({ snPath, snName: serveConfig.type || snName, host, systemPath });
 
   const server = await rsbuildServe({
     host,
@@ -168,12 +141,18 @@ export default async (argv, { pages } = {}) => {
     webIntegrationId: serveConfig.webIntegrationId,
     snName: serveConfig.type || snName,
     snUrl,
+    snModule: ww ? getModuleUrl(snPath) : undefined,
     pages,
-    open: serveConfig.open !== false && !serveConfig.mfe,
+    open: serveConfig.open !== false,
     entryWatcher: ww,
     serveConfig,
   });
 
+  if (systemPath) {
+    console.log(`SystemJS module served at ${server.url}${getModuleUrl(systemPath)}`);
+    console.log(`ES module served at ${server.url}${getModuleUrl(snPath)}`);
+  }
+
   const close = async () => {
     if (watcher) {
       watcher.close();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebula.js/cli-serve",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "",
   "type": "module",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "node": ">=24.0.0"
   },
   "dependencies": {
-    "@nebula.js/cli-build": "8.0.0-alpha.2",
+    "@nebula.js/cli-build": "8.0.0-alpha.3",
     "@qlik/api": "2.21.0",
     "@rsbuild/core": "^2.3.1",
     "body-parser": "2.4.0",
@@ -48,11 +48,11 @@
   "devDependencies": {
     "@mui/material": "^7.3.11",
     "@mui/system": "^7.3.11",
-    "@nebula.js/enigma-mocker": "8.0.0-alpha.2",
-    "@nebula.js/nucleus": "8.0.0-alpha.2",
-    "@nebula.js/snapshooter": "8.0.0-alpha.2",
-    "@nebula.js/stardust": "8.0.0-alpha.2",
-    "@nebula.js/ui": "8.0.0-alpha.2",
+    "@nebula.js/enigma-mocker": "8.0.0-alpha.3",
+    "@nebula.js/nucleus": "8.0.0-alpha.3",
+    "@nebula.js/snapshooter": "8.0.0-alpha.3",
+    "@nebula.js/stardust": "8.0.0-alpha.3",
+    "@nebula.js/ui": "8.0.0-alpha.3",
     "@playwright/test": "^1.64.1",
     "@qlik/browserslist-config": "3.1.0",
     "@testing-library/dom": "^10.4.2",
@@ -73,6 +73,7 @@
     "build": "cross-env NODE_ENV=production rsbuild build --config ./rsbuild.config.mjs",
     "build:dev": "cross-env NODE_ENV=development rsbuild build --config ./rsbuild.config.mjs",
     "lint": "eslint web",
-    "start": "node dev.js"
+    "start": "node dev.js",
+    "test": "node --test test/*.test.js"
   }
 }