Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
Size: Mime:
/* eslint-disable global-require */
/* eslint-disable no-case-declarations */
const mergeWebpack = require('webpack-merge');
const mergeObject = require('deepmerge');

const createCommonConfig = require('./webpack/webpack.common');

/**
 * @typedef {object} AppParameters
 *
 * @property {string} publicPath - The path in which the frontend will be exposed, excluding the "/"
 * @property {string} pageTitle - The title of the HTML page
 * @property {string} manifestDescription - The description of the purpose of the frontend
 * @property {object} templateOptions - Custom options to configure HtmlWebpackPlugin or to expose variables in the index.ejs template
 * @property {MocksConfiguration} mocks - The configuration for the dev environment mocks
 * @property {undefined} prerenderRoutes - Custom array of routes that will be pre-rendered by PrerenderSPAPlugin (for production only)
 */
const defaultAppParameters = {
  publicPath: '',
  pageTitle: 'Doodle',
  manifestDescription: 'Doodle',
  templateOptions: {},
  mocks: {},
  // prerenderRoutes supports a dynamic default implemented in the webpack.{dev,prod}.js files
  // for that reason it must be undefined here, to ensure such default is applied
  // see https://github.com/DoodleScheduling/lib-frontend-config/pull/95/files#r452346002
  prerenderRoutes: undefined,
};

/**
 * @typedef {object} MocksConfiguration
 * @description The configuration for the mocks used in development. The swagger json must be
 * passed. It can optionally contain a map of custom handlers with keys in the form '<method> <endpoint>'
 * (e.g. 'GET /foo'). Note: method+endpoint combination MUST be present in the swagger json, otherwise
 * the custom handler will be ignored!
 * @property {string|Object} swaggerJson - The swagger definitions object or path to the json file, used to generate the mocks in dev mode
 * @property {object<string,function>} [routeHandlers] - A map of custom route handlers.
 * @see https://expressjs.com/en/api.html#router
 */

/**
 * Default configuration for React frontends.
 *
 * How to use:
 * Create a webpack.config.js file in your project and extend this configuration as
 * shown in the following example.
 *
 * @example
 * // File: web-my-frontend/webpack.config.js
 * const { generateWebpackConfig } = require('@doodle/frontend-config/webpack');
 *
 * module.exports = generateWebpackConfig({
 *  customOptions: {
 *    // custom webpack options
 *  },
 *  appParameters: {
 *    publicPath: 'my-frontend',
 *    pageTitle: 'My Frontend',
 *    manifestDescription: 'My test frontend used to show how webpack configuration works',
 *    templateOptions: {
 *      appConfig: {
 *        // custom app data
 *      },
 *      prerenderAppConfig: {
 *        disableLoadUserOnBoot: true,
 *      }
 *    },
 *    postProcessPrerenderedHtml: html => html,
 *    mocks: {
 *      swaggerJson: path.resolve(__dirname, 'swagger.json'),
 *    },
 *  }
 * });
 */
module.exports = {
  /**
   * @param {object} customWebpackOptions Custom webpack options to merge to the default configuration
   * @param {AppParameters} appParameters App parameters
   */
  generateWebpackConfig: async ({ customWebpackOptions, appParameters }) => {
    const mergedAppParameters = mergeObject(defaultAppParameters, appParameters);

    switch (process.env.npm_lifecycle_event) {
      case 'start':
        const createDevConfig = require('./webpack/webpack.dev');
        // Generates the code that runs in the local development environment
        return mergeWebpack(
          await createCommonConfig({ babelTargetEnv: 'modern', ...mergedAppParameters }),
          await createDevConfig(mergedAppParameters),
          customWebpackOptions
        );
      case 'build':
        const createProdConfig = require('./webpack/webpack.prod');
        return [
          // Generates the production bundle for modern browsers (ES6+ code)
          mergeWebpack(
            await createCommonConfig({ babelTargetEnv: 'modern', ...mergedAppParameters }),
            await createProdConfig({ babelTargetEnv: 'modern', ...mergedAppParameters }),
            customWebpackOptions
          ),
          // Generates the production bundle for old browsers (ES5 code)
          mergeWebpack(
            await createCommonConfig({ babelTargetEnv: 'fallback', ...mergedAppParameters }),
            await createProdConfig({ babelTargetEnv: 'fallback', ...mergedAppParameters }),
            customWebpackOptions
          ),
        ];
      default:
        break;
    }
  },
};