improve front end dx (#1331)

3 files changed, 254 insertions, 89 deletions

diff --git a/server/sonar-web/scripts/build.js b/server/sonar-web/scripts/build.js
index 446d45a4d6f..c73a5a9559f 100644
--- a/server/sonar-web/scripts/build.js
+++ b/server/sonar-web/scripts/build.js
@@ -37,8 +37,8 @@ var config = isFastBuild ?
 // if you're in it, you don't end up in Trash
 console.log(chalk.cyan.bold('Cleaning output directories...'));
 
-console.log(paths.jsBuild + '/*');
-rimrafSync(paths.jsBuild + '/*');
+console.log(paths.appBuild + '/*');
+rimrafSync(paths.appBuild + '/*');
 
 console.log(paths.cssBuild + '/*');
 rimrafSync(paths.cssBuild + '/*');
diff --git a/server/sonar-web/scripts/start.js b/server/sonar-web/scripts/start.js
index 905793318e2..90cd204e9d1 100644
--- a/server/sonar-web/scripts/start.js
+++ b/server/sonar-web/scripts/start.js
@@ -19,136 +19,263 @@
  */
 process.env.NODE_ENV = 'development';
 
-var url = require('url');
-var express = require('express');
-var proxy = require('express-http-proxy');
-var webpack = require('webpack');
-var chalk = require('chalk');
-var config = require('../config/webpack/webpack.config.dev.js');
-
-var app = express();
+// Load environment variables from .env file. Surpress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.
+// https://github.com/motdotla/dotenv
+require('dotenv').config({ silent: true });
 
-var DEFAULT_PORT = process.env.PORT || 8080;
-var API_HOST = process.env.API_HOST || 'http://localhost:9000';
+var chalk = require('chalk');
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var historyApiFallback = require('connect-history-api-fallback');
+var httpProxyMiddleware = require('http-proxy-middleware');
+var detect = require('detect-port');
+var clearConsole = require('react-dev-utils/clearConsole');
+var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+var prompt = require('react-dev-utils/prompt');
+var config = require('../config/webpack/webpack.config.dev');
+var paths = require('../config/paths');
 
+// Tools like Cloud9 rely on this.
+var DEFAULT_PORT = process.env.PORT || 3000;
 var compiler;
+var handleCompile;
 
-var friendlySyntaxErrorLabel = 'Syntax error:';
+var PROXY_URL = 'http://localhost:9000';
 
-function isLikelyASyntaxError (message) {
-  return message.indexOf(friendlySyntaxErrorLabel) !== -1;
-}
-
-// This is a little hacky.
-// It would be easier if webpack provided a rich error object.
-
-function formatMessage (message) {
-  return message
-  // Make some common errors shorter:
-      .replace(
-          // Babel syntax error
-          'Module build failed: SyntaxError:',
-          friendlySyntaxErrorLabel
-      )
-      .replace(
-          // Webpack file not found error
-          /Module not found: Error: Cannot resolve 'file' or 'directory'/,
-          'Module not found:'
-      )
-      // Internal stacks are generally useless so we strip them
-      .replace(/^\s*at\s.*:\d+:\d+[\s\)]*\n/gm, '') // at ... ...:x:y
-      // Webpack loader names obscure CSS filenames
-      .replace('./~/css-loader!./~/postcss-loader!', '');
+// You can safely remove this after ejecting.
+// We only use this block for testing of Create React App itself:
+var isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1);
+if (isSmokeTest) {
+  handleCompile = function (err, stats) {
+    if (err || stats.hasErrors() || stats.hasWarnings()) {
+      process.exit(1);
+    } else {
+      process.exit(0);
+    }
+  };
 }
 
