Show system notifications for errors

Created by: goshacmd

Uses webpack-notifier under the hood. No setup necessary. Supports Notification Center on OS X, Toaster on Windows 8 and later. Falls back to Growl if present.

(https://github.com/mikaelbr/node-notifier/blob/master/DECISION_FLOW.md)

Ref #89 (closed).

Notifications look like this:

for this error:

Error in ./src/App.js
Syntax error: /Users/goshakkk/Projects/oss/create-react-app/demo/src/App.js: Unexpected token (11:38)
   9 |         <div className="App-header">
  10 |           <img src={logo} className="App-logo" alt="logo" />
> 11 |           <h2>Welcome to React z</h2><<div
     |                                       ^
  12 |         </div>
  13 |         <p className="App-intro">
  14 |           To get started, edit <code>src/App.js</code> and save to reload.
 @ ./src/index.js 11:11-27

• Possible to supply a custom image to webpack-notifier, could be React logo. Considerations: eject will have to copy the logo as well. Might be okay though.

• Custom title is supported by webpack-notifier. "React" might be a bit too broad, "React Scripts" or "Create React App" or "React CLI" might be better.

• Custom error formatter is not supported, plus terminal coloring artifacts are present ([4m). Not currently possible to supply a custom formatter to webpack-notifier. Ideally the message should have been

  Error: ./App.js Unexpected token (11:38)

  Full path & parts of stack trace seem irrelevant for the notification. Error message is much more informative.

config/webpack.config.dev.js

@@ -11,6 +11,7 @@ var path = require('path');
 var autoprefixer = require('autoprefixer');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
+var WebpackNotifierPlugin = require('webpack-notifier');
 
 // TODO: hide this behind a flag and eliminate dead code on eject.
 // This shouldn't be exposed to the user.
@@ -99,6 +100,7 @@ module.exports = {
     }),
     new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }),
     // Note: only CSS is currently hot reloaded
-    new webpack.HotModuleReplacementPlugin()
+    new webpack.HotModuleReplacementPlugin(),
+    new WebpackNotifierPlugin(),
   ]
 };

package.json

@@ -53,7 +53,8 @@
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
     "webpack": "1.13.1",
-    "webpack-dev-server": "1.14.1"
+    "webpack-dev-server": "1.14.1",
+    "webpack-notifier": "1.3.0"
   },
   "devDependencies": {
     "bundle-deps": "^1.0.0",