➖ remove webpack-dashboard, it doesn't work properly and implementation is buggy

Author: kitze

.env

@@ -2,6 +2,4 @@ OPEN_BROWSER=false
 
 REACT_APP_SASS=true
 REACT_APP_LESS=true
-REACT_APP_CSS_MODULES=true
-
-REACT_APP_WEBPACK_DASHBOARD=false
+REACT_APP_CSS_MODULES=true

README.md

@@ -9,7 +9,6 @@
 * LESS
 * SASS
 * CSS modules
-* webpack-dashboard
 
 **the features are optional and can be turned on/off individually*
 
@@ -27,9 +26,6 @@ The generated project comes with SASS, LESS, and CSS modules support by default,
 - ```REACT_APP_LESS=true``` - enable LESS support
 - ```REACT_APP_CSS_MODULES``` - enable CSS modules
 
-#### Webpack
-- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard
-
 #### Babel
 - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset
 - ```REACT_APP_DECORATORS=true``` - enable decorators support

packages/react-scripts/README.md

@@ -9,7 +9,6 @@
 * LESS
 * SASS
 * CSS modules
-* webpack-dashboard
 
 **the features are optional and can be turned on/off individually*
 
@@ -27,9 +26,6 @@ The generated project comes with SASS, LESS, and CSS modules support by default,
 - ```REACT_APP_LESS=true``` - enable LESS support
 - ```REACT_APP_CSS_MODULES``` - enable CSS modules
 
-#### Webpack
-- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard
-
 #### Babel
 - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset
 - ```REACT_APP_DECORATORS=true``` - enable decorators support

packages/react-scripts/bin/CUSTOM_README.md

@@ -9,7 +9,6 @@
 * LESS
 * SASS
 * CSS modules
-* webpack-dashboard
 
 **the features are optional and can be turned on/off individually*
 
@@ -27,9 +26,6 @@ The generated project comes with SASS, LESS, and CSS modules support by default,
 - ```REACT_APP_LESS=true``` - enable LESS support
 - ```REACT_APP_CSS_MODULES``` - enable CSS modules
 
-#### Webpack
-- ```REACT_APP_WEBPACK_DASHBOARD=true``` - enable webpack-dashboard
-
 #### Babel
 - ```REACT_APP_BABEL_STAGE_0=true``` - enable stage-0 Babel preset
 - ```REACT_APP_DECORATORS=true``` - enable decorators support

packages/react-scripts/config/customizers.js

@@ -29,15 +29,6 @@ module.exports = {
       }
     }
   },
-  'WEBPACK_DASHBOARD': {
-    toArray: 'plugins',
-    prod: false,
-    get: function () {
-      var DashboardPlugin = require('webpack-dashboard/plugin');
-      var Dashboard = require('webpack-dashboard');
-      return new DashboardPlugin(new Dashboard().setData)
-    }
-  },
   'CSS_MODULES': {
     config: {
       dev: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss',

packages/react-scripts/package.json

@@ -70,7 +70,6 @@
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
     "webpack": "1.13.2",
-    "webpack-dashboard": "^0.1.8",
     "webpack-dev-server": "1.16.1",
     "whatwg-fetch": "1.0.0"
   },

packages/react-scripts/scripts/start.js

@@ -30,21 +30,12 @@ var openBrowser = require('react-dev-utils/openBrowser');
 var prompt = require('react-dev-utils/prompt');
 var config = require('../config/webpack.config.dev');
 var paths = require('../config/paths');
-var getCustomConfig = require('../config/get-custom-config');
-var customConfig = getCustomConfig(false);
 
 // Warn and crash if required files are missing
 if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
   process.exit(1);
 }
 
-function log() {
-  if (customConfig.values.WEBPACK_DASHBOARD === true) {
-    return;
-  }
-  console.log.apply(null, arguments);
-};
-
 // Tools like Cloud9 rely on this.
 var DEFAULT_PORT = process.env.PORT || 3000;
 var compiler;
