(add): Support for customising webpack dev server & jest config

packages/react-scripts/README.md

@@ -18,10 +18,14 @@ Please refer to its documentation:
 
 In your project's root create a folder `archetype`. Create a config file with same name say if you want to customise Webpack config, then create a file `webpack.config.js` under `<root-dir>/archetype`. Add your customised config.
 
-    module.exports = (webpackEnv) => {
+    module.exports = (webpackEnv, defaultConfig) => {
+        // defaultConfig - config provided by CRA, you can mutate/override it as per you needs and pass the same
+
         const webpackConfig = {
           ...
         };
 
         return webpackConfig
     }
+
+Similarly to you can customise Webpack DEV Sever config by creating a file `webpackDevServer.config.js` & Jest config with `jest.config.js` as shown above.

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scripts-custom-config",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "description": "A forked version of CRA's react-scripts which support customisation of config with out ejecting",
   "repository": {
     "type": "git",

packages/react-scripts/scripts/start.js

@@ -138,10 +138,20 @@ checkBrowsers(paths.appPath, isInteractive)
       paths.publicUrlOrPath
     );
     // Serve webpack assets generated by the compiler over a web server.
-    const serverConfig = createDevServerConfig(
-      proxyConfig,
-      urls.lanUrlForConfig
+
+    // ---- Custom Config Support Start ----
+
+    // const serverConfig = createDevServerConfig(
+    //   proxyConfig,
+    //   urls.lanUrlForConfig
+    // );
+    const serverConfig = getConfig(
+      'webpackDevServer.config.js',
+      createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
+      'development'
     );
+
+    // ---- Custom Config Support End ----
     const devServer = new WebpackDevServer(compiler, serverConfig);
     // Launch WebpackDevServer.
     devServer.listen(port, HOST, err => {

packages/react-scripts/scripts/test.js

@@ -70,17 +70,34 @@ if (
 const createJestConfig = require('./utils/createJestConfig');
 const path = require('path');
 const paths = require('../config/paths');
-argv.push(
-  '--config',
-  JSON.stringify(
-    createJestConfig(
-      relativePath => path.resolve(__dirname, '..', relativePath),
-      path.resolve(paths.appSrc, '..'),
-      false
-    )
+
+// ---- Custom Config Support Start ----
+
+// argv.push(
+//   '--config',
+//   JSON.stringify(
+//     createJestConfig(
+//       relativePath => path.resolve(__dirname, '..', relativePath),
+//       path.resolve(paths.appSrc, '..'),
+//       false
+//     )
+//   )
+// );
+
+const getConfig = require('./utils/customConfigHelper');
+const config = getConfig(
+  'jest.config.js',
+  createJestConfig(
+    relativePath => path.resolve(__dirname, '..', relativePath),
+    path.resolve(paths.appSrc, '..'),
+    false
   )
 );
 
+argv.push('--config', JSON.stringify(config));
+
+// ---- Custom Config Support End ----
+
 // This is a very dirty workaround for https://github.com/facebook/jest/issues/5913.
 // We're trying to resolve the environment ourselves because Jest does it incorrectly.
 // TODO: remove this as soon as it's fixed in Jest.

packages/react-scripts/scripts/utils/customConfigHelper.js

@@ -8,7 +8,9 @@ const getConfig = (customConfigFileName, defaultConfig, env) => {
   );
   const useCustomConfig = fs.existsSync(customConfigPath);
 
-  return useCustomConfig ? require(customConfigPath)(env) : defaultConfig;
+  return useCustomConfig
+    ? require(customConfigPath)(env, defaultConfig)
+    : defaultConfig;
 };
 
 module.exports = getConfig;