-function setupCompiler () {
-  compiler = webpack(config);
+function setupCompiler (host, port, protocol) {
+  // "Compiler" is a low-level interface to Webpack.
+  // It lets us listen to some events and provide our own custom messages.
+  compiler = webpack(config, handleCompile);
 
+  // "invalid" event fires when you have changed a file, and Webpack is
+  // 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 () {
-    console.log(chalk.cyan.bold('Compiling...'));
+    clearConsole();
+    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) {
-    var hasErrors = stats.hasErrors();
-    var hasWarnings = stats.hasWarnings();
-    if (!hasErrors && !hasWarnings) {
-      console.log(chalk.green.bold('Compiled successfully!'));
-      return;
-    }
+    clearConsole();
 
-    var json = stats.toJson();
-    var formattedErrors = json.errors.map(message =>
-        'Error in ' + formatMessage(message)
-    );
-    var formattedWarnings = json.warnings.map(message =>
-        'Warning in ' + formatMessage(message)
-    );
+    // 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) {
+      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 (hasErrors) {
-      console.log(chalk.red.bold('Failed to compile:'));
+    // If errors exist, only show errors.
+    if (messages.errors.length) {
+      console.log(chalk.red('Failed to compile.'));
       console.log();
-      if (formattedErrors.some(isLikelyASyntaxError)) {
-        // If there are any syntax errors, show just them.
-        // This prevents a confusing ESLint parsing error
-        // preceding a much more useful Babel syntax error.
-        formattedErrors = formattedErrors.filter(isLikelyASyntaxError);
-      }
-      formattedErrors.forEach(message => {
+      messages.errors.forEach(message => {
         console.log(message);
         console.log();
       });
-      // If errors exist, ignore warnings.
       return;
     }
 
-    if (hasWarnings) {
+    // Show warnings if no errors were found.
+    if (messages.warnings.length) {
       console.log(chalk.yellow('Compiled with warnings.'));
       console.log();
-      formattedWarnings.forEach(message => {
+      messages.warnings.forEach(message => {
         console.log(message);
         console.log();
       });
-
+      // Teach some ESLint tricks.
       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.');
+      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.');
     }
   });
 }
 
-function runDevServer (port) {
-  app.use(require('webpack-dev-middleware')(compiler, {
-    noInfo: true,
-    publicPath: config.output.publicPath
-  }));
-
-  app.use(require('webpack-hot-middleware')(compiler));
+// 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) {
+    var host = req.headers && req.headers.host;
+    console.log(
+        chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) +
+        ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.'
+    );
+    console.log(
+        'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
+        chalk.cyan(err.code) + ').'
+    );
+    console.log();
 
-  app.all('*', proxy(API_HOST, {
-    forwardPath: function (req) {
-      return url.parse(req.url).path;
+    // And immediately send the proper error response to the client.
+    // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
+    if (res.writeHead && !res.headersSent) {
+      res.writeHead(500);
     }
+    res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
+        host + ' to ' + proxy + ' (' + err.code + ').'
+    );
+  }
+}
+
+function addMiddleware (devServer) {
+  // `proxy` lets you to specify a fallback server during development.
+  // Every unrecognized request will be forwarded to it.
+  var proxy = PROXY_URL;
+  devServer.use(historyApiFallback({
+    // Paths with dots should still use the history fallback.
+    // See https://github.com/facebookincubator/create-react-app/issues/387.
+    disableDotRule: true,
+    // For single page apps, we generally want to fallback to /index.html.
+    // However we also want to respect `proxy` for API calls.
+    // So if `proxy` is specified, we need to decide which fallback to use.
+    // We use a heuristic: if request `accept`s text/html, we pick /index.html.
+    // Modern browsers include text/html into `accept` header when navigating.
+    // However API calls like `fetch()` won’t generally accept text/html.
+    // If this heuristic doesn’t work well for you, don’t use `proxy`.
+    htmlAcceptHeaders: proxy ?
+        ['text/html'] :
+        ['text/html', '*/*']
   }));
+  if (proxy) {
+    if (typeof proxy !== '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);
+    }
+
+    // Otherwise, if proxy is specified, we will let it handle any request.
+    // There are a few exceptions which we won't send to the proxy:
+    // - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
+    // - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
+    // Tip: use https://jex.im/regulex/ to visualize the regex
+    var mayProxy = /^(?!\/(.*\.hot-update\.json$|sockjs-node\/)).*$/;
+    devServer.use(mayProxy,
+        // Pass the scope regex both to Express and to the middleware for proxying
+        // of both HTTP and WebSockets to work without false positives.
+        httpProxyMiddleware(pathname => mayProxy.test(pathname), {
+          target: proxy,
+          logLevel: 'silent',
+          onError: onProxyError(proxy),
+          secure: false,
+          changeOrigin: true
+        })
+    );
+  }
+  // Finally, by now we have certainly resolved the URL.
+  // It may be /index.html, so let the dev server try serving it again.
+  devServer.use(devServer.middleware);
+}
+
+function runDevServer (host, port, protocol) {
+  var devServer = new WebpackDevServer(compiler, {
+    // Silence WebpackDevServer's own logs since they're generally not useful.
+    // It will still show compile warnings and errors with this setting.
+    clientLogLevel: 'none',
+    // By default WebpackDevServer serves physical files from current directory
+    // in addition to all the virtual build products that it serves from memory.
+    // This is confusing because those files won’t automatically be available in
+    // production build folder unless we copy them. However, copying the whole
+    // project directory is dangerous because we may expose sensitive files.
+    // Instead, we establish a convention that only files in `public` directory
+    // get served. Our build script will copy `public` into the `build` folder.
+    // In `index.html`, you can get URL of `public` folder with %PUBLIC_PATH%:
+    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+    // Note that we only recommend to use `public` folder as an escape hatch
+    // for files like `favicon.ico`, `manifest.json`, and libraries that are
+    // for some reason broken when imported through Webpack. If you just want to
+    // use an image, put it in `src` and `import` it from JavaScript instead.
+    contentBase: paths.appPublic,
+    // Enable hot reloading server. It will provide /sockjs-node/ endpoint
+    // for the WebpackDevServer client so it can learn when the files were
+    // updated. The WebpackDevServer client is included as an entry point
+    // in the Webpack development configuration. Note that only changes
+    // to CSS are currently hot reloaded. JS changes will refresh the browser.
+    hot: true,
+    // It is important to tell WebpackDevServer to use the same "root" path
+    // as we specified in the config. In development, we always serve from /.
+    publicPath: config.output.publicPath,
+    // WebpackDevServer is noisy by default so we emit custom message instead
+    // by listening to the compiler events with `compiler.plugin` calls above.
+    quiet: true,
+    // Reportedly, this avoids CPU overload on some systems.
+    // https://github.com/facebookincubator/create-react-app/issues/293
+    watchOptions: {
+      ignored: /node_modules/
+    },
+    // Enable HTTPS if the HTTPS environment variable is set to 'true'
+    https: protocol === "https",
+    host: host
+  });
+
+  // Our custom middleware proxies requests to /index.html or a remote API.
+  addMiddleware(devServer);
 
-  app.listen(port, 'localhost', function (err) {
+  // Launch WebpackDevServer.
+  devServer.listen(port, (err, result) => {
     if (err) {
-      console.log(err);
-      return;
+      return console.log(err);
     }
 
-    console.log(chalk.green.bold(
-        'The app is running at http://localhost:' + port + '/'));
-    console.log(chalk.cyan.bold('Compiling...'));
+    clearConsole();
+    console.log(chalk.cyan('Starting the development server...'));
     console.log();
   });
 }
 
 function run (port) {
-  setupCompiler();
-  runDevServer(port);
+  var protocol = process.env.HTTPS === 'true' ? "https" : "http";
+  var host = process.env.HOST || 'localhost';
+  setupCompiler(host, port, protocol);
+  runDevServer(host, port, protocol);
 }
 
-run(DEFAULT_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) {
+    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?';
 
+  prompt(question, true).then(shouldChangePort => {
+    if (shouldChangePort) {
+      run(port);
+    }
+  });
+});
diff --git a/server/sonar-web/scripts/test.js b/server/sonar-web/scripts/test.js
new file mode 100644
index 00000000000..8ec88828387
--- /dev/null
+++ b/server/sonar-web/scripts/test.js
@@ -0,0 +1,38 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+process.env.NODE_ENV = 'test';
+process.env.PUBLIC_URL = '';
+
+// Load environment variables from .env file. Surpress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.
+// https://github.com/motdotla/dotenv
+require('dotenv').config({ silent: true });
+
+const jest = require('jest');
+const argv = process.argv.slice(2);
+
+// Watch unless on CI
+if (!process.env.CI) {
+  argv.push('--watch');
+}
+
+jest.run(argv);
+