Allow spdy to be used as webpack dev server.

packages/config/package.json

@@ -29,21 +29,21 @@
         "watch": "tsc -w"
     },
     "dependencies": {
-        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
-        "@redhat-cloud-services/frontend-components-config-utilities": "^3.2.2",
-        "@redhat-cloud-services/tsc-transform-imports": "^1.0.12",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+        "@redhat-cloud-services/frontend-components-config-utilities": "^3.2.3",
+        "@redhat-cloud-services/tsc-transform-imports": "^1.0.16",
         "@swc/core": "^1.3.76",
         "assert": "^2.0.0",
         "axios": "^0.28.1 || ^1.7.0",
         "browserify-zlib": "^0.2.0",
         "buffer": "^6.0.3",
         "chalk": "^4.1.2",
-        "clean-webpack-plugin": "^3.0.0",
+        "clean-webpack-plugin": "^4.0.0",
         "concurrently": "^7.4.0",
         "css-loader": "^5.2.7",
         "express": "^4.19.2",
-        "fork-ts-checker-webpack-plugin": "^7.2.13",
-        "git-revision-webpack-plugin": "^3.0.6",
+        "fork-ts-checker-webpack-plugin": "^9.0.2",
+        "git-revision-webpack-plugin": "^5.0.0",
         "glob": "^7.2.3",
         "html-replace-webpack-plugin": "^2.6.0",
         "html-webpack-plugin": "^5.5.0",
@@ -67,9 +67,9 @@
         "url": "^0.11.0",
         "util": "^0.12.4",
         "wait-on": "^7.2.0",
-        "webpack": "^5.88.0",
+        "webpack": "^5.95.0",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "4.15.1",
+        "webpack-dev-server": "5.1.0",
         "yargs": "^17.6.2"
     },
     "devDependencies": {

packages/config/src/bin/dev-script.ts

@@ -140,6 +140,7 @@ async function devScript(
       });
     }
   } catch (error) {
+    console.error('Error:', error);
     process.exit(1);
   }
 }

packages/config/src/bin/dev.webpack.config.ts

@@ -69,6 +69,13 @@ const devConfig: Configuration = {
   ...webpackConfig,
   plugins,
 };
+// @ts-ignore
+if (devConfig.devServer?.onBeforeSetupMiddleware) {
+  // This is no longer required due to the usage of container. In case a old config utilities package is still installed, the option has to be removed.
+  // the proxy was updated to use the new setup middleware callback
+  // @ts-ignore
+  delete devConfig.devServer?.onBeforeSetupMiddleware;
+}
 
 module.exports = devConfig;
 export default devConfig;

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

@@ -44,7 +44,7 @@ describe('should create dummy config with no options', () => {
       static: {
         directory: '/dist',
       },
-      https: false,
+      server: 'https',
       host: '0.0.0.0',
       port: 8002,
       hot: false,
@@ -109,7 +109,7 @@ describe('port', () => {
 
 test('https', () => {
   const { devServer } = configBuilder({ https: true });
-  expect(devServer.https).toBe(true);
+  expect(devServer.server).toBe('https');
 });
 
 test('noFileHash', () => {

packages/config/src/lib/createConfig.ts

@@ -54,14 +54,15 @@ export interface CreateConfigOptions extends CommonConfigOptions {
   stripAllPfStyles?: boolean;
   blockLegacyChrome?: boolean;
   devtool?: Configuration['devtool'];
+  _unstableSpdy?: boolean;
 }
 
 export const createConfig = ({
   port,
   publicPath,
   appEntry,
   rootFolder,
-  https,
+  https = true,
   mode,
   appName,
   useFileHash = true,
@@ -98,6 +99,8 @@ export const createConfig = ({
   stripAllPfStyles = false,
   blockLegacyChrome,
   devtool = false,
+  // enables SPDY as a dev server
+  _unstableSpdy = false,
 }: CreateConfigOptions): Configuration => {
   if (typeof _unstableHotReload !== 'undefined') {
     fecLogger(LogType.warn, `The _unstableHotReload option in shared webpack config is deprecated. Use hotReload config instead.`);
@@ -216,9 +219,19 @@ export const createConfig = ({
 
                   return content;
                 },
+                sassOptions: {
+                  silenceDeprecations: ['legacy-js-api'],
+                },
+              },
+            },
+            {
+              loader: 'sass-loader',
+              options: {
+                sassOptions: {
+                  silenceDeprecations: ['legacy-js-api'],
+                },
               },
             },
-            'sass-loader',
           ],
         },
         {
@@ -261,7 +274,7 @@ export const createConfig = ({
         directory: `${rootFolder || ''}/dist`,
       },
       port: devServerPort,
-      https: https || Boolean(useProxy),
+      server: _unstableSpdy ? 'spdy' : https ? 'https' : 'http',
       host: '0.0.0.0', // This shares on local network. Needed for docker.host.internal
       hot: internalHotReload, // Use livereload instead of HMR which is spotty with federated modules
       liveReload: !internalHotReload,

packages/config/src/lib/createPlugins.ts

@@ -1,9 +1,7 @@
 import { LogType, fecLogger } from '@redhat-cloud-services/frontend-components-config-utilities';
-import { Compiler, WebpackPluginInstance } from 'webpack';
+import webpack, { Compiler, DefinePlugin, ProvidePlugin, WebpackPluginInstance } from 'webpack';
 import { CommonConfigOptions } from './createConfig';
 
-const { SourceMapDevToolPlugin } = require('webpack');
-const { ProvidePlugin, DefinePlugin } = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
@@ -42,7 +40,7 @@ export const createPlugins = ({
   return [
     ...(generateSourceMaps
       ? [
-          new SourceMapDevToolPlugin({
+          new webpack.SourceMapDevToolPlugin({
             test: 'js',
             exclude: /(node_modules|bower_components)/i,
             filename: !fileHash ? 'sourcemaps/[name].js.map' : 'sourcemaps/[name].[contenthash].js.map',

packages/config/src/lib/index.ts

@@ -5,16 +5,8 @@ const { sync } = require('glob');
 export * from './createConfig';
 export * from './createPlugins';
 
-type DevServerConfiguration = import('webpack-dev-server').Configuration;
 type WebpackConfiguration = import('webpack').Configuration;
-export interface FecWebpackConfiguration extends WebpackConfiguration {
-  devServer?: DevServerConfiguration;
-}
-
-const gitRevisionPlugin = new (require('git-revision-webpack-plugin'))({
-  branch: true,
-});
-const akamaiBranches = ['prod-stable'];
+export type FecWebpackConfiguration = WebpackConfiguration;
 
 const getAppEntry = (rootFolder: string, isProd?: boolean) => {
   // Use entry-dev if it exists
@@ -56,7 +48,7 @@ const createFecConfig = (
   const { insights } = require(`${configurations.rootFolder}/package.json`);
   let gitBranch;
   try {
-    gitBranch = process.env.TRAVIS_BRANCH || process.env.BRANCH || gitRevisionPlugin.branch();
+    gitBranch = process.env.TRAVIS_BRANCH || process.env.BRANCH;
   } catch (error) {
     fecLogger(LogType.info, 'no git branch detected, using main for webpack "main" config.');
     gitBranch = 'main';
@@ -65,7 +57,7 @@ const createFecConfig = (
 
   const publicPath = `/${appDeployment}/${insights.appname}/`;
   const appEntry = configurations.appEntry || getAppEntry(configurations.rootFolder, isProd);
-  const generateSourceMaps = !akamaiBranches.includes(gitBranch);
+  const generateSourceMaps = !isProd;
 
   if (configurations.debug) {
     console.group();