Update boilerplate

configuration/eslint/eslint.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   parser: 'babel-eslint',
-  extends: 'airbnb',
+  extends: 'formidable/configurations/es6-react',
   env: {
     browser: true,
     commonjs: true,
@@ -22,9 +22,7 @@ module.exports = {
     },
   },
   rules: {
-    'global-require': 'off',
-    'import/no-unresolved': 'off',
-    'import/no-extraneous-dependencies': 'off',
+    'quotes': [2, 'single', { 'allowTemplateLiterals': true }],
     'react/jsx-filename-extension': 'off',
     'react/require-extension': 'off',
     'react/no-multi-comp': 'warn',

configuration/webpack/webpack.config.dev.js

@@ -1,96 +1,85 @@
-var path = require('path');
-var autoprefixer = require('autoprefixer');
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
+const autoprefixer = require('autoprefixer');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
-var src = path.resolve('src');
-var node_modules = path.resolve('node_modules');
+const src = path.resolve('src');
+const nodeModules = path.resolve('node_modules');
 
 module.exports = {
   devtool: 'eval',
   entry: [
     'webpack-hot-middleware/client?quiet=true&noInfo=true',
     require.resolve('react-hot-loader/patch'),
     require.resolve('../polyfills/polyfills'),
-    path.join(src, 'index'),
+    path.join(src, 'index')
   ],
   output: {
     path: path.resolve('build'),
     pathinfo: true,
     filename: 'static/js/bundle.js',
-    publicPath: '/',
+    publicPath: '/'
   },
   resolve: {
-    extensions: ['', '.js', '.json'],
-    packageMains: [
-      'jsnext:main',
-      'main',
-    ],
-  },
-  resolveLoader: {
-    root: node_modules,
-    moduleTemplates: ['*-loader'],
+    extensions: ['.js', '.json']
   },
   module: {
-    preLoaders: [
-      {
-        test: /\.js$/,
-        loader: 'eslint',
-        include: src,
-      },
-    ],
     loaders: [
       {
         test: /\.js$/,
         include: src,
-        loader: 'babel',
-        query: require('../babel/babel.dev'),
+        loader: 'babel-loader',
+        query: require('../babel/babel.dev')
       },
       {
         test: /\.css$/,
-        include: [src, node_modules],
-        loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss'
+        include: [src, nodeModules],
+        loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
       },
       {
         test: /\.json$/,
-        include: [src, node_modules],
-        loader: 'json',
+        include: [src, nodeModules],
+        loader: 'json-loader'
       },
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
-        include: [src, node_modules],
-        loader: 'file',
+        include: [src, nodeModules],
+        loader: 'file-loader',
         query: {
-          name: 'static/media/[name].[ext]',
-        },
+          name: 'static/media/[name].[ext]'
+        }
       },
       {
         test: /\.(mp4|webm)(\?.*)?$/,
-        include: [src, node_modules],
-        loader: 'url',
+        include: [src, nodeModules],
+        loader: 'url-loader',
         query: {
           limit: 10000,
-          name: 'static/media/[name].[ext]',
-        },
-      },
-    ],
-  },
-  eslint: {
-    configFile: path.resolve('./configuration/eslint/eslint.js'),
-    useEslintrc: false,
-  },
-  postcss: function() {
-    return [autoprefixer];
+          name: 'static/media/[name].[ext]'
+        }
+      }
+    ]
   },
   plugins: [
     new HtmlWebpackPlugin({
       inject: true,
       template: path.resolve('index.html'),
-      favicon: path.resolve('favicon.png'),
+      favicon: path.resolve('favicon.png')
+    }),
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        eslint: {
+          configFile: path.resolve('./configuration/eslint/eslint.js'),
+          useEslintrc: false
+        },
+        postcss() {
+          return [autoprefixer];
+        }
+      }
     }),
     new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }),
     // Note: only CSS is currently hot reloaded
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
-  ],
+    new webpack.NoEmitOnErrorsPlugin()
+  ]
 };

configuration/webpack/webpack.config.prod.js

@@ -1,14 +1,16 @@
-var path = require('path');
-var autoprefixer = require('autoprefixer');
-var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var url = require('url');
+const path = require('path');
+const autoprefixer = require('autoprefixer');
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
 
