config: Replace webpack configs with FEC config

This migrates from previously used webpack configs to one fec.config.js.

This will allow us to bump `frontend-components-config` dependency to version 6.x and stay supported in the future.

.gitignore

@@ -12,6 +12,9 @@ node_modules
 # production
 dist
 
+# cache
+.cache
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

config/devel.webpack.config.js

@@ -1,40 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { resolve } = require('path');
-
-const config = require('@redhat-cloud-services/frontend-components-config');
-
-const { config: webpackConfig, plugins } = config({
-  rootFolder: resolve(__dirname, '../'),
-  debug: true,
-  useFileHash: false,
-  sassPrefix: '.imageBuilder',
-  deployment: 'beta/apps',
-  appUrl: '/preview/insights/image-builder',
-  env: 'stage-beta',
-  useProxy: true,
-  useAgent: true,
-  bounceProd: false,
-  proxyVerbose: true,
-  routes: {
-    '/api/image-builder/v1': { host: 'http://localhost:8086' },
-  },
-});
-
-plugins.push(
-  require('@redhat-cloud-services/frontend-components-config/federated-modules')(
-    {
-      root: resolve(__dirname, '../'),
-      useFileHash: false,
-      exposes: {
-        './RootApp': resolve(__dirname, '../src/AppEntry.tsx'),
-      },
-      shared: [{ 'react-router-dom': { singleton: true } }],
-      exclude: ['react-router-dom'],
-    }
-  )
-);
-
-module.exports = {
-  ...webpackConfig,
-  plugins,
-};

config/prod.webpack.config.js

@@ -1,26 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { resolve } = require('path');
-
-const config = require('@redhat-cloud-services/frontend-components-config');
-const { config: webpackConfig, plugins } = config({
-  rootFolder: resolve(__dirname, '../'),
-  sassPrefix: '.imageBuilder',
-});
-
-plugins.push(
-  require('@redhat-cloud-services/frontend-components-config/federated-modules')(
-    {
-      root: resolve(__dirname, '../'),
-      exposes: {
-        './RootApp': resolve(__dirname, '../src/AppEntry.tsx'),
-      },
-      shared: [{ 'react-router-dom': { singleton: true } }],
-      exclude: ['react-router-dom'],
-    }
-  )
-);
-
-module.exports = {
-  ...webpackConfig,
-  plugins,
-};

fec.config.js

@@ -1,66 +1,10 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const { resolve } = require('path');
+const path = require('path');
 
-const config = require('@redhat-cloud-services/frontend-components-config');
 const CopyPlugin = require('copy-webpack-plugin');
 const webpack = require('webpack');
 
-const webpackProxy = {
+const plugins = [];
-  useProxy: true,
-  proxyVerbose: true,
-  env: `${process.env.STAGE ? 'stage' : 'prod'}-${
-    process.env.BETA ? 'beta' : 'stable'
-  }`,
-  appUrl: [
-    '/insights/image-builder',
-    '/beta/insights/image-builder',
-    '/preview/insights/image-builder',
-  ],
-  routes: {
-    ...(process.env.CONFIG_PORT && {
-      [`${process.env.BETA ? '/beta' : ''}/config`]: {
-        host: `http://localhost:${process.env.CONFIG_PORT}`,
-      },
-    }),
-    ...(process.env.LOCAL_API && {
-      ...(process.env.LOCAL_API.split(',') || []).reduce((acc, curr) => {
-        const [appName, appConfig] = (curr || '').split(':');
-        const [appPort = 8003, protocol = 'http', host = 'localhost'] =
-          appConfig.split('~');
-        return {
-          ...acc,
-          [`/apps/${appName}`]: { host: `${protocol}://${host}:${appPort}` },
-          [`/beta/apps/${appName}`]: {
-            host: `${protocol}://${host}:${appPort}`,
-          },
-        };
-      }, {}),
-    }),
-  },
-};
-
-const { config: webpackConfig, plugins } = config({
-  rootFolder: resolve(__dirname, '../'),
-  debug: true,
-  useFileHash: false,
-  sassPrefix: '.imageBuilder',
-  deployment: process.env.BETA ? 'beta/apps' : 'apps',
-  ...(process.env.PROXY ? webpackProxy : {}),
-});
-
-plugins.push(
-  require('@redhat-cloud-services/frontend-components-config/federated-modules')(
-    {
-      root: resolve(__dirname, '../'),
-      useFileHash: false,
-      exposes: {
-        './RootApp': resolve(__dirname, '../src/AppEntry.tsx'),
-      },
-      shared: [{ 'react-router-dom': { singleton: true } }],
-      exclude: ['react-router-dom'],
-    }
-  )
-);
 
 if (process.env.MSW) {
   // Copy mockServiceWorker.js to ./dist/ so it is served with the bundle
@@ -72,19 +16,6 @@ if (process.env.MSW) {
     })
   );
 
