Merge pull request #2236 from dominikvagner/add-dev-proxy

feat(config): add new dev-proxy cmd to fec bin

Author: Hyperkid123

packages/config/README.md

@@ -30,6 +30,7 @@
 - [fec node scripts](#fec-node-scripts)
   - [Usage](#usage-1)
   - [Patch etc hosts](#patch-etc-hosts)
+  - [Dev proxy](#dev-proxy)
   - [Static](#static)
     - [Inventory example](#inventory-example)
     - [In inventory UI repository changes](#in-inventory-ui-repository-changes)
@@ -380,6 +381,52 @@ Use binary in your `package.json` scripts section:
 ## Patch etc hosts
 This is a required step for first time setup. It will allow your localhost to map to [env].foo.redhat.com. This is required to run only once on your machine. **Your OS may require running the script as sudo**!
 
+## Dev proxy
+
+A script that starts up a complete development environment with webpack build, static asset serving and a containerized development proxy for environment proxying.
+This command provides an alternative to the traditional webpack dev server approach by using a customized Caddy server container to handle proxy routing, which should be more reliable and faster due to HTTP2 support and better websocket handling.
+The used containerized proxy and its documentation can be found in this repo: [frontend-development-proxy](https://github.com/RedHatInsights/frontend-development-proxy).
+
+**Usage:**
+```bash
+fec dev-proxy [options]
+```
+
+**Options:**
+- `--port, -p`: Proxy server port (default: 1337)
+- `--staticPort, -sp`: Static assets server port (default: 8003)
+- `--clouddotEnv`: Set platform environment ('stage', 'prod', 'dev', 'ephemeral')
+
+**Requirements:**
+- Docker or Podman installed and available
+- Valid FEC configuration file (fec.config.js)
+- Network access to Red Hat proxy services (for stage environments)
+
+**Example:**
+```bash
+# Start development proxy on default ports
+fec dev-proxy
+
+# Start with custom port and target stage environment
+fec dev-proxy --port 3000 --clouddotEnv stage
+
+# Start with custom static assets port
+fec dev-proxy --staticPort 9000
+```
+
+The command will:
+1. Pull and start the development proxy container
+2. Start webpack in watch mode to build your assets
+3. Serve static assets via http-server
+4. Configure routing based on your FEC config (configuration is the same as for the dev command, [Custom routes](#custom-routes))
+5. Start a local Chrome UI server _(this can be disabled by setting `SPAFallback` var to `false` in the FEC config)_
+6. Display the development URL when ready
+
+Your application will be available at `https://[env].foo.redhat.com:[port]` where `[env]` is determined by your configuration or the `--clouddotEnv` flag.
+
+**Limitations:**
+This command currently doesn't work in DinD environments. The new proxy can still be used there when launched manually with different network settings for running alongside frontends started with the static command. [1](https://github.com/RedHatInsights/frontend-development-proxy?tab=readme-ov-file#dind-docker-in-docker-ci)
+
 ## Static
 
 A script that will run webpack build and serve webpack output through `http-serve` server. **This is not supposed to replace webpack dev server!**

packages/config/src/bin/common.ts

@@ -1,4 +1,7 @@
-import { LogType, fecLogger } from '@redhat-cloud-services/frontend-components-config-utilities';
+import inquirer from 'inquirer';
+import { FrontendCRD } from '@redhat-cloud-services/frontend-components-config-utilities/feo/feo-types';
+import { fecLogger, LogType } from '@redhat-cloud-services/frontend-components-config-utilities';
+import { hasFEOFeaturesEnabled, readFrontendCRD } from '@redhat-cloud-services/frontend-components-config-utilities/feo/crd-check';
 
 const { resolve } = require('path');
 const { statSync } = require('fs');
@@ -45,5 +48,63 @@ export function getWebpackConfigPath(path: string, cwd: string) {
   }
 }
 
+export async function setEnv(cwd: string) {
+  return inquirer
+    .prompt([
+      {
+        type: 'list',
+        name: 'clouddotEnv',
+        message: 'Which platform environment you want to use?',
+        choices: ['stage', 'prod', 'dev', 'ephemeral'],
+      },
+    ])
+    .then(async (answers) => {
+      const { clouddotEnv } = answers;
+
+      if (clouddotEnv === 'ephemeral') {
+        const answer = await inquirer.prompt([
+          {
+            type: 'input',
+            name: 'clouddotEnv',
+            message: 'Please provide the gateway route of your ephemeral environment:',
+          },
+        ]);
+        process.env.EPHEMERAL_TARGET = answer.clouddotEnv;
+      }
+      process.env.CLOUDOT_ENV = clouddotEnv ? clouddotEnv : 'stage';
+      process.env.FEC_ROOT_DIR = cwd;
+    });
+}
+
+export function getCdnPath(fecConfig: any, webpackConfig: any, cwd: string): string {
+  let cdnPath: string;
+  const { insights } = require(`${cwd}/package.json`);
+  const frontendCRDPath = fecConfig.frontendCRDPath ?? `${cwd}/deploy/frontend.yaml`;
+  const frontendCRDRef: { current?: FrontendCRD } = { current: undefined };
+  let FEOFeaturesEnabled = false;
+
+  try {
+    frontendCRDRef.current = readFrontendCRD(frontendCRDPath);
+    FEOFeaturesEnabled = hasFEOFeaturesEnabled(frontendCRDRef.current);
+  } catch (e) {
+    fecLogger(
+      LogType.warn,
+      `FEO features are not enabled. Unable to find frontend CRD file at ${frontendCRDPath}. If you want FEO features for local development, make sure to have a "deploy/frontend.yaml" file in your project or specify its location via "frontendCRDPath" attribute.`,
+    );
+  }
+
+  if (FEOFeaturesEnabled && fecConfig.publicPath === 'auto' && frontendCRDRef.current) {
+    cdnPath = `${frontendCRDRef.current?.objects[0]?.spec.frontend.paths[0]}/`.replace(/\/\//, '/');
+  } else if (fecConfig.publicPath === 'auto') {
+    cdnPath = `/${fecConfig.deployment || 'apps'}/${insights.appname}/`;
+  } else {
+    cdnPath = webpackConfig.output.publicPath;
+  }
+
+  return cdnPath ?? '';
+}
+
 module.exports.validateFECConfig = validateFECConfig;
 module.exports.getWebpackConfigPath = getWebpackConfigPath;
+module.exports.setEnv = setEnv;
+module.exports.getCdnPath = getCdnPath;