Merge pull request #2190 from Hyperkid123/enable-public-path-auto

Enable public path auto

Author: Hyperkid123

package-lock.json

@@ -155,7 +155,7 @@ const ConditionalFilter: React.FunctionComponent<ConditionalFilterProps> = ({
       const C = typeMapper.custom;
       // make sure no invalid props are passed to the Fragment element which is mapped to the custom component
       const { key, children } = activeItem.filterValues;
-      return <C key={key} children={children} />;
+      return <C key={key}>{children}</C>;
     } else {
       throw new Error(`Invalid conditional filter component type! Expected one of ${Object.keys(conditionalFilterType)}, got ${activeItem.type}.`);
     }

packages/components/src/ConditionalFilter/ConditionalFilter.tsx

@@ -27,7 +27,7 @@
   "scripts": {},
   "dependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@redhat-cloud-services/frontend-components-config-utilities": "^4.1.6",
+    "@redhat-cloud-services/frontend-components-config-utilities": "^4.2.0",
     "@redhat-cloud-services/tsc-transform-imports": "^1.0.21",
     "@swc/core": "^1.3.76",
     "assert": "^2.0.0",

packages/config/package.json

@@ -17,6 +17,11 @@ export function validateFECConfig(cwd: string) {
     fecLogger(LogType.error, 'Missing config "appUrl" in fec.config.js');
     throw 'fec.config.js validation failed, missing "appUrl" config';
   }
+
+  if (config.publicPath && config.publicPath !== 'auto') {
+    fecLogger(LogType.error, 'Invalid config "publicPath" in fec.config.js, must be empty or set to "auto"');
+    throw 'fec.config.js validation failed, "publicPath" must be empty or set to "auto"';
+  }
   process.env.FEC_CONFIG_PATH = configPath;
 }
 

packages/config/src/bin/common.ts

@@ -10,7 +10,6 @@ describe('should create dummy config with no options', () => {
     appEntry: '/foo/bar',
     appName: 'Fooapp',
     env: 'stage-stable',
-    publicPath: 'foo/bar',
     frontendCRDPath: crdMockPath,
   });
 
@@ -35,7 +34,6 @@ describe('should create dummy config with no options', () => {
     expect(output).toEqual({
       filename: expect.stringMatching(/js\/\[name\]\.\[contenthash\]\.js/),
       path: '/dist',
-      publicPath: 'foo/bar',
       chunkFilename: expect.stringMatching(/js\/\[name\]\.\[contenthash\]\.js/),
     });
   });
