Development server - handle also the manifests.js file request

web/src/DevServerWrapper.jsx

@@ -116,8 +116,9 @@ export default function DevServerWrapper({ children }) {
  // handle updating the iframe with the login form
  const onFrameLoad = () => {
  const passwordInput = iframeRef.current.contentWindow.document.getElementById(loginId);
- // if there is no password field displayed then the user has authenticated successfully
- if (!passwordInput) setIsAuthenticated(true);
+ // reload the window so the manifests.js file referenced from the
+ // index.html file is also loaded again
+ if (!passwordInput) window.location.reload();
  };
 
  return <iframe ref={iframeRef} onLoad={onFrameLoad} src={loginPath} className="full-size" />;

web/src/lib/webpack-manifests-handler.js

@@ -0,0 +1,48 @@
+const fs = require("fs");
+const path = require("path");
+
+const manifestFile = path.join(__dirname, "..", "manifest.json");
+
+// this function is injected as a string into the resulting JS file
+const updateAgamaManifest = (data) => {
+ if (typeof cockpit === "object" && cockpit.manifests) {
+ cockpit.manifests.agama = data;
+ }
+};
+
+// This function processes the webpack HTTP proxy request for manifests.js file.
+//
+// Patching the original JS code is difficult so rather inject code
+// which rewrites the Agama manifest data with new content.
+//
+// @see https://github.com/http-party/node-http-proxy#modify-response
+//
+// @param proxyRes HTTP proxy resource
+// @param req HTTP request
+// @param res HTTP response
+module.exports = function (proxyRes, req, res) {
+ // collect parts of the original response
+ const body = [];
+
+ proxyRes.on("data", function (chunk) {
+ body.push(chunk);
+ });
+
+ proxyRes.on("end", function () {
+ // forward the original status code
+ res.statusCode = proxyRes.statusCode;
+
+ // patch the response only on success otherwise there
+ // might be some unexpected content (HTML error page)
+ if (proxyRes.statusCode === 200 && fs.existsSync(manifestFile)) {
+ const manifest = fs.readFileSync(manifestFile);
+ // use an immediately-invoked function expression to inject the new
+ // manifest content
+ res.end(Buffer.concat(body).toString() + "((" +
+ updateAgamaManifest.toString() + ")(" + manifest + "));");
+ } else {
+ // otherwise just return the original content
+ res.end(Buffer.concat(body).toString());
+ }
+ });
+};

web/webpack.config.js

@@ -15,6 +15,7 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const webpack = require('webpack');
 const po_handler = require("./src/lib/webpack-po-handler");
+const manifests_handler = require("./src/lib/webpack-manifests-handler");
 
 /* A standard nodejs and webpack pattern */
 const production = process.env.NODE_ENV === 'production';
@@ -100,15 +101,25 @@ module.exports = {
  externals: { cockpit: "cockpit" },
  devServer: {
  hot: true,
- // forward all cockpit connections to a real Cockpit instance
  proxy: {
+ // forward all cockpit connections to a real Cockpit instance
  "/cockpit": {
  target: cockpitTarget,
  // redirect also the websocket connections
  ws: true,
  // ignore SSL problems (self-signed certificate)
  secure: false,
  },
+ // forward the manifests.js request and patch the response with the
+ // current Agama manifest from the ./src/manifest.json file
+ "/manifests.js": {
+ target: cockpitTarget + "/cockpit/@localhost/",
+ // ignore SSL problems (self-signed certificate)
+ secure: false,
+ // the response is modified by the onProxyRes handler
+ selfHandleResponse : true,
+ onProxyRes: manifests_handler,
+ },
  },
  // use https so Cockpit uses wss:// when connecting to the backend
  server: "https",
@@ -118,7 +129,7 @@ module.exports = {
 
  // Cockpit handles the "po.js" requests specially
  setupMiddlewares: (middlewares, devServer) => {
- devServer.app.get("/po.js", (req, res) => po_handler(req, res));
+ devServer.app.get("/po.js", po_handler);
  return middlewares;
  }
  },