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

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,30 @@
 #!/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');
 
+const devScript = require('../src/scripts/dev-script');
+const { logError } = require('../src/scripts/common')
+
+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
+`
+    try {
+        execSync(command)    
+    } catch (error) {
+        logError('Unable to patch /etc/hosts! Please to run the script as sudo.')
+    }
+}
+
 const cwd = process.cwd();
 
 const argv = yargs
@@ -19,11 +41,20 @@ 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')
+.command('dev', 'Start development server', (yargs) => {
+    yargs.positional('webpack-config', {
+        type: 'string',
+        describe: 'Path to webpack config',
+    })
+})
 .help()
 .argv;
 
 const scripts = {
-    static
+    static,
+    'patch-etc-hosts': patchHosts,
+    dev: devScript
 };
 
 const args = [ argv, cwd ];

package/index.js

@@ -2,81 +2,85 @@ 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`);
+  let gitBranch;
+  try {
+    gitBranch = process.env.TRAVIS_BRANCH || process.env.BRANCH || gitRevisionPlugin.branch();
+  } catch (error) {
+    console.log('[fec] no git branch detected, using main for webpack "main" config.');
+    gitBranch = 'main';
+  }
+  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.10",
+    "version": "4.6.1",
     "description": "Config plugins and settings for RedHat Cloud Services project.",
     "main": "index.js",
     "bin": {
@@ -20,14 +20,17 @@
     },
     "homepage": "https://github.com/RedHatInsights/frontend-components/tree/master/packages/config#readme",
     "dependencies": {
-        "@redhat-cloud-services/frontend-components-config-utilities": "^1.5.8",
+        "@redhat-cloud-services/frontend-components-config-utilities": "^1.5.9",
         "assert": "^2.0.0",
+        "axios": "^0.25.0",
         "babel-loader": "^8.2.2",
         "browserify-zlib": "^0.2.0",
         "buffer": "^6.0.3",
         "clean-webpack-plugin": "^3.0.0",
         "css-loader": "^5.2.6",
         "concurrently": "^6.3.0",
+        "chalk": "^4.0.0",
+        "express": "^4.17.2",
         "git-revision-webpack-plugin": "^3.0.6",
         "glob": "^7.0.0",
         "html-replace-webpack-plugin": "^2.6.0",
@@ -35,8 +38,10 @@
         "https-proxy-agent": "^5.0.0",
         "http-server": "^13.0.2",
         "mini-css-extract-plugin": "^1.6.0",
+        "inquirer": "^8.2.0",
         "js-yaml": "^4.0.0",
         "jws": "^4.0.0",
+        "lodash": "^4.17.21",
         "path-browserify": "^1.0.1",
         "process": "^0.11.10",
         "sass": "^1.34.1",

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);
+          }
+        },
+      }),
+    },
+  };
 };