@redhat-cloud-services/frontend-components-config 4.5.6 → 4.5.10

package/README.md

@@ -7,6 +7,7 @@
     - [Removed features with webpack 5](#removed-features-with-webpack-5)
   - [useProxy](#useproxy)
     - [Attributes](#attributes)
+      - [useChromeTemplate](#useChromeTemplate)
       - [localChrome](#localchrome)
       - [registry](#registry)
       - [Custom routes](#custom-routes)
@@ -54,6 +55,7 @@ const { config: webpackConfig, plugins } = config({
 |---------|----|-----------|
 |[useProxy](#useproxy)|`boolean`|Enables webpack proxy.|
 |[proxyURL](#proxyURL)|`string`|URL to proxy Akamai environment requests to.|
+|[useChromeTemplate](#useChromeTemplate)|`boolean`|Load chrome HTMl template.|
 |[localChrome](#localChrome)|`string`|Path to your local chrome build folder.|
 |[keycloakUri](#keycloakUri)|`string`|Uri to inject into proxied chrome assets.|
 |[registry](#registry)|`(({ app, server, compiler, standaloneConfig }) => void)[]`|Express middleware to register.|
@@ -64,6 +66,24 @@ const { config: webpackConfig, plugins } = config({
 |[useCloud](#use-cloud)|`boolean`|Toggle to use old fallback to cloud.redhat.com paths instead of console.redhat.com.|
 |[target](#target)|`string`|Override `env` and `useCloud` to use a custom URI.|
 
+
+#### useChromeTemplate
+
+**This option will become the default. App-specific templates are deprecated**
+
+To load chrome HTML template instead of using the APP-specific template add `useChromeTemplate` flag to your config.
+
+```js
+const config = require('@redhat-cloud-services/frontend-components-config');
+
+const { config: webpackConfig, plugins } = config({
+  rootFolder: resolve(__dirname, '../'),
+  useProxy: true,
+  useChromeTemplate: true
+  ...
+});
+```
+
 #### localChrome
 
 You can also easily run you application with a local build of Chrome by adding `localChrome: <absolute_path_to_chrome_build_folder>`.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redhat-cloud-services/frontend-components-config",
-    "version": "4.5.6",
+    "version": "4.5.10",
     "description": "Config plugins and settings for RedHat Cloud Services project.",
     "main": "index.js",
     "bin": {
@@ -20,7 +20,7 @@
     },
     "homepage": "https://github.com/RedHatInsights/frontend-components/tree/master/packages/config#readme",
     "dependencies": {
-        "@redhat-cloud-services/frontend-components-config-utilities": "^1.5.7",
+        "@redhat-cloud-services/frontend-components-config-utilities": "^1.5.8",
         "assert": "^2.0.0",
         "babel-loader": "^8.2.2",
         "browserify-zlib": "^0.2.0",
@@ -48,7 +48,7 @@
         "util": "^0.12.4",
         "webpack": "^5.55.1",
         "webpack-cli": "^4.8.0",
-        "webpack-dev-server": "^4.3.0",
+        "webpack-dev-server": "4.3.1",
         "write-file-webpack-plugin": "^4.5.1",
         "yargs": "^17.2.1"
     }

package/src/config.js

@@ -1,5 +1,6 @@
 /* eslint-disable camelcase */
 const path = require('path');
+const fs = require('fs');
 const proxy = require('@redhat-cloud-services/frontend-components-config-utilities/proxy');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const searchIgnoredStyles = require('@redhat-cloud-services/frontend-components-config-utilities/search-ignored-styles');
@@ -33,14 +34,26 @@ module.exports = ({
     target,
     registry,
     client = {},
-    bundlePfModules = false
+    bundlePfModules = false,
+    useChromeTemplate = false
 } = {}) => {
-    const filenameMask = `js/[name]${useFileHash ? '.[chunkhash]' : ''}.js`;
+    const filenameMask = `js/[name]${useFileHash ? `.${Date.now()}.[fullhash]` : ''}.js`;
     if (betaEnv) {
         env = `${betaEnv}-beta`;
         console.warn('betaEnv is deprecated in favor of env');
     }
 
+    const outputPath = `${rootFolder || ''}/dist`;
+
+    const copyTemplate = (chromePath) => {
+        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'),
@@ -50,7 +63,7 @@ module.exports = ({
         },
         output: {
             filename: filenameMask,
-            path: `${rootFolder || ''}/dist`,
+            path: outputPath,
             publicPath,
             chunkFilename: filenameMask
         },
@@ -172,7 +185,12 @@ module.exports = ({
                 publicPath,
                 proxyVerbose,
                 target,
-                registry
+                registry,
+                onBeforeSetupMiddleware: ({ chromePath }) => {
+                    if (useChromeTemplate && chromePath) {
+                        copyTemplate(chromePath);
+                    }
+                }
             })
         }
     };

package/src/config.test.js

@@ -36,10 +36,10 @@ describe('should create dummy config with no options', () => {
 
     test('output', () => {
         expect(output).toEqual({
-            filename: 'js/[name].[chunkhash].js',
+            filename: expect.stringMatching(/js\/\[name\]\.\d+\.\[fullhash\]\.js/),
             path: '/dist',
             publicPath: undefined,
-            chunkFilename: 'js/[name].[chunkhash].js'
+            chunkFilename: expect.stringMatching(/js\/\[name\]\.\d+\.\[fullhash\]\.js/)
         });
     });
 

package/src/plugins.js

@@ -15,7 +15,8 @@ module.exports = ({
     insights,
     modules,
     generateSourceMaps,
-    plugins
+    plugins,
+    useChromeTemplate = false
 } = {}) => [
     ...(generateSourceMaps
         ? [
@@ -31,20 +32,30 @@ module.exports = ({
         filename: 'css/[name].[contenthash].css',
         ignoreOrder: true
     }),
-    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
-    new HtmlWebpackPlugin({
-        title: 'My App',
-        filename: 'index.html',
-        template: `${rootFolder || ''}/src/index.html`,
-        inject: false,
-        ...htmlPlugin || {}
+    new CleanWebpackPlugin({
+        cleanStaleWebpackAssets: false,
+        cleanOnceBeforeBuildPatterns: useChromeTemplate ? [
+            '**/*',
+            '!index.html'
+        ] : [
+            '**/*'
+        ]
     }),
-    new HtmlReplaceWebpackPlugin([
-        {
-            pattern: '@@env',
-            replacement: appDeployment || ''
-        },
-        ...replacePlugin || []
+    ...(useChromeTemplate ? [] : [
+        new HtmlWebpackPlugin({
+            title: 'My App',
+            filename: 'index.html',
+            template: `${rootFolder || ''}/src/index.html`,
+            inject: false,
+            ...htmlPlugin || {}
+        }),
+        new HtmlReplaceWebpackPlugin([
+            {
+                pattern: '@@env',
+                replacement: appDeployment || ''
+            },
+            ...replacePlugin || []
+        ])
     ]),
     new ProvidePlugin({
         process: 'process/browser.js',