debian-image-builder-frontend/config/dev.webpack.config.js

const { resolve } = require('path');

const config = require('@redhat-cloud-services/frontend-components-config');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');

const webpackProxy = {
  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.js'),
      },
      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
  plugins.push(
    new CopyPlugin({
      patterns: [
        { from: 'src/mockServiceWorker.js', to: 'mockServiceWorker.js' },
      ],
    })
  );

  /*
  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
  add that variable to process.env via the DefinesPlugin plugin, but
  DefinePlugin has already been added by config() to the default webpackConfig.

  Therefore, we find it in the `plugins` array based on its type, then update
  it to add our new process.env.MSW variable.
  */
  const definePluginIndex = plugins.findIndex(
    (plugin) => plugin instanceof webpack.DefinePlugin
  );
  const definePlugin = plugins[definePluginIndex];

  const newDefinePlugin = new webpack.DefinePlugin({
    ...definePlugin.definitions,
    'process.env.MSW': true,
  });

  plugins[definePluginIndex] = newDefinePlugin;
}

if (process.env.EXPERIMENTAL) {
  /*
  We would like the client to be able to determine whether or not it is in
  experimental mode at run time based on the value of process.env.EXPERIMENTAL.
  We can add that variable to process.env via the DefinesPlugin plugin, but
  DefinePlugin has already been added by config() to the default webpackConfig.

  Therefore, we find it in the `plugins` array based on its type, then update
  it to add our new process.env.EXPERIMENTAL variable.
  */
  const definePluginIndex = plugins.findIndex(
    (plugin) => plugin instanceof webpack.DefinePlugin
  );
  const definePlugin = plugins[definePluginIndex];

  const newDefinePlugin = new webpack.DefinePlugin({
    ...definePlugin.definitions,
    'process.env.EXPERIMENTAL': true,
  });

  plugins[definePluginIndex] = newDefinePlugin;
}

module.exports = {
  ...webpackConfig,
  plugins,
};