@@ -95,10 +93,13 @@ test('appEntry correctly set', () => {
 });
 
 describe('publicPath', () => {
-  const { output } = configBuilder({ publicPath: 'test-value' });
-
-  test('output', () => {
-    expect(output.publicPath).toBe('test-value');
+  test('should ignore unknown public path', () => {
+    const { output } = configBuilder({ publicPath: 'test-value' });
+    expect(output.publicPath).toBe(undefined);
+  });
+  test('should propagate public path auto', () => {
+    const { output } = configBuilder({ publicPath: 'auto' });
+    expect(output.publicPath).toBe('auto');
   });
 });
 

packages/config/src/lib/config.test.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const fs = require('fs');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 import searchIgnoredStyles from '@redhat-cloud-services/frontend-components-config-utilities/search-ignored-styles';
 
@@ -22,7 +21,8 @@ export interface CommonConfigOptions {
 export type FrontendEnv = 'stage-stable' | 'prod-stable';
 export interface CreateConfigOptions extends CommonConfigOptions {
   port?: number;
-  publicPath: string;
+  publicPath?: 'auto';
+  cdnPath: string;
   appEntry: string;
   https?: boolean;
   mode?: Configuration['mode'];
@@ -61,6 +61,7 @@ export interface CreateConfigOptions extends CommonConfigOptions {
 
 export const createConfig = ({
   port,
+  cdnPath,
   publicPath,
   appEntry,
   rootFolder,
@@ -114,15 +115,6 @@ export const createConfig = ({
 
   const outputPath = `${rootFolder || ''}/dist`;
 
-  const copyTemplate = (chromePath: string) => {
-    const template = fs.readFileSync(`${chromePath}/index.html`, { encoding: 'utf-8' });
-    if (!fs.existsSync(outputPath)) {
-      fs.mkdirSync(outputPath);
-    }
-
-    fs.writeFileSync(`${outputPath}/index.html`, template);
-  };
-
   const devServerPort = typeof port === 'number' ? port : useProxy || standalone ? 1337 : 8002;
   return {
     mode: mode || (isProd ? 'production' : 'development'),
@@ -150,7 +142,7 @@ export const createConfig = ({
     output: {
       filename: filenameMask,
       path: outputPath,
-      publicPath,
+      publicPath: publicPath === 'auto' ? publicPath : cdnPath,
       chunkFilename: filenameMask,
     },
     ...(internalHotReload
@@ -299,6 +291,7 @@ export const createConfig = ({
         },
         devMiddleware: {
           writeToDisk: true,
+          publicPath: cdnPath,
         },
         client,
         ...proxy({
@@ -314,7 +307,7 @@ export const createConfig = ({
           port: devServerPort,
           reposDir,
           appUrl,
-          publicPath,
+          publicPath: cdnPath,
           proxyVerbose,
           target,
           registry,

packages/config/src/lib/createConfig.ts

@@ -1,6 +1,9 @@
 import { LogType, fecLogger } from '@redhat-cloud-services/frontend-components-config-utilities';
+import path from 'path';
 import createConfig, { CreateConfigOptions } from './createConfig';
 import createPlugins, { CreatePluginsOptions } from './createPlugins';
+import { hasFEOFeaturesEnabled, readFrontendCRD } from '@redhat-cloud-services/frontend-components-config-utilities/feo/crd-check';
+import { FrontendCRD } from '@redhat-cloud-services/frontend-components-config-utilities/feo/feo-types';
 const { sync } = require('glob');
 export * from './createConfig';
 export * from './createPlugins';
@@ -29,12 +32,13 @@ const getAppEntry = (rootFolder: string, isProd?: boolean) => {
   return `${rootFolder}/${entries[0]}`;
 };
 
-type FecConfigurationOptions = Omit<CreateConfigOptions, 'publicPath' | 'appEntry' | 'appName'> &
-  CreatePluginsOptions & {
+type FecConfigurationOptions = Omit<CreateConfigOptions, 'publicPath' | 'appEntry' | 'appName' | 'cdnPath'> &
+  Omit<CreatePluginsOptions, 'cdnPath'> & {
     deployment?: string;
     debug?: boolean;
     appEntry?: string;
     blockLegacyChrome?: boolean;
+    publicPath?: 'auto';
   };
 
 const createFecConfig = (
@@ -54,8 +58,27 @@ const createFecConfig = (
     gitBranch = 'main';
   }
   const appDeployment = typeof configurations.deployment === 'string' ? configurations.deployment : configurations.deployment || 'apps';
+  const { frontendCRDPath = path.resolve(configurations.rootFolder, 'deploy/frontend.yaml') } = configurations;
 
-  const publicPath = `/${appDeployment}/${insights.appname}/`;
+  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.`
+    );
+  }
+  let cdnPath: string;
+  // Could be written on a single line, but this is nice and readable
+  if (FEOFeaturesEnabled && configurations.publicPath === 'auto' && frontendCrdRef.current) {
+    // All service should eventually use this path
+    cdnPath = `${frontendCrdRef.current?.objects[0]?.spec.frontend.paths[0]}/`.replace(/\/\//, '/');
+  } else {
+    cdnPath = `/${appDeployment}/${insights.appname}/`;
+  }
   const appEntry = configurations.appEntry || getAppEntry(configurations.rootFolder, isProd);
   const generateSourceMaps = !isProd;
 
@@ -66,7 +89,7 @@ const createFecConfig = (
     fecLogger(LogType.debug, `Current branch: ${gitBranch}`);
     !generateSourceMaps && fecLogger(LogType.debug, `Source map generation for "${gitBranch}" deployment has been disabled.`);
     fecLogger(LogType.debug, `Using deployments: ${appDeployment}`);
-    fecLogger(LogType.debug, `Public path: ${publicPath}`);
+    fecLogger(LogType.debug, `CDN path: ${cdnPath}`);
     fecLogger(LogType.debug, `App entry: ${appEntry}`);
     fecLogger(LogType.debug, `Use proxy: ${configurations.useProxy ? 'true' : 'false'}`);
     if (!(configurations.useProxy || configurations.standalone)) {
@@ -81,7 +104,8 @@ const createFecConfig = (
   return {
     config: createConfig({
       ...configurations,
-      publicPath,
+      cdnPath,
+      publicPath: configurations.publicPath,
       appEntry,
       appName: insights.appname,
     }),