- Changing config folder to configuration

- Using express instead of webpack dev server
- Adding coverage
- Adding prod mode

.gitignore

@@ -1,6 +1,10 @@
 # dependencies
 node_modules
 
+#coverage
+coverage
+.nyc_output
+
 # production
 build
 

configuration/babel.test.js

@@ -0,0 +1,9 @@
+module.exports = {
+  babelrc: false,
+  presets: [
+    'babel-preset-es2015',
+    'babel-preset-stage-0',
+    'babel-preset-react',
+  ],
+  plugins: ['istanbul'],
+};

config/webpack.config.dev.js → configuration/webpack.config.dev.js

@@ -9,8 +9,7 @@ var node_modules = path.resolve('node_modules');
 module.exports = {
   devtool: 'eval',
   entry: [
-    require.resolve('webpack-dev-server/client') + '?/',
-    require.resolve('webpack/hot/only-dev-server'),
+    'webpack-hot-middleware/client?quiet=true&noInfo=true',
     require.resolve('react-hot-loader/patch'),
     require.resolve('./polyfills'),
     path.join(src, 'index'),
@@ -73,7 +72,7 @@ module.exports = {
     ],
   },
   eslint: {
-    configFile: path.resolve('./config/eslint.js'),
+    configFile: path.resolve('./configuration/eslint.js'),
     useEslintrc: false,
   },
   postcss: function() {

package.json

@@ -2,25 +2,32 @@
   "name": "formidable-react-app-starter",
   "version": "0.0.1",
   "scripts": {
-    "start": "node ./scripts/start.js",
     "build": "node ./scripts/build.js",
+    "dev": "node ./server/development.js",
     "lint": "eslint src",
-    "test": "mocha test/.setup.js test/**/*.spec.js"
+    "prod": "cross-env NODE_ENV=production PORT=3000 node ./server/production.js",
+    "test": "nyc --reporter=lcov --reporter=text mocha test/.setup.js test/**/*.spec.js"
   },
   "eslintConfig": {
-    "extends": "./config/eslint.js"
+    "extends": "./configuration/eslint.js"
+  },
+  "nyc": {
+    "sourceMap": false,
+    "instrument": false
   },
   "dependencies": {
     "react": "^15.3.0",
     "react-dom": "^15.3.0",
     "react-hot-loader": "^3.0.0-beta.2",
-    "react-router": "^2.6.1"
+    "react-router": "^2.6.1",
+    "serve-favicon": "^2.3.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.4.0",
     "babel-core": "^6.13.2",
     "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
+    "babel-plugin-istanbul": "^1.0.3",
     "babel-plugin-transform-react-constant-elements": "^6.9.1",
     "babel-plugin-transform-runtime": "^6.12.0",
     "babel-preset-es2015": "^6.13.2",
@@ -30,6 +37,7 @@
     "babel-runtime": "^6.11.6",
     "chai": "^3.5.0",
     "chalk": "^1.1.3",
+    "cross-env": "^2.0.0",
     "cross-spawn": "^4.0.0",
     "css-loader": "^0.23.1",
     "css-modules-require-hook": "^4.0.1",
@@ -48,6 +56,7 @@
     "jsdom": "^9.4.1",
     "json-loader": "^0.5.4",
     "mocha": "^3.0.2",
+    "nyc": "^7.1.0",
     "postcss-loader": "^0.9.1",
     "promise": "^7.1.1",
     "react-addons-test-utils": "^15.3.0",
@@ -57,7 +66,8 @@
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.12.2",
     "whatwg-fetch": "^1.0.0"
   }
 }

scripts/build.js

@@ -7,7 +7,7 @@ var filesize = require('filesize');
 var gzipSize = require('gzip-size').sync;
 var rimrafSync = require('rimraf').sync;
 var webpack = require('webpack');
-var config = require('../config/webpack.config.prod');
+var config = require('../configuration/webpack.config.prod');
 
 rimrafSync(path.resolve('build') + '/*');
 

server/development.js

@@ -0,0 +1,53 @@
+/* eslint-disable */
+var path = require('path');
+var chalk = require('chalk');
+var express = require('express');
+var favicon = require('serve-favicon');
+var webpack = require('webpack');
+var config = require('../configuration/webpack.config.dev');
+var utils = require('./utils');
+
+process.env.NODE_ENV = 'development';
+
+var PORT = process.env.PORT || 3000;
+
+// Set up compiler
+
+var compiler = webpack(config);
+
+compiler.plugin('invalid', () => {
+  utils.clearConsole();
+  console.log('Compiling...');
+});
+
+compiler.plugin('done', (stats) => {
+  utils.formatStats(stats, PORT);
+});
+
+// Launch server
+
+var app = express();
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
+  publicPath: config.output.publicPath,
+}));
+
+app.use(require('webpack-hot-middleware')(compiler));
+
+app.use(favicon('./favicon.png'));
+
+app.get('*', (req, res) => {
+  res.sendFile(path.resolve('index.html'));
+});
+
+app.listen(PORT, (err) => {
+  if (err) {
+    console.log(err);
+    return;
+  }
+
+  utils.clearConsole();
+  console.log(chalk.cyan('Starting the development server...'));
+  console.log();
+});