-  /*
-  mockServiceWorker.js will be served from /beta/apps/image-builder, which
-  will become its default scope. Setting the Service-Worker-Allowed header to
-  '/' allows the worker's scope to be expanded to the root route '/'.
-
-  The default webpackConfig for stage does not contain any headers.
-
-  Caution: The default webpackConfig for prod *does* contain headers, so this
-  code will need to be modified if using MSW in prod-beta or prod-stable so that
-  those headers are not overwritten.
-  */
-  webpackConfig.devServer.headers = { 'Service-Worker-Allowed': '/' };
-
   /*
   We would like the client to be able to determine whether or not to start
   the service worker at run time based on the value of process.env.MSW. We can
@@ -108,6 +39,55 @@ if (process.env.MSW) {
 }
 
 module.exports = {
-  ...webpackConfig,
+  sassPrefix: '.imageBuilder',
-  plugins,
+  debug: true,
+  useFileHash: false,
+  /*
+  mockServiceWorker.js will be served from /beta/apps/image-builder, which
+  will become its default scope. Setting the Service-Worker-Allowed header to
+  '/' allows the worker's scope to be expanded to the root route '/'.
+
+  The default webpackConfig for stage does not contain any headers.
+
+  Caution: The default webpackConfig for prod *does* contain headers, so this
+  code will need to be modified if using MSW in prod-beta or prod-stable so that
+  those headers are not overwritten.
+  */
+  devServer: process.env.MSW && {
+    headers: { 'Service-Worker-Allowed': '/' },
+  },
+  appUrl: '/insights/image-builder',
+  useProxy: true,
+  useAgent: true,
+  bounceProd: false,
+  proxyVerbose: true,
+  routes: {
+    ...(process.env.CONFIG_PORT && {
+      [`${process.env.BETA ? '/beta' : ''}/config`]: {
+        host: `http://localhost:${process.env.CONFIG_PORT}`,
+      },
+    }),
+    ...(process.env.LOCAL_API && {
+      ...(process.env.LOCAL_API.split(',') || []).reduce((acc, curr) => {
+        const [appName, appConfig] = (curr || '').split(':');
+        const [appPort = 8003, protocol = 'http', host = 'localhost'] =
+          appConfig.split('~');
+        return {
+          ...acc,
+          [`/apps/${appName}`]: { host: `${protocol}://${host}:${appPort}` },
+          [`/beta/apps/${appName}`]: {
+            host: `${protocol}://${host}:${appPort}`,
+          },
+        };
+      }, {}),
+    }),
+  },
+  plugins: plugins,
+  moduleFederation: {
+    exposes: {
+      './RootApp': path.resolve(__dirname, './src/AppEntry.tsx'),
+    },
+    shared: [{ 'react-router-dom': { singleton: true, version: '*' } }],
+    exclude: ['react-router-dom'],
+  },
 };

package.json

@@ -36,7 +36,8 @@
     "@babel/preset-typescript": "7.24.7",
     "@patternfly/react-icons": "5.3.2",
     "@redhat-cloud-services/eslint-config-redhat-cloud-services": "2.0.4",
-    "@redhat-cloud-services/frontend-components-config": "5.0.5",
+    "@redhat-cloud-services/frontend-components-config": "6.0.16",
+    "@redhat-cloud-services/tsc-transform-imports": "1.0.11",
     "@rtk-query/codegen-openapi": "1.2.0",
     "@testing-library/dom": "10.3.2",
     "@testing-library/jest-dom": "6.4.6",
@@ -79,6 +80,7 @@
     "stylelint": "15.11.0",
     "stylelint-config-recommended-scss": "13.1.0",
     "ts-node": "10.9.2",
+    "ts-patch": "3.2.0",
     "typescript": "5.5.3",
     "uuid": "10.0.0",
     "vitest": "1.6.0",
@@ -88,23 +90,20 @@
   },
   "scripts": {
     "lint": "npm-run-all lint:*",
-    "lint:js": "eslint config src",
+    "lint:js": "eslint src",
-    "lint:js:fix": "eslint config src --fix",
+    "lint:js:fix": "eslint src --fix",
     "lint:sass": "stylelint 'src/**/*.scss' --config .stylelintrc.json",
-    "devel": "webpack serve --config config/devel.webpack.config.js",
+    "start": "fec dev",
-    "prod-beta": "BETA=true PROXY=true webpack serve --config config/dev.webpack.config.js",
+    "start:msw": "MSW=TRUE fec dev",
-    "prod-stable": "PROXY=true webpack serve --config config/dev.webpack.config.js",
-    "stage-stable": "STAGE=true npm run prod-stable",
-    "stage-beta": "STAGE=true npm run prod-beta",
-    "stage-beta:msw": "MSW=TRUE npm run stage-beta",
     "test": "TZ=UTC vitest run",
     "test:watch": "TZ=UTC vitest",
     "test:coverage": "TZ=UTC vitest run --coverage",
-    "build": "webpack --config config/prod.webpack.config.js",
+    "build": "fec build",
     "api": "npm-run-all api:pull api:generate",
     "api:generate": "bash api/codegen.sh",
     "api:pull": "bash api/pull.sh",
-    "verify": "npm-run-all build lint test"
+    "verify": "npm-run-all build lint test",
+    "postinstall": "ts-patch install"
   },
   "insights": {
     "appname": "image-builder"