Refactor and improve build output (facebook#2202)

packages/react-dev-utils/README.md

@@ -252,6 +252,19 @@ if (openBrowser('http://localhost:3000')) {
 }
 ```
 
+#### `printHostingInstructions(appPackage: Object, publicUrl: string, publicPath: string, buildFolder: string, useYarn: boolean): void`
+
+Prints hosting instructions after the project is built.
+
+Pass your parsed `package.json` object as `appPackage`, your the URL where you plan to host the app as `publicUrl`, `output.publicPath` from your Webpack configuration as `publicPath`, the `buildFolder` name, and whether to `useYarn` in instructions.
+
+```js
+const appPackage = require(paths.appPackageJson);
+const publicUrl = paths.publicUrl;
+const publicPath = config.output.publicPath;
+printHostingInstructions(appPackage, publicUrl, publicPath, 'build', true);
+```
+
 #### `webpackHotDevClient.js`
 
 This is an alternative client for [WebpackDevServer](https://github.com/webpack/webpack-dev-server) that shows a syntax error overlay.

packages/react-dev-utils/eslintFormatter.js

@@ -13,6 +13,7 @@ function isError(message) {
 function formatter(results) {
   let output = '\n';
   let hasErrors = false;
+  let reportContainsErrorRuleIDs = false;
 
   results.forEach(result => {
     let messages = result.messages;
@@ -25,6 +26,9 @@ function formatter(results) {
       if (isError(message)) {
         messageType = 'error';
         hasErrors = true;
+        if (message.ruleId) {
+          reportContainsErrorRuleIDs = true;
+        }
       } else {
         messageType = 'warn';
       }
@@ -61,7 +65,7 @@ function formatter(results) {
     output += `${outputTable}\n\n`;
   });
 
-  if (hasErrors) {
+  if (reportContainsErrorRuleIDs) {
     // Unlike with warnings, we have to do it here.
     // We have similar code in react-scripts for warnings,
     // but warnings can appear in multiple files so we only

packages/react-dev-utils/package.json

@@ -25,6 +25,7 @@
     "openBrowser.js",
     "openChrome.applescript",
     "prepareProxy.js",
+    "printHostingInstructions.js",
     "WatchMissingNodeModulesPlugin.js",
     "webpackHotDevClient.js"
   ],

packages/react-dev-utils/printHostingInstructions.js

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+'use strict';
+
+const chalk = require('chalk');
+const url = require('url');
+
+function printHostingInstructions(
+  appPackage,
+  publicUrl,
+  publicPath,
+  buildFolder,
+  useYarn
+) {
+  const publicPathname = url.parse(publicPath).pathname;
+  if (publicUrl && publicUrl.indexOf('.github.io/') !== -1) {
+    // "homepage": "http://user.github.io/project"
+    console.log(
+      `The project was built assuming it is hosted at ${chalk.green(publicPathname)}.`
+    );
+    console.log(
+      `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.`
+    );
+    console.log();
+    console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`);
+    console.log(`To publish it at ${chalk.green(publicUrl)}, run:`);
+    // If script deploy has been added to package.json, skip the instructions
+    if (typeof appPackage.scripts.deploy === 'undefined') {
+      console.log();
+      if (useYarn) {
+        console.log(`  ${chalk.cyan('yarn')} add --dev gh-pages`);
+      } else {
+        console.log(`  ${chalk.cyan('npm')} install --save-dev gh-pages`);
+      }
+      console.log();
+      console.log(
+        `Add the following script in your ${chalk.cyan('package.json')}.`
+      );
+      console.log();
+      console.log(`    ${chalk.dim('// ...')}`);
+      console.log(`    ${chalk.yellow('"scripts"')}: {`);
+      console.log(`      ${chalk.dim('// ...')}`);
+      console.log(
+        `      ${chalk.yellow('"predeploy"')}: ${chalk.yellow('"npm run build",')}`
+      );
+      console.log(
+        `      ${chalk.yellow('"deploy"')}: ${chalk.yellow('"gh-pages -d build"')}`
+      );
+      console.log('    }');
+      console.log();
+      console.log('Then run:');
+    }
+    console.log();
+    console.log(`  ${chalk.cyan(useYarn ? 'yarn' : 'npm')} run deploy`);
+    console.log();
+  } else if (publicPath !== '/') {
+    // "homepage": "http://mywebsite.com/project"
+    console.log(
+      `The project was built assuming it is hosted at ${chalk.green(publicPath)}.`
+    );
+    console.log(
+      `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.`
+    );
+    console.log();
+    console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`);
+    console.log();
+  } else {
+    if (publicUrl) {
+      // "homepage": "http://mywebsite.com"
+      console.log(
+        `The project was built assuming it is hosted at ${chalk.green(publicUrl)}.`
+      );
+      console.log(
+        `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.`
+      );
+      console.log();
+    } else {
+      // no homepage
+      console.log(
+        'The project was built assuming it is hosted at the server root.'
+      );
+      console.log(
+        `To override this, specify the ${chalk.green('homepage')} in your ${chalk.cyan('package.json')}.`
+      );
+      console.log('For example, add this to build it for GitHub Pages:');
+      console.log();
+      console.log(
+        `  ${chalk.green('"homepage"')} ${chalk.cyan(':')} ${chalk.green('"http://myname.github.io/myapp"')}${chalk.cyan(',')}`
+      );
+      console.log();
+    }
+    console.log(
+      `The ${chalk.cyan(buildFolder)} folder is ready to be deployed.`
+    );
+    console.log('You may serve it with a static server:');
+    console.log();
+    if (useYarn) {
+      console.log(`  ${chalk.cyan('yarn')} global add serve`);
+    } else {
+      console.log(`  ${chalk.cyan('npm')} install -g serve`);
+    }
+    console.log(`  ${chalk.cyan('serve')} -s build`);
+    console.log();
+  }
+}
+
+module.exports = printHostingInstructions;