server/production.js

@@ -0,0 +1,31 @@
+/* eslint-disable */
+var path = require('path');
+var chalk = require('chalk');
+var express = require('express');
+var favicon = require('serve-favicon');
+var utils = require('./utils');
+
+var PORT = process.env.PORT || 80;
+
+// Launch server
+
+var app = express();
+
+app.use('/static', express.static('./build/static'));
+
+app.use(favicon('./build/favicon.png'));
+
+app.get('*', (req, res) => {
+  res.sendFile(path.resolve('./build/index.html'));
+});
+
+app.listen(PORT, (err) => {
+  if (err) {
+    console.log(err);
+    return;
+  }
+
+  utils.clearConsole();
+  console.log(chalk.cyan('Production server started on port ' + PORT));
+  console.log();
+});

server/utils.js

@@ -0,0 +1,78 @@
+/* eslint-disable */
+var chalk = require('chalk');
+
+var friendlySyntaxErrorLabel = 'Syntax error:';
+
+function isLikelyASyntaxError(message) {
+  return message.indexOf(friendlySyntaxErrorLabel) !== -1;
+}
+
+function formatMessage(message) {
+  return message
+    .replace(
+      'Module build failed: SyntaxError:',
+      friendlySyntaxErrorLabel
+    )
+    .replace(
+      /Module not found: Error: Cannot resolve 'file' or 'directory'/,
+      'Module not found:'
+    )
+    .replace(/^\s*at\s.*:\d+:\d+[\s\)]*\n/gm, '') // at ... ...:x:y
+    .replace('./~/css-loader!./~/postcss-loader!', '');
+}
+var clearConsole = () => {
+  process.stdout.write('\x1bc');
+};
+
+var formatStats = (stats, port) => {
+  clearConsole();
+  var hasErrors = stats.hasErrors();
+  var hasWarnings = stats.hasWarnings();
+  if (!hasErrors && !hasWarnings) {
+    console.log(chalk.green('Compiled successfully!'));
+    console.log();
+    console.log('The app is running at http://localhost:' + port + '/');
+    console.log();
+    return;
+  }
+
+  var json = stats.toJson();
+  var formattedErrors = json.errors.map(message =>
+    'Error in ' + formatMessage(message)
+  );
+  var formattedWarnings = json.warnings.map(message =>
+    'Warning in ' + formatMessage(message)
+  );
+
+  if (hasErrors) {
+    console.log(chalk.red('Failed to compile.'));
+    console.log();
+    if (formattedErrors.some(isLikelyASyntaxError)) {
+      formattedErrors = formattedErrors.filter(isLikelyASyntaxError);
+    }
+    formattedErrors.forEach(message => {
+      console.log(message);
+      console.log();
+    });
+    return;
+  }
+
+  if (hasWarnings) {
+    console.log(chalk.yellow('Compiled with warnings.'));
+    console.log();
+    formattedWarnings.forEach(message => {
+      console.log(message);
+      console.log();
+    });
+
+    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.');
+  }
+};
+
+module.exports = {
+  formatStats: formatStats,
+  clearConsole: clearConsole,
+};
+