Update to react router v4

.gitignore

@@ -10,4 +10,5 @@ build
 
 # misc
 .DS_Store
-npm-debug.log
+npm-debug.log
+.vscode

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 
 node_js:
-  - 4.2
+  - 4
   - 5
   - 6
 

configuration/babel/babel.dev.js

@@ -2,9 +2,9 @@ module.exports = {
   babelrc: false,
   cacheDirectory: true,
   presets: [
-    'babel-preset-es2015',
-    'babel-preset-stage-0',
-    'babel-preset-react',
+    [ 'es2015', { loose: true, modules: false } ],
+    'stage-0',
+    'react'
   ],
-  plugins: ['react-hot-loader/babel'],
+  plugins: [ 'react-hot-loader/babel' ]
 };

configuration/babel/babel.prod.js

@@ -1,13 +1,11 @@
 module.exports = {
   babelrc: false,
   presets: [
-    'babel-preset-es2015',
-    'babel-preset-stage-0',
-    'babel-preset-react'
+    [ 'es2015', { loose: true, modules: false } ],
+    'stage-0',
+    'react'
   ].map(require.resolve),
-  plugins: [
-    'babel-plugin-transform-react-constant-elements',
-  ].map(require.resolve).concat([
-    [require.resolve('babel-plugin-transform-runtime')]
-  ])
-};
+  plugins: [ 'babel-plugin-transform-react-constant-elements' ]
+    .map(require.resolve)
+    .concat([ [ require.resolve('babel-plugin-transform-runtime') ] ])
+};

configuration/babel/babel.test.js

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

configuration/eslint/eslint.js

@@ -2,32 +2,28 @@ module.exports = {
   root: true,
   parser: 'babel-eslint',
   extends: 'formidable/configurations/es6-react',
-  env: {
-    browser: true,
-    commonjs: true,
-    es6: true,
-    node: true,
-    mocha: true,
-  },
-  globals: {
-    'expect': true,
-  },
+  env: { browser: true, commonjs: true, es6: true, node: true, mocha: true },
+  globals: { expect: true },
   parserOptions: {
     ecmaVersion: 6,
     sourceType: 'module',
     ecmaFeatures: {
       jsx: true,
       generators: true,
-      experimentalObjectRestSpread: true,
-    },
+      experimentalObjectRestSpread: true
+    }
   },
   rules: {
-    'quotes': [2, 'single', { 'allowTemplateLiterals': true }],
+    quotes: [ 2, 'single', { allowTemplateLiterals: true } ],
+    'no-magic-numbers': 'off',
+    'func-style': 'off',
+    'arrow-parens': 'off',
+    'no-use-before-define': 'off',
     'react/jsx-filename-extension': 'off',
     'react/require-extension': 'off',
     'react/no-multi-comp': 'warn',
     'react/prop-types': 'warn',
     'react/sort-comp': 'warn',
-    'react/sort-prop-types': 'warn',
-  },
+    'react/sort-prop-types': 'warn'
+  }
 };

configuration/polyfills/polyfills.js

@@ -3,4 +3,4 @@ if (typeof Promise === 'undefined') {
   window.Promise = require('promise/lib/es6-extensions.js');
 }
 
-require('whatwg-fetch');
+require('whatwg-fetch');

configuration/webpack/webpack.config.dev.js

@@ -20,9 +20,7 @@ module.exports = {
     filename: 'static/js/bundle.js',
     publicPath: '/'
   },
-  resolve: {
-    extensions: ['.js', '.json']
-  },
+  resolve: { extensions: [ '.js', '.json' ] },
   module: {
     loaders: [
       {
@@ -33,30 +31,21 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        include: [src, nodeModules],
+        include: [ src, nodeModules ],
         loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
       },
-      {
-        test: /\.json$/,
-        include: [src, nodeModules],
-        loader: 'json-loader'
-      },
+      { test: /\.json$/, include: [ src, nodeModules ], loader: 'json-loader' },
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
-        include: [src, nodeModules],
+        include: [ src, nodeModules ],
         loader: 'file-loader',
-        query: {
-          name: 'static/media/[name].[ext]'
-        }
+        query: { name: 'static/media/[name].[ext]' }
       },
       {
         test: /\.(mp4|webm)(\?.*)?$/,
-        include: [src, nodeModules],
+        include: [ src, nodeModules ],
         loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: 'static/media/[name].[ext]'
-        }
+        query: { limit: 10000, name: 'static/media/[name].[ext]' }
       }
     ]
   },
@@ -73,7 +62,7 @@ module.exports = {
           useEslintrc: false
         },
         postcss() {
-          return [autoprefixer];
+          return [ autoprefixer ];
         }
       }
     }),

configuration/webpack/webpack.config.prod.js

@@ -5,7 +5,9 @@ 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');
+const HtmlWebpackInlineSourcePlugin = require(
+  'html-webpack-inline-source-plugin'
+);
 
 const src = path.resolve('src');
 const nodeModules = path.resolve('node_modules');
@@ -15,19 +17,14 @@ const publicPath = '/';
 module.exports = {
   bail: true,
   devtool: 'source-map',
-  entry: [
-    require.resolve('../polyfills/polyfills'),
-    path.join(src, 'index')
-  ],
+  entry: [ require.resolve('../polyfills/polyfills'), path.join(src, 'index') ],
   output: {
     path: path.resolve('build'),
     filename: 'static/js/[name].[chunkhash:8].js',
     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
     publicPath
   },
-  resolve: {
-    extensions: ['.js', '.json']
-  },
+  resolve: { extensions: [ '.js', '.json' ] },
   module: {
     loaders: [
       {
@@ -38,36 +35,29 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        include: [src, nodeModules],
-        loader: ExtractTextPlugin.extract(
-          {
-            fallbackLoader: 'style-loader',
-            loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]-autoprefixer!postcss-loader'
-          }
-        )
+        include: [ src, nodeModules ],
+        loader: ExtractTextPlugin.extract({
+          fallbackLoader: 'style-loader',
+          loader: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]-autoprefixer!postcss-loader'
+        })
       },
       {
         test: /\.json$/,
-        include: [src, nodeModules],
+        include: [ src, nodeModules ],
         loader: 'json-loader',
         exclude: /manifest.json$/
       },
       {
         test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
-        include: [src, nodeModules],
+        include: [ src, nodeModules ],
         loader: 'file-loader',
-        query: {
-          name: 'static/media/[name].[hash:8].[ext]'
-        }
+        query: { name: 'static/media/[name].[hash:8].[ext]' }
       },
       {
         test: /\.(mp4|webm)(\?.*)?$/,
-        include: [src, nodeModules],
+        include: [ src, nodeModules ],
         loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: 'static/media/[name].[hash:8].[ext]'
-        }
+        query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
       }
     ]
   },
@@ -98,35 +88,25 @@ module.exports = {
           useEslintrc: false
         },
         postcss() {
-          return [autoprefixer];
+          return [ autoprefixer ];
         }
       }
     }),
     new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
     new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        screw_ie8: true,
-        warnings: false
-      },
-      mangle: {
-        screw_ie8: true
-      },
-      output: {
-        comments: false,
-        screw_ie8: true
-      }
+      compress: { screw_ie8: true, warnings: false },
+      mangle: { screw_ie8: true },
+      output: { comments: false, screw_ie8: true }
     }),
     new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
     new CopyWebpackPlugin([
-        { from: 'public' },
-        { from: 'manifest.webmanifest' }
+      { from: 'public' },
+      { from: 'manifest.webmanifest' }
     ]),
-    new SWPrecacheWebpackPlugin(
-      {
-        cacheId: 'formidable-react-starter',
-        filename: 'service-worker.js'
-      }
-    )
+    new SWPrecacheWebpackPlugin({
+      cacheId: 'formidable-react-starter',
+      filename: 'service-worker.js'
+    })
   ]
 };

package.json

@@ -26,8 +26,9 @@
     "express": "^4.14.0",
     "react": "^15.3.0",
     "react-dom": "^15.3.0",
+    "react-helmet": "^4.0.0",
     "react-hot-loader": "^3.0.0-beta.2",
-    "react-router": "^3.0.0",
+    "react-router-dom": "next",
     "serve-favicon": "^2.3.0"
   },
   "devDependencies": {

server/development.js

@@ -13,30 +13,28 @@ 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) => {
+compiler.plugin('done', stats => {
   utils.formatStats(stats, PORT);
 });
 
 // Launch server
-
 var app = express();
 
-app.use(historyApiFallback({
-  verbose: false
-}));
+app.use(historyApiFallback({ verbose: false }));
 
-app.use(require('webpack-dev-middleware')(compiler, {
-  noInfo: true,
-  publicPath: config.output.publicPath,
-}));
+app.use(
+  require('webpack-dev-middleware')(compiler, {
+    noInfo: true,
+    publicPath: config.output.publicPath
+  })
+);
 
 app.use(require('webpack-hot-middleware')(compiler));
 
@@ -46,7 +44,7 @@ app.get('*', (req, res) => {
   res.sendFile(path.resolve('index.html'));
 });
 
-app.listen(PORT, (err) => {
+app.listen(PORT, err => {
   if (err) {
     console.log(err);
     return;

server/production.js

@@ -9,7 +9,6 @@ var utils = require('./utils');
 var PORT = process.env.PORT || 80;
 
 // Launch server
-
 var app = express();
 
 app.use(express.static('./build'));
@@ -20,7 +19,7 @@ app.get('*', (req, res) => {
   res.sendFile(path.resolve('./build/index.html'));
 });
 
-app.listen(PORT, (err) => {
+app.listen(PORT, err => {
   if (err) {
     console.log(err);
     return;