feat(config-utils): enable webpack public path auto setting

Author: Hyperkid123

packages/config-utils/src/feo/feo-types.ts

@@ -125,6 +125,9 @@ export type CRDObject = {
     serviceTiles?: ServiceTile[];
     widgetRegistry?: ChromeWidgetEntry[];
     feoConfigEnabled?: boolean;
+    frontend: {
+      paths: string[];
+    };
   };
 };
 

packages/config-utils/src/feo/module-interceptor.test.ts

@@ -14,6 +14,9 @@ describe('module-interceptor', () => {
             name: moduleName,
           },
           spec: {
+            frontend: {
+              paths: ['/'],
+            },
             module: newEntry,
           },
         },
@@ -44,6 +47,9 @@ describe('module-interceptor', () => {
             name: moduleName,
           },
           spec: {
+            frontend: {
+              paths: ['/'],
+            },
             module: newEntry,
           },
         },

packages/config-utils/src/feo/navigation-interceptor.test.ts

@@ -19,6 +19,9 @@ describe('NavigationInterceptor', () => {
               name: frontendName,
             },
             spec: {
+              frontend: {
+                paths: ['/'],
+              },
               module: {
                 manifestLocation: 'http://localhost:3000/manifest.json',
               },
@@ -207,6 +210,9 @@ describe('NavigationInterceptor', () => {
               name: defaultFrontendName,
             },
             spec: {
+              frontend: {
+                paths: ['/'],
+              },
               module: {
                 manifestLocation: 'http://localhost:3000/manifest.json',
               },
@@ -275,6 +281,9 @@ describe('NavigationInterceptor', () => {
               name: defaultFrontendName,
             },
             spec: {
+              frontend: {
+                paths: ['/'],
+              },
               module: {
                 manifestLocation: 'http://localhost:3000/manifest.json',
               },
@@ -367,6 +376,9 @@ describe('NavigationInterceptor', () => {
               name: defaultFrontendName,
             },
             spec: {
+              frontend: {
+                paths: ['/'],
+              },
               module: {
                 manifestLocation: 'http://localhost:3000/manifest.json',
               },
@@ -433,6 +445,9 @@ describe('NavigationInterceptor', () => {
               name: defaultFrontendName,
             },
             spec: {
+              frontend: {
+                paths: ['/'],
+              },
               module: {
                 manifestLocation: 'http://localhost:3000/manifest.json',
               },
@@ -500,6 +515,9 @@ describe('NavigationInterceptor', () => {
               name: frontendName,
             },
             spec: {
+              frontend: {
+                paths: ['/'],
+              },
               module: {
                 manifestLocation: 'http://localhost:3000/manifest.json',
               },

packages/config-utils/src/feo/search-interceptor.test.ts

@@ -11,6 +11,9 @@ describe('SearchInterceptor', () => {
             name: frontendName,
           },
           spec: {
+            frontend: {
+              paths: ['/'],
+            },
             module: {
               manifestLocation: 'location',
             },

packages/config-utils/src/feo/service-tiles-interceptor.test.ts

@@ -11,6 +11,9 @@ describe('Service tiles interceptor', () => {
             name: frontendName,
           },
           spec: {
+            frontend: {
+              paths: ['/'],
+            },
             module: {
               manifestLocation: 'location',
             },

packages/config-utils/src/feo/spec/frontend-crd.schema.json

@@ -51,7 +51,8 @@
           "items": {
             "type": "string"
           },
-          "minItems": 1
+          "minItems": 1,
+          "maxItems": 1
         }
       },
       "required": [

packages/config-utils/src/feo/validate-frontend-crd.test.ts

@@ -93,4 +93,10 @@ describe('Validate FrontEnd CRD', () => {
       `Frontend CRD validation failed! must NOT have additional properties, must NOT have additional properties, must match exactly one schema in oneOf`
     );
   });
+
+  test('should only allow one frontend.paths entry', () => {
+    const crd = cloneDeep(crdBase) as FrontendCRD;
+    crd.objects[0].spec.frontend.paths = ['/foo/bar', '/baz'];
+    expect(() => validateFrontEndCrd(crd)).toThrowError(`must NOT have more than 1 items`);
+  });
 });

packages/config-utils/src/feo/widget-registry-interceptor.test.ts

@@ -16,6 +16,9 @@ describe('Widget registry interceptor', () => {
             name: 'name',
           },
           spec: {
+            frontend: {
+              paths: ['/'],
+            },
             module: {
               manifestLocation: 'location',
             },

packages/config-utils/src/serve-federated.ts

@@ -1,6 +1,9 @@
 import path from 'path';
 import fs from 'fs';
 import concurrently from 'concurrently';
+import { hasFEOFeaturesEnabled, readFrontendCRD } from './feo/crd-check';
+import { FrontendCRD } from './feo/feo-types';
+import { LogType, fecLogger } from '.';
 
 function federate(argv: Record<string, any>, cwd: string) {
   let configPath: string = argv.config || './node_modules/@redhat-cloud-services/frontend-components-config/bin/prod.webpack.config.js';
@@ -12,20 +15,45 @@ function federate(argv: Record<string, any>, cwd: string) {
   }
 
   configPath = path.join(cwd, configPath);
+  const fecConfig = require(process.env.FEC_CONFIG_PATH!);
+  const { insights } = require(`${cwd}/package.json`);
+  const frontendCRDPath = fecConfig.frontendCRDPath ?? path.resolve(process.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.`
+    );
+  }
   try {
     fs.statSync(configPath);
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     let config = require(configPath);
     if (typeof config === 'function') {
       config = config(process.env);
     }
+    // take the CDN path from the config or generate it based on the deployment
+    let cdnPath: string;
+    // Could be written on a single line, but this is nice and readable
+    if (FEOFeaturesEnabled && fecConfig.publicPath === 'auto' && frontendCrdRef.current) {
+      // All service should eventually use this path
+      cdnPath = `${frontendCrdRef.current?.objects[0]?.spec.frontend.paths[0]}/`.replace(/\/\//, '/');
+    } else if (fecConfig.publicPath === 'auto') {
+      cdnPath = `/${fecConfig.deployment || 'apps'}/${insights.appname}/`;
+    } else {
+      cdnPath = config.output.publicPath;
+    }
 
     Promise.resolve(config).then((config) => {
       const outputPath = config.output.path;
 
       concurrently([
-        `${WEBPACK_PATH} --config ${configPath} --watch --output-path ${path.join(outputPath, config.output.publicPath)}`,
+        `${WEBPACK_PATH} --config ${configPath} --watch --output-path ${path.join(outputPath, cdnPath)}`,
         `${HTTP_SERVER_PATH} ${outputPath} -p ${argv.port || 8003} -c-1 -a :: --cors=*`,
       ]);
     });