@redhat-cloud-services/frontend-components-config 4.5.11 → 4.5.12

package/README.md

@@ -340,6 +340,9 @@ Use binary in your `package.json` scripts section:
 }
 ```
 
+## Patch etc hosts
+This is a required step for first time setup. It will allow your localhost to map to [env].foo.redhat.com. This is required to run only once on your machine. **Your OS may require running the script as sudo**!
+
 ## Static
 
 A script that will run webpack build and serve webpack output through `http-serve` server. **This is not supposed to replace webpack dev server!**

package/bin/fec.js

@@ -1,8 +1,23 @@
 #!/usr/bin/env node
-
+const { execSync } = require('child_process');
 const static = require('@redhat-cloud-services/frontend-components-config-utilities/serve-federated');
 const yargs = require('yargs');
 
+function patchHosts() {
+    const command = `
+    for host in prod.foo.redhat.com stage.foo.redhat.com qa.foo.redhat.com ci.foo.redhat.com
+do
+    grep -q $host /etc/hosts 2>/dev/null
+    if [ $? -ne 0 ]
+    then
+        echo "Adding $host to /etc/hosts"
+        echo "127.0.0.1 $host" >>/etc/hosts
+    fi
+done
+`
+    execSync(command)
+}
+
 const cwd = process.cwd();
 
 const argv = yargs
@@ -19,11 +34,13 @@ const argv = yargs
         default: 8003
     });
 })
+.command('patch-etc-hosts', 'You may have to run this as \'sudo\'. Setup your etc/hosts allow development hosts in your browser')
 .help()
 .argv;
 
 const scripts = {
-    static
+    static,
+    'patch-etc-hosts': patchHosts
 };
 
 const args = [ argv, cwd ];

package/index.js

@@ -2,81 +2,79 @@ const config = require('./src/config');
 const plugins = require('./src/plugins');
 const { sync } = require('glob');
 
-const gitRevisionPlugin = new(require('git-revision-webpack-plugin'))({
-    branch: true
+const gitRevisionPlugin = new (require('git-revision-webpack-plugin'))({
+  branch: true,
 });
-const betaBranches = [ 'master', 'qa-beta', 'ci-beta', 'prod-beta', 'main', 'devel', 'stage-beta' ];
-const akamaiBranches = [ 'prod-beta', 'prod-stable' ];
+const betaBranches = ['master', 'qa-beta', 'ci-beta', 'prod-beta', 'main', 'devel', 'stage-beta'];
+const akamaiBranches = ['prod-beta', 'prod-stable'];
 
 const getAppEntry = (rootFolder, isProd) => {
-    // Use entry-dev if it exists
-    if (!isProd) {
-        const entries = sync('src/entry-dev.{js,jsx,ts,tsx}', { cwd: rootFolder });
-        if (entries.length > 1) {
-            console.warn('Found multiple entry-dev files. Using', entries[0]);
-        }
-
-        if (entries.length > 0) {
-            return `${rootFolder}/${entries[0]}`;
-        }
+  // Use entry-dev if it exists
+  if (!isProd) {
+    const entries = sync('src/entry-dev.{js,jsx,ts,tsx}', { cwd: rootFolder });
+    if (entries.length > 1) {
+      console.warn('Found multiple entry-dev files. Using', entries[0]);
     }
 
-    const entries = sync('src/entry.{js,jsx,ts,tsx}', { cwd: rootFolder });
-    if (entries.length > 1) {
-        console.warn('Found multiple entry files. Using', entries[0]);
+    if (entries.length > 0) {
+      return `${rootFolder}/${entries[0]}`;
     }
+  }
 
-    return `${rootFolder}/${entries[0]}`;
+  const entries = sync('src/entry.{js,jsx,ts,tsx}', { cwd: rootFolder });
+  if (entries.length > 1) {
+    console.warn('Found multiple entry files. Using', entries[0]);
+  }
+
+  return `${rootFolder}/${entries[0]}`;
 };
 
 module.exports = (configurations) => {
-    configurations.isProd = configurations.isProd || process.env.NODE_ENV === 'production';
-    const isProd = configurations.isProd;
-    const { insights } = require(`${configurations.rootFolder}/package.json`);
-    const gitBranch = process.env.TRAVIS_BRANCH || process.env.BRANCH || gitRevisionPlugin.branch();
-    const appDeployment = configurations.deployment || ((isProd && betaBranches.includes(gitBranch)) ?
-        'beta/apps' :
-        'apps');
-
-    const publicPath = `/${appDeployment}/${insights.appname}/`;
-    const appEntry = configurations.appEntry || getAppEntry(configurations.rootFolder, isProd);
-    const generateSourceMaps = !akamaiBranches.includes(gitBranch);
+  configurations.isProd = configurations.isProd || process.env.NODE_ENV === 'production';
+  const isProd = configurations.isProd;
+  const { insights } = require(`${configurations.rootFolder}/package.json`);
+  const gitBranch = process.env.TRAVIS_BRANCH || process.env.BRANCH || gitRevisionPlugin.branch();
+  const appDeployment = configurations.deployment || (isProd && betaBranches.includes(gitBranch) ? 'beta/apps' : 'apps');
 
-    if (configurations.debug) {
-        /* eslint-disable no-console */
-        console.log('~~~Using variables~~~');
-        console.log(`Root folder: ${configurations.rootFolder}`);
-        console.log(`Current branch: ${gitBranch}`);
-        !generateSourceMaps && console.log(`Source map generation for "${gitBranch}" deployment has been disabled.`);
-        console.log(`Beta branches: ${betaBranches}`);
-        console.log(`Using deployments: ${appDeployment}`);
-        console.log(`Public path: ${publicPath}`);
-        console.log(`App entry: ${appEntry}`);
-        console.log(`Use proxy: ${configurations.useProxy ? 'true' : 'false'}`);
-        if (!(configurations.useProxy || configurations.standalone)) {
-            console.warn('Insights-proxy is deprecated in favor of "useProxy" or "standalone".');
-            console.warn('See https://github.com/RedHatInsights/frontend-components/blob/master/packages/config/README.md');
-        }
+  const publicPath = `/${appDeployment}/${insights.appname}/`;
+  const appEntry = configurations.appEntry || getAppEntry(configurations.rootFolder, isProd);
+  const generateSourceMaps = !akamaiBranches.includes(gitBranch);
 
-        console.log('~~~~~~~~~~~~~~~~~~~~~');
-        /* eslint-enable no-console */
+  if (configurations.debug) {
+    /* eslint-disable no-console */
+    console.log('~~~Using variables~~~');
+    console.log(`Root folder: ${configurations.rootFolder}`);
+    console.log(`Current branch: ${gitBranch}`);
+    !generateSourceMaps && console.log(`Source map generation for "${gitBranch}" deployment has been disabled.`);
+    console.log(`Beta branches: ${betaBranches}`);
+    console.log(`Using deployments: ${appDeployment}`);
+    console.log(`Public path: ${publicPath}`);
+    console.log(`App entry: ${appEntry}`);
+    console.log(`Use proxy: ${configurations.useProxy ? 'true' : 'false'}`);
+    if (!(configurations.useProxy || configurations.standalone)) {
+      console.warn('Insights-proxy is deprecated in favor of "useProxy" or "standalone".');
+      console.warn('See https://github.com/RedHatInsights/frontend-components/blob/master/packages/config/README.md');
     }
 
-    return {
-        config: config({
-            ...configurations,
-            appDeployment,
-            insights,
-            publicPath,
-            appEntry,
-            appName: insights.appname
-        }),
-        plugins: plugins({
-            ...configurations,
-            generateSourceMaps,
-            appDeployment,
-            insights,
-            publicPath
-        })
-    };
+    console.log('~~~~~~~~~~~~~~~~~~~~~');
+    /* eslint-enable no-console */
+  }
+
+  return {
+    config: config({
+      ...configurations,
+      appDeployment,
+      insights,
+      publicPath,
+      appEntry,
+      appName: insights.appname,
+    }),
+    plugins: plugins({
+      ...configurations,
+      generateSourceMaps,
+      appDeployment,
+      insights,
+      publicPath,
+    }),
+  };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redhat-cloud-services/frontend-components-config",
-    "version": "4.5.11",
+    "version": "4.5.12",
     "description": "Config plugins and settings for RedHat Cloud Services project.",
     "main": "index.js",
     "bin": {

package/src/config.js

@@ -6,192 +6,198 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const searchIgnoredStyles = require('@redhat-cloud-services/frontend-components-config-utilities/search-ignored-styles');
 
 module.exports = ({
-    port,
-    publicPath,
-    appEntry,
-    rootFolder,
-    https,
-    mode,
-    appName,
-    useFileHash = true,
-    betaEnv,
-    env,
-    sassPrefix,
-    skipChrome2 = false,
-    useProxy,
-    proxyURL,
-    localChrome,
-    keycloakUri,
-    customProxy,
-    routes,
-    routesPath,
-    isProd,
-    standalone = false,
-    reposDir,
-    appUrl = [],
-    proxyVerbose,
-    useCloud,
-    target,
-    registry,
-    client = {},
-    bundlePfModules = false,
-    useChromeTemplate = false
+  port,
+  publicPath,
+  appEntry,
+  rootFolder,
+  https,
+  mode,
+  appName,
+  useFileHash = true,
+  betaEnv,
+  env,
+  sassPrefix,
+  skipChrome2 = false,
+  useProxy,
+  proxyURL,
+  localChrome,
+  keycloakUri,
+  customProxy,
+  routes,
+  routesPath,
+  isProd,
+  standalone = false,
+  reposDir,
+  appUrl = [],
+  proxyVerbose,
+  useCloud,
+  target,
+  registry,
+  client = {},
+  bundlePfModules = false,
+  useChromeTemplate = false,
 } = {}) => {
-    const filenameMask = `js/[name]${useFileHash ? `.${Date.now()}.[fullhash]` : ''}.js`;
-    if (betaEnv) {
-        env = `${betaEnv}-beta`;
-        console.warn('betaEnv is deprecated in favor of env');
-    }
+  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 outputPath = `${rootFolder || ''}/dist`;
 
-    const copyTemplate = (chromePath) => {
-        const template = fs.readFileSync(`${chromePath}/index.html`, { encoding: 'utf-8' });
-        if (!fs.existsSync(outputPath)) {
-            fs.mkdirSync(outputPath);
-        }
+  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);
-    };
+    fs.writeFileSync(`${outputPath}/index.html`, template);
+  };
 
-    const devServerPort = typeof port === 'number' ? port : useProxy || standalone ? 1337 : 8002;
-    return {
-        mode: mode || (isProd ? 'production' : 'development'),
-        devtool: false,
-        entry: {
-            App: appEntry
+  const devServerPort = typeof port === 'number' ? port : useProxy || standalone ? 1337 : 8002;
+  return {
+    mode: mode || (isProd ? 'production' : 'development'),
+    devtool: false,
+    entry: {
+      App: appEntry,
+    },
+    output: {
+      filename: filenameMask,
+      path: outputPath,
+      publicPath,
+      chunkFilename: filenameMask,
+    },
+    module: {
+      rules: [
+        {
+          test: new RegExp(appEntry),
+          loader: path.resolve(__dirname, './chrome-render-loader.js'),
+          options: {
+            appName,
+            skipChrome2,
+          },
+        },
+        {
+          test: /src\/.*\.js$/,
+          exclude: /(node_modules|bower_components)/i,
+          use: ['babel-loader'],
         },
-        output: {
-            filename: filenameMask,
-            path: outputPath,
-            publicPath,
-            chunkFilename: filenameMask
+        {
+          test: /src\/.*\.tsx?$/,
+          loader: 'ts-loader',
+          exclude: /(node_modules)/i,
         },
-        module: {
-            rules: [{
-                test: new RegExp(appEntry),
-                loader: path.resolve(__dirname, './chrome-render-loader.js'),
-                options: {
-                    appName,
-                    skipChrome2
-                }
-            }, {
-                test: /src\/.*\.js$/,
-                exclude: /(node_modules|bower_components)/i,
-                use: [ 'babel-loader' ]
-            }, {
-                test: /src\/.*\.tsx?$/,
-                loader: 'ts-loader',
-                exclude: /(node_modules)/i
-            }, {
-                test: /\.s?[ac]ss$/,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    'css-loader',
-                    {
-                        /**
-                         * Second sass loader used for scoping the css with class name.
-                         * Has to be included as second in order to re-scope already compiled sass files.
-                         * Second loader is required to avoid scoping mixins, includes and other sass partials. We want to only scope the CSS output.
-                         */
-                        loader: 'sass-loader',
-                        options: {
-                            additionalData: function(content, loaderContext) {
-                                const { resourcePath, rootContext } = loaderContext;
-                                const relativePath = path.relative(rootContext, resourcePath);
-                                /**
-                                 * Add app class context for local style files.
-                                 * Context class is equal to app name and that class ass added to root element via the chrome-render-loader.
-                                 */
-                                if (relativePath.match(/^src/)) {
-                                    return `${sassPrefix || `.${appName}`}{\n${content}\n}`;
-                                }
+        {
+          test: /\.s?[ac]ss$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader',
+            {
+              /**
+               * Second sass loader used for scoping the css with class name.
+               * Has to be included as second in order to re-scope already compiled sass files.
+               * Second loader is required to avoid scoping mixins, includes and other sass partials. We want to only scope the CSS output.
+               */
+              loader: 'sass-loader',
+              options: {
+                additionalData: function (content, loaderContext) {
+                  const { resourcePath, rootContext } = loaderContext;
+                  const relativePath = path.relative(rootContext, resourcePath);
+                  /**
+                   * Add app class context for local style files.
+                   * Context class is equal to app name and that class ass added to root element via the chrome-render-loader.
+                   */
+                  if (relativePath.match(/^src/)) {
+                    return `${sassPrefix || `.${appName}`}{\n${content}\n}`;
+                  }
 
-                                return content;
-                            }
-                        }
-                    },
-                    'sass-loader'
-                ]
-            }, {
-                test: /\.(woff(2)?|ttf|jpg|png|eot|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
-                type: 'asset/resource',
-                generator: {
-                    filename: 'fonts/[name][ext]'
-                }
+                  return content;
+                },
+              },
             },
-            {
-                test: /\.mjs$/,
-                include: /node_modules/,
-                type: 'javascript/auto'
-            }]
+            'sass-loader',
+          ],
         },
-        resolve: {
-            extensions: [ '.ts', '.tsx', '.mjs', '.js', '.scss' ],
-            alias: {
-                ...(bundlePfModules ? {} : searchIgnoredStyles(rootFolder))
-            },
-            fallback: {
-                path: require.resolve('path-browserify'),
-                stream: require.resolve('stream-browserify'),
-                zlib: require.resolve('browserify-zlib'),
-                assert: require.resolve('assert/'),
-                buffer: require.resolve('buffer/'),
-                url: require.resolve('url/'),
-                util: require.resolve('util/'),
-                process: 'process/browser.js'
-            }
+        {
+          test: /\.(woff(2)?|ttf|jpg|png|eot|gif|svg)(\?v=\d+\.\d+\.\d+)?$/,
+          type: 'asset/resource',
+          generator: {
+            filename: 'fonts/[name][ext]',
+          },
         },
-        devServer: {
-            static: {
-                directory: `${rootFolder || ''}/dist`
-            },
-            port: devServerPort,
-            https: https || Boolean(useProxy),
-            host: '0.0.0.0', // This shares on local network. Needed for docker.host.internal
-            hot: false, // Use livereload instead of HMR which is spotty with federated modules
-            allowedHosts: 'all',
-            // https://github.com/bripkens/connect-history-api-fallback
-            historyApiFallback: {
-                // We should really implement the same logic as cloud-services-config
-                // and only redirect (/beta)?/bundle/app-name to /index.html
-                //
-                // Until then let known api calls fall through instead of returning /index.html
-                // for easier `fetch` debugging
-                rewrites: [
-                    { from: /^\/api/, to: '/404.html' },
-                    { from: /^(\/beta)?\/config/, to: '/404.html' }
-                ],
-                verbose: Boolean(proxyVerbose)
-            },
-            devMiddleware: {
-                writeToDisk: true
-            },
-            client,
-            ...proxy({
-                useCloud,
-                env,
-                localChrome,
-                keycloakUri,
-                customProxy,
-                routes,
-                routesPath,
-                useProxy,
-                proxyURL,
-                standalone,
-                port: devServerPort,
-                reposDir,
-                appUrl,
-                publicPath,
-                proxyVerbose,
-                target,
-                registry,
-                onBeforeSetupMiddleware: ({ chromePath }) => {
-                    if (useChromeTemplate && chromePath) {
-                        copyTemplate(chromePath);
-                    }
-                }
-            })
-        }
-    };
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: 'javascript/auto',
+        },
+      ],
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.mjs', '.js', '.scss'],
+      alias: {
+        ...(bundlePfModules ? {} : searchIgnoredStyles(rootFolder)),
+      },
+      fallback: {
+        path: require.resolve('path-browserify'),
+        stream: require.resolve('stream-browserify'),
+        zlib: require.resolve('browserify-zlib'),
+        assert: require.resolve('assert/'),
+        buffer: require.resolve('buffer/'),
+        url: require.resolve('url/'),
+        util: require.resolve('util/'),
+        process: 'process/browser.js',
+      },
+    },
+    devServer: {
+      static: {
+        directory: `${rootFolder || ''}/dist`,
+      },
+      port: devServerPort,
+      https: https || Boolean(useProxy),
+      host: '0.0.0.0', // This shares on local network. Needed for docker.host.internal
+      hot: false, // Use livereload instead of HMR which is spotty with federated modules
+      allowedHosts: 'all',
+      // https://github.com/bripkens/connect-history-api-fallback
+      historyApiFallback: {
+        // We should really implement the same logic as cloud-services-config
+        // and only redirect (/beta)?/bundle/app-name to /index.html
+        //
+        // Until then let known api calls fall through instead of returning /index.html
+        // for easier `fetch` debugging
+        rewrites: [
+          { from: /^\/api/, to: '/404.html' },
+          { from: /^(\/beta)?\/config/, to: '/404.html' },
+        ],
+        verbose: Boolean(proxyVerbose),
+      },
+      devMiddleware: {
+        writeToDisk: true,
+      },
+      client,
+      ...proxy({
+        useCloud,
+        env,
+        localChrome,
+        keycloakUri,
+        customProxy,
+        routes,
+        routesPath,
+        useProxy,
+        proxyURL,
+        standalone,
+        port: devServerPort,
+        reposDir,
+        appUrl,
+        publicPath,
+        proxyVerbose,
+        target,
+        registry,
+        onBeforeSetupMiddleware: ({ chromePath }) => {
+          if (useChromeTemplate && chromePath) {
+            copyTemplate(chromePath);
+          }
+        },
+      }),
+    },
+  };
 };

package/src/config.test.js

@@ -9,135 +9,112 @@ import config from './config';
 const configBuilder = (c) => config({ rootFolder: '', ...c });
 
 describe('should create dummy config with no options', () => {
-    const {
-        mode,
-        optimization,
-        entry,
-        output,
-        devServer
-    } = config({ rootFolder: '' });
-
-    const { mode: prodMode } = configBuilder({ mode: 'production' });
-    test('mode', () => {
-        expect(mode).toBe('development');
+  const { mode, optimization, entry, output, devServer } = config({ rootFolder: '' });
+
+  const { mode: prodMode } = configBuilder({ mode: 'production' });
+  test('mode', () => {
+    expect(mode).toBe('development');
+  });
+
+  test('prodMode', () => {
+    expect(prodMode).toBe('production');
+  });
+
+  test('optimization', () => {
+    expect(optimization).toEqual(undefined);
+  });
+
+  test('entry', () => {
+    expect(entry).toEqual({ App: undefined });
+  });
+
+  test('output', () => {
+    expect(output).toEqual({
+      filename: expect.stringMatching(/js\/\[name\]\.\d+\.\[fullhash\]\.js/),
+      path: '/dist',
+      publicPath: undefined,
+      chunkFilename: expect.stringMatching(/js\/\[name\]\.\d+\.\[fullhash\]\.js/),
     });
-
-    test('prodMode', () => {
-        expect(prodMode).toBe('production');
-    });
-
-    test('optimization', () => {
-        expect(optimization).toEqual(undefined);
-    });
-
-    test('entry', () => {
-        expect(entry).toEqual({ App: undefined });
-    });
-
-    test('output', () => {
-        expect(output).toEqual({
-            filename: expect.stringMatching(/js\/\[name\]\.\d+\.\[fullhash\]\.js/),
-            path: '/dist',
-            publicPath: undefined,
-            chunkFilename: expect.stringMatching(/js\/\[name\]\.\d+\.\[fullhash\]\.js/)
-        });
-    });
-
-    test('devServer', () => {
-        expect(devServer).toEqual({
-            onBeforeSetupMiddleware: expect.any(Function),
-            onListening: expect.any(Function),
-            static: {
-                directory: '/dist'
-            },
-            https: false,
-            host: '0.0.0.0',
-            port: 8002,
-            hot: false,
-            allowedHosts: 'all',
-            historyApiFallback: {
-                rewrites: [
-                    { from: /^\/api/, to: '/404.html' },
-                    { from: /^(\/beta)?\/config/, to: '/404.html' }
-                ],
-                verbose: false
-            },
-            client: {},
-            devMiddleware: {
-                writeToDisk: true
-            }
-        });
+  });
+
+  test('devServer', () => {
+    expect(devServer).toEqual({
+      onBeforeSetupMiddleware: expect.any(Function),
+      onListening: expect.any(Function),
+      static: {
+        directory: '/dist',
+      },
+      https: false,
+      host: '0.0.0.0',
+      port: 8002,
+      hot: false,
+      allowedHosts: 'all',
+      historyApiFallback: {
+        rewrites: [
+          { from: /^\/api/, to: '/404.html' },
+          { from: /^(\/beta)?\/config/, to: '/404.html' },
+        ],
+        verbose: false,
+      },
+      client: {},
+      devMiddleware: {
+        writeToDisk: true,
+      },
     });
+  });
 });
 
 describe('rootFolder', () => {
-    const {
-        output,
-        devServer
-    } = configBuilder({ rootFolder: '/some' });
-    test('output', () => {
-        expect(output.path).toBe('/some/dist');
-    });
-
-    test('devServer', () => {
-        expect(devServer.static.directory).toBe('/some/dist');
-    });
+  const { output, devServer } = configBuilder({ rootFolder: '/some' });
+  test('output', () => {
+    expect(output.path).toBe('/some/dist');
+  });
+
+  test('devServer', () => {
+    expect(devServer.static.directory).toBe('/some/dist');
+  });
 });
 
 describe('module rules', () => {
-    test('length', () => {
-        const {
-            module
-        } = configBuilder({ appEntry: 'testEntry', appName: 'someName' });
-        expect(module.rules.length).toBe(6);
-    });
-
-    test('first to be chrome-render-loader', () => {
-        const {
-            module
-        } = configBuilder({ appEntry: 'testEntry', appName: 'someName' });
-        expect((new RegExp(module.rules[0].rules)).test('testEntry')).toBe(true);
-        expect(module.rules[0].options.skipChrome2).toBe(false);
-    });
-
-    test('first to be chrome-render-loader', () => {
-        const {
-            module
-        } = configBuilder({ appEntry: 'testEntry', appName: 'someName', skipChrome2: true });
-        expect(module.rules[0].options.skipChrome2).toBe(true);
-    });
+  test('length', () => {
+    const { module } = configBuilder({ appEntry: 'testEntry', appName: 'someName' });
+    expect(module.rules.length).toBe(6);
+  });
+
+  test('first to be chrome-render-loader', () => {
+    const { module } = configBuilder({ appEntry: 'testEntry', appName: 'someName' });
+    expect(new RegExp(module.rules[0].rules).test('testEntry')).toBe(true);
+    expect(module.rules[0].options.skipChrome2).toBe(false);
+  });
+
+  test('first to be chrome-render-loader', () => {
+    const { module } = configBuilder({ appEntry: 'testEntry', appName: 'someName', skipChrome2: true });
+    expect(module.rules[0].options.skipChrome2).toBe(true);
+  });
 });
 
 test('appEntry correctly set', () => {
-    const {
-        entry
-    } = configBuilder({ appEntry: 'testEntry' });
-    expect(entry).toEqual({ App: 'testEntry' });
+  const { entry } = configBuilder({ appEntry: 'testEntry' });
+  expect(entry).toEqual({ App: 'testEntry' });
 });
 
 describe('publicPath', () => {
-    const {
-        output
-    } = configBuilder({ publicPath: 'test-value' });
+  const { output } = configBuilder({ publicPath: 'test-value' });
 
-    test('output', () => {
-        expect(output.publicPath).toBe('test-value');
-    });
+  test('output', () => {
+    expect(output.publicPath).toBe('test-value');
+  });
 });
 
 describe('port', () => {
-    const {
-        devServer
-    } = configBuilder({ port: 1000 });
+  const { devServer } = configBuilder({ port: 1000 });
 
-    test('devServer', () => {
-        expect(devServer.port).toBe(1000);
-    });
+  test('devServer', () => {
+    expect(devServer.port).toBe(1000);
+  });
 });
 
 test('https', () => {
-    const {
-        devServer
-    } = configBuilder({ https: true });
-    expect(devServer.https).toBe(true);
+  const { devServer } = configBuilder({ https: true });
+  expect(devServer.https).toBe(true);
 });

package/src/plugins.js

@@ -8,62 +8,56 @@ const ChunkMapperPlugin = require('@redhat-cloud-services/frontend-components-co
 const jsVarName = require('@redhat-cloud-services/frontend-components-config-utilities/jsVarName');
 
 module.exports = ({
-    rootFolder,
-    appDeployment,
-    htmlPlugin,
-    replacePlugin,
-    insights,
-    modules,
-    generateSourceMaps,
-    plugins,
-    useChromeTemplate = false
+  rootFolder,
+  appDeployment,
+  htmlPlugin,
+  replacePlugin,
+  insights,
+  modules,
+  generateSourceMaps,
+  plugins,
+  useChromeTemplate = false,
 } = {}) => [
-    ...(generateSourceMaps
-        ? [
-            new SourceMapDevToolPlugin({
-                test: 'js',
-                exclude: /(node_modules|bower_components)/i,
-                filename: 'sourcemaps/[name].[contenthash].js.map'
-            })
-        ]
-        : []),
-    new MiniCssExtractPlugin({
-        chunkFilename: 'css/[name].[contenthash].css',
-        filename: 'css/[name].[contenthash].css',
-        ignoreOrder: true
-    }),
-    new CleanWebpackPlugin({
-        cleanStaleWebpackAssets: false,
-        cleanOnceBeforeBuildPatterns: useChromeTemplate ? [
-            '**/*',
-            '!index.html'
-        ] : [
-            '**/*'
-        ]
-    }),
-    ...(useChromeTemplate ? [] : [
+  ...(generateSourceMaps
+    ? [
+        new SourceMapDevToolPlugin({
+          test: 'js',
+          exclude: /(node_modules|bower_components)/i,
+          filename: 'sourcemaps/[name].[contenthash].js.map',
+        }),
+      ]
+    : []),
+  new MiniCssExtractPlugin({
+    chunkFilename: 'css/[name].[contenthash].css',
+    filename: 'css/[name].[contenthash].css',
+    ignoreOrder: true,
+  }),
+  new CleanWebpackPlugin({
+    cleanStaleWebpackAssets: false,
+    cleanOnceBeforeBuildPatterns: useChromeTemplate ? ['**/*', '!index.html'] : ['**/*'],
+  }),
+  ...(useChromeTemplate
+    ? []
+    : [
         new HtmlWebpackPlugin({
-            title: 'My App',
-            filename: 'index.html',
-            template: `${rootFolder || ''}/src/index.html`,
-            inject: false,
-            ...htmlPlugin || {}
+          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',
-        Buffer: [ 'buffer', 'Buffer' ]
-    }),
-    new ChunkMapperPlugin({ modules: [
-        ...insights ? [ jsVarName(insights.appname) ] : [],
-        ...modules || []
-    ] }),
-    ...(plugins || [])
+          {
+            pattern: '@@env',
+            replacement: appDeployment || '',
+          },
+          ...(replacePlugin || []),
+        ]),
+      ]),
+  new ProvidePlugin({
+    process: 'process/browser.js',
+    Buffer: ['buffer', 'Buffer'],
+  }),
+  new ChunkMapperPlugin({ modules: [...(insights ? [jsVarName(insights.appname)] : []), ...(modules || [])] }),
+  ...(plugins || []),
 ];

package/src/plugins.test.js

@@ -4,55 +4,51 @@ const HTML_WEBPACK = 2;
 const REPLACE = 3;
 
 describe('plugins generations, no option', () => {
-    const enabledPlugins = plugins();
+  const enabledPlugins = plugins();
 
-    it('should generate plugins', () => {
-        expect(enabledPlugins.length).toBe(6);
-    });
+  it('should generate plugins', () => {
+    expect(enabledPlugins.length).toBe(6);
+  });
 
-    it('should generate plugins with sourceMaps', () => {
-        const enabledPlugins = plugins({ generateSourceMaps: true });
-        expect(enabledPlugins.length).toBe(7);
-    });
+  it('should generate plugins with sourceMaps', () => {
+    const enabledPlugins = plugins({ generateSourceMaps: true });
+    expect(enabledPlugins.length).toBe(7);
+  });
 
-    it('should generate correct template path for HtmlWebpackPlugin', () => {
-        expect(enabledPlugins[HTML_WEBPACK].userOptions.template).toBe('/src/index.html');
-    });
+  it('should generate correct template path for HtmlWebpackPlugin', () => {
+    expect(enabledPlugins[HTML_WEBPACK].userOptions.template).toBe('/src/index.html');
+  });
 });
 
 describe('rootFolder', () => {
-    const enabledPlugins = plugins({ rootFolder: '/test/folder' });
+  const enabledPlugins = plugins({ rootFolder: '/test/folder' });
 
-    it('should generate correct template path for HtmlWebpackPlugin', () => {
-        expect(enabledPlugins[HTML_WEBPACK].userOptions.template).toBe('/test/folder/src/index.html');
-    });
+  it('should generate correct template path for HtmlWebpackPlugin', () => {
+    expect(enabledPlugins[HTML_WEBPACK].userOptions.template).toBe('/test/folder/src/index.html');
+  });
 });
 
 describe('appDeployment', () => {
-    const enabledPlugins = plugins({ appDeployment: '/test/folder' });
-
-    it('should replace correct string', () => {
-        enabledPlugins[REPLACE].replace(
-            { html: 'string @@env' },
-            (_, { html }) => expect(html).toBe('string /test/folder')
-        );
-    });
+  const enabledPlugins = plugins({ appDeployment: '/test/folder' });
+
+  it('should replace correct string', () => {
+    enabledPlugins[REPLACE].replace({ html: 'string @@env' }, (_, { html }) => expect(html).toBe('string /test/folder'));
+  });
 });
 
 it('htmlPlugin should update', () => {
-    const enabledPlugins = plugins({ htmlPlugin: { title: 'myTitle' } });
-    expect(enabledPlugins[HTML_WEBPACK].userOptions.title).toBe('myTitle');
+  const enabledPlugins = plugins({ htmlPlugin: { title: 'myTitle' } });
+  expect(enabledPlugins[HTML_WEBPACK].userOptions.title).toBe('myTitle');
 });
 
 it('replacePlugin should update', () => {
-    const enabledPlugins = plugins({ replacePlugin: [
-        {
-            pattern: '@@another',
-            replacement: 'test-string'
-        }
-    ] });
-    enabledPlugins[REPLACE].replace(
-        { html: '@@another string @@env' },
-        (_, { html }) => expect(html).toBe('test-string string ')
-    );
+  const enabledPlugins = plugins({
+    replacePlugin: [
+      {
+        pattern: '@@another',
+        replacement: 'test-string',
+      },
+    ],
+  });
+  enabledPlugins[REPLACE].replace({ html: '@@another string @@env' }, (_, { html }) => expect(html).toBe('test-string string '));
 });