feat(proxy): Add local app route feature (#1776)

Author: bastilian

packages/config-utils/proxy.js

@@ -16,6 +16,68 @@ const { registerChrome } = require('./standalone/services/default/chrome');
 
 const defaultReposDir = path.join(__dirname, 'repos');
 
+const checkLocalAppHost = (appName, hostUrl, port) => {
+  const check = execSync(`curl --max-time 5 --silent --head ${hostUrl} | awk '/^HTTP/{print $2}'`).toString().trim();
+
+  if (check !== '200') {
+    console.error('\n' + appName[0].toUpperCase() + appName.substring(1) + ' is not running or available via ' + hostUrl);
+    console.log(
+      '\nMake sure to run `npm run start -- --port=' +
+        port +
+        '` in the ' +
+        appName +
+        " application directory to start it's webpack dev server and the bundle is built.\n"
+    );
+
+    return false;
+  } else {
+    return true;
+  }
+};
+
+const buildRoutes = (routes, target) =>
+  Object.entries(routes || {}).map(([route, redirect]) => {
+    const currTarget = redirect.host || redirect;
+    delete redirect.host;
+    return {
+      context: (path) => path.includes(route),
+      target: currTarget === 'PORTAL_BACKEND_MARKER' ? target : currTarget,
+      secure: false,
+      changeOrigin: true,
+      autoRewrite: true,
+      ws: true,
+      onProxyReq: cookieTransform,
+      ...(currTarget === 'PORTAL_BACKEND_MARKER' && { router }),
+      ...(typeof redirect === 'object' ? redirect : {}),
+    };
+  });
+
+const buildLocalAppRoutes = (localApps, defaultLocalAppHost, target) =>
+  buildRoutes(
+    (!Array.isArray(localApps) ? localApps.split(',') : localApps).reduce((acc, curr) => {
+      const [appName, appConfig] = (curr || '').split(':');
+      const [appPort = 8003, protocol = 'http'] = appConfig.split('~');
+      const appUrl = `${protocol}://${defaultLocalAppHost}:${appPort}`;
+
+      if (checkLocalAppHost(appName, appUrl, appPort)) {
+        console.log('Creating app proxy routes for: ' + appName + ' to ' + appUrl);
+
+        return {
+          ...acc,
+          [`/apps/${appName}`]: {
+            host: appUrl,
+          },
+          [`/preview/apps/${appName}`]: {
+            host: appUrl,
+          },
+        };
+      } else {
+        process.exit();
+      }
+    }, {}),
+    target
+  );
+
 module.exports = ({
   env = 'ci-beta',
   customProxy = [],
@@ -39,9 +101,12 @@ module.exports = ({
   bounceProd = false,
   useAgent = true,
   useDevBuild = true,
+  localApps = process.env.LOCAL_APPS,
 }) => {
   const proxy = [];
   const majorEnv = env.split('-')[0];
+  const defaultLocalAppHost = process.env.LOCAL_APP_HOST || majorEnv + '.foo.redhat.com';
+
   if (target === '') {
     target += 'https://';
     if (!['prod', 'stage'].includes(majorEnv)) {
@@ -86,24 +151,11 @@ module.exports = ({
 
   if (routes) {
     routes = routes.routes || routes;
-    console.log('Making proxy from SPANDX routes');
-    proxy.push(
-      ...Object.entries(routes || {}).map(([route, redirect]) => {
-        const currTarget = redirect.host || redirect;
-        delete redirect.host;
-        return {
-          context: (path) => path.includes(route),
-          target: currTarget === 'PORTAL_BACKEND_MARKER' ? target : currTarget,
-          secure: false,
-          changeOrigin: true,
-          autoRewrite: true,
-          ws: true,
-          onProxyReq: cookieTransform,
-          ...(currTarget === 'PORTAL_BACKEND_MARKER' && { router }),
-          ...(typeof redirect === 'object' ? redirect : {}),
-        };
-      })
-    );
+    proxy.push(...buildRoutes(routes, target));
+  }
+
+  if (localApps?.length > 0) {
+    proxy.push(...buildLocalAppRoutes(localApps, defaultLocalAppHost, target));
   }
 
   if (customProxy) {

packages/config/README.md

@@ -197,6 +197,24 @@ const { config: webpackConfig, plugins } = config({
 
 This configuration will redirect all API requests to QA environment, so you can check CI UI with QA data.
 
+#### Running multiple local (frontend) applications
+
+With the proxy enabled it is possible to run multiple frontend applications together using one proxy and webpack dev servers for each other application via passing a `LOCAL_APPS` variable.
+
+```
+$ LOCAL_APPS=APP_NAME:APP_PORT[~APP_PROTOCOL] npm run start:proxy
+```
+
+##### Steps to run multiple applications
+
+1) Choose a "main application", which will run the proxy and proxy all other applications, for example Inventory and open a terminal in it's directory
+2) Open another terminal in any other application that you want to run with the Inventory, for example Advisor and start it's webpack dev server with `npm run start`
+3) Ensure the dev server is started and make not of it's addresses and port it is listening to. (This example assumes it runs on port `8002`)
+3.1) You can repeat this process for any application you want to run the Inventory with.
+4) With this information now, in the terminal for Inventory you can start the proxy and pass applications via the `LOCAL_APPS` variable, like `LOCAL_APPS=advisor:2002 npm run start:proxy`
+4.1) You can pass multiple applications as a comma separated list, like `LOCAL_APPS=advisor:8002,compliance:8003 npm run start:proxy`
+5) With this you should be able to see any changes in both Inventroy and Advisor via the usual `https://stage.foo.redhat.com:1337`.
+
 #### Env
 A hyphenated string in the form of (qa|ci|stage|prod)-(stable|beta). Used to determine the proxy target (such as ci.console.redhat.com or console.stage.redhat.com) and branch to checkout of build repos. If "stage" is specific qa is used as the branch.