-var src = path.resolve('src');
-var node_modules = path.resolve('node_modules');
+const src = path.resolve('src');
+const nodeModules = path.resolve('node_modules');
 
-var publicPath = '/';
+const publicPath = '/';
 
 module.exports = {
   bail: true,
@@ -21,80 +23,60 @@ module.exports = {
     path: path.resolve('build'),
     filename: 'static/js/[name].[chunkhash:8].js',
     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
-    publicPath: publicPath
+    publicPath
   },
   resolve: {
-    extensions: ['', '.js', '.json'],
-    packageMains: [
-      'jsnext:main',
-      'main',
-    ],
-  },
-  resolveLoader: {
-    root: node_modules,
-    moduleTemplates: ['*-loader']
+    extensions: ['.js', '.json']
   },
   module: {
-    preLoaders: [
-      {
-        test: /\.js$/,
-        loader: 'eslint',
-        include: src
-      }
-    ],
     loaders: [
       {
         test: /\.js$/,
         include: src,
-        loader: 'babel',
+        loader: 'babel-loader',
         query: require('../babel/babel.prod')
       },
       {
         test: /\.css$/,
-        include: [src, node_modules],
+        include: [src, nodeModules],
         loader: ExtractTextPlugin.extract(
           {
-            fallbackLoader: 'style',
-            loader: 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]-autoprefixer!postcss',
+            fallbackLoader: 'style-loader',
+            loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]-autoprefixer!postcss-loader'
           }
-        ),
+        )
       },
       {
         test: /\.json$/,
-        include: [src, node_modules],
-        loader: 'json'
+        include: [src, nodeModules],
+        loader: 'json-loader',
+        exclude: /manifest.json$/
       },
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
-        include: [src, node_modules],
-        loader: 'file',
+        include: [src, nodeModules],
+        loader: 'file-loader',
         query: {
           name: 'static/media/[name].[hash:8].[ext]'
         }
       },
       {
         test: /\.(mp4|webm)(\?.*)?$/,
-        include: [src, node_modules],
-        loader: 'url',
+        include: [src, nodeModules],
+        loader: 'url-loader',
         query: {
           limit: 10000,
           name: 'static/media/[name].[hash:8].[ext]'
         }
       }
     ]
   },
-  eslint: {
-    configFile: path.join(__dirname, '../eslint/eslint.js'),
-    useEslintrc: false
-  },
-  postcss: function() {
-    return [autoprefixer];
-  },
   plugins: [
     new HtmlWebpackPlugin({
-      inject: true,
+      inject: 'body',
       template: path.resolve('index.html'),
       favicon: path.resolve('favicon.png'),
+      inlineSource: '.(js|css)$',
       minify: {
         removeComments: true,
         collapseWhitespace: true,
@@ -108,9 +90,20 @@ module.exports = {
         minifyURLs: true
       }
     }),
+    new HtmlWebpackInlineSourcePlugin(),
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        eslint: {
+          configFile: path.resolve('./configuration/eslint/eslint.js'),
+          useEslintrc: false
+        },
+        postcss() {
+          return [autoprefixer];
+        }
+      }
+    }),
     new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
     new webpack.optimize.OccurrenceOrderPlugin(),
-    new webpack.optimize.DedupePlugin(),
     new webpack.optimize.UglifyJsPlugin({
       compress: {
         screw_ie8: true,
@@ -124,6 +117,16 @@ module.exports = {
         screw_ie8: true
       }
     }),
-    new ExtractTextPlugin('static/css/[name].[contenthash:8].css')
+    new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
+    new CopyWebpackPlugin([
+        { from: 'public' },
+        { from: 'manifest.webmanifest' }
+    ]),
+    new SWPrecacheWebpackPlugin(
+      {
+        cacheId: 'formidable-react-starter',
+        filename: 'service-worker.js'
+      }
+    )
   ]
 };

index.html

@@ -3,9 +3,13 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#db5945">
     <title>Formidable React App Starter</title>
+    <link rel="manifest" href="/manifest.webmanifest">
   </head>
   <body>
+    <noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
+
     <div id="root"></div>
   </body>
 </html>

manifest.webmanifest

@@ -0,0 +1,51 @@
+{
+  "name": "Formidable React Starter",
+  "short_name": "Formidable",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "theme_color": "#000",
+  "description": "A modern ReactJS starter template.",
+  "icons": [
+    {
+      "src": "/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}