@@ -72,73 +63,73 @@ function setupCompiler(host, port, protocol) {
   // recompiling a bundle. WebpackDevServer takes care to pause serving the
   // bundle, so if you refresh, it'll wait instead of serving the old one.
   // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
-  compiler.plugin('invalid', function () {
+  compiler.plugin('invalid', function() {
     clearConsole();
-    log('Compiling...');
+    console.log('Compiling...');
   });
 
   // "done" event fires when Webpack has finished recompiling the bundle.
   // Whether or not you have warnings or errors, you will get this event.
-  compiler.plugin('done', function (stats) {
+  compiler.plugin('done', function(stats) {
     clearConsole();
 
     // We have switched off the default Webpack output in WebpackDevServer
     // options so we are going to "massage" the warnings and errors and present
     // them in a readable focused way.
     var messages = formatWebpackMessages(stats.toJson({}, true));
     if (!messages.errors.length && !messages.warnings.length) {
-      log(chalk.green('Compiled successfully!'));
-      log();
-      log('The app is running at:');
-      log();
-      log('  ' + chalk.cyan(protocol + '://' + host + ':' + port + '/'));
-      log();
-      log('Note that the development build is not optimized.');
-      log('To create a production build, use ' + chalk.cyan('npm run build') + '.');
-      log();
+      console.log(chalk.green('Compiled successfully!'));
+      console.log();
+      console.log('The app is running at:');
+      console.log();
+      console.log('  ' + chalk.cyan(protocol + '://' + host + ':' + port + '/'));
+      console.log();
+      console.log('Note that the development build is not optimized.');
+      console.log('To create a production build, use ' + chalk.cyan('npm run build') + '.');
+      console.log();
     }
 
     // If errors exist, only show errors.
     if (messages.errors.length) {
-      log(chalk.red('Failed to compile.'));
-      log();
+      console.log(chalk.red('Failed to compile.'));
+      console.log();
       messages.errors.forEach(message => {
-        log(message);
-        log();
+        console.log(message);
+        console.log();
       });
       return;
     }
 
     // Show warnings if no errors were found.
     if (messages.warnings.length) {
-      log(chalk.yellow('Compiled with warnings.'));
-      log();
+      console.log(chalk.yellow('Compiled with warnings.'));
+      console.log();
       messages.warnings.forEach(message => {
-        log(message);
-        log();
+        console.log(message);
+        console.log();
       });
       // Teach some ESLint tricks.
-      log('You may use special comments to disable some warnings.');
-      log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
-      log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
+      console.log('You may use special comments to disable some warnings.');
+      console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
+      console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
     }
   });
 }
 
 // We need to provide a custom onError function for httpProxyMiddleware.
 // It allows us to log custom error messages on the console.
 function onProxyError(proxy) {
-  return function (err, req, res) {
+  return function(err, req, res){
     var host = req.headers && req.headers.host;
-    log(
+    console.log(
       chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
       ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
     );
-    log(
+    console.log(
       'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
       chalk.cyan(err.code) + ').'
     );
-    log();
+    console.log();
 
     // And immediately send the proper error response to the client.
     // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
@@ -172,9 +163,9 @@ function addMiddleware(devServer) {
   }));
   if (proxy) {
     if (typeof proxy !== 'string') {
-      log(chalk.red('When specified, "proxy" in package.json must be a string.'));
-      log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
-      log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
+      console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
+      console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
+      console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
       process.exit(1);
     }
 
@@ -183,7 +174,7 @@ function addMiddleware(devServer) {
     // - /index.html (served as HTML5 history API fallback)
     // - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
     // - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
-    // Tip: use https://www.debuggex.com/ to visualize the regex
+    // Tip: use https://jex.im/regulex/ to visualize the regex
     var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
     devServer.use(mayProxy,
       // Pass the scope regex both to Express and to the middleware for proxying
@@ -250,12 +241,12 @@ function runDevServer(host, port, protocol) {
   // Launch WebpackDevServer.
   devServer.listen(port, (err, result) => {
     if (err) {
-      return log(err);
+      return console.log(err);
     }
 
-    log(chalk.cyan('Starting the development server...'));
-    log();
-
+    clearConsole();
+    console.log(chalk.cyan('Starting the development server...'));
+    console.log();
     if (process.env && process.env.OPEN_BROWSER !== 'false') {
       openBrowser(protocol + '://' + host + ':' + port + '/');
     }
@@ -272,11 +263,12 @@ function run(port) {
 // We attempt to use the default port but if it is busy, we offer the user to
 // run on a different port. `detect()` Promise resolves to the next free port.
 detect(DEFAULT_PORT).then(port => {
-  if (port === DEFAULT_PORT || customConfig.values.WEBPACK_DASHBOARD === true) {
+  if (port === DEFAULT_PORT) {
     run(port);
     return;
   }
 
+  clearConsole();
   var question =
         chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.') +
         '\n\nWould you like to run the app on another port instead?';

packages/react-scripts/template/src/App.js

@@ -63,14 +63,6 @@ class App extends Component {
             </li>
           </ul>
 
-          <b> Webpack </b>
-          <ul className="configs babel-configs">
-            <li>
-              <code>REACT_APP_WEBPACK_DASHBOARD=true</code>
-              <span>- Enable webpack-dashboard ⚠️ <span className={styles.experimental}>(experimental)</span> </span>
-            </li>
-          </ul>
-
           <b> Others </b>
           <ul className="configs style-configs">
             <li>