upgrade and change to v6.0.0

Author: MacKentoch

.babelrc

@@ -8,10 +8,27 @@
     "flow"
   ],
   "plugins": [
+    "loadable-components/babel",
     "transform-regenerator",
     "transform-async-to-generator"
   ],
   "env": {
+    "test": {
+      "presets": [
+        ["env", {
+          "modules": "commonjs"
+        }],
+        "react",
+        "stage-2",
+        "flow",
+        "jest"
+      ],
+      "plugins": [
+        "loadable-components/babel",
+        "transform-regenerator",
+        "transform-async-to-generator"
+      ]
+    },
     "production": {
       "presets": [
         "react-optimize"

.eslintrc

@@ -9,3 +9,4 @@
 module.name_mapper='.*\(.css\)' -> 'CSSModule'
 module.system=haste
 strip_root=true
+suppress_comment= \\(.\\|\n\\)*\\$FlowIgnore

.flowconfig

@@ -7,3 +7,5 @@ dist/
 public/assets/
 /coverage
 /.nyc_output
+
+.DS_Store

.gitignore

@@ -0,0 +1,4 @@
+**/*.json
+**/*.txt
+**/*.xml
+**/*.svg

.prettierignore

@@ -0,0 +1,12 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "singleQuote": true,
+  "overrides": [],
+  "printWidth": 80,
+  "useTabs": false,
+  "tabWidth": 2,
+  "parser": "babylon"
+}

.prettierrc

@@ -11,4 +11,4 @@ before_install:
     - sh -e /etc/init.d/xvfb start
 before_script:
     - npm install
-after_success: npm run coverage
+after_success: npm run test

.travis.yml

@@ -1,4 +1,4 @@
-React 16 + React-Router 4 + Redux + Bootstrap + Webpack 3 with Hot Reload and redux-devtools-extension STARTER
+React 16+ React-Router 4 + Redux + Bootstrap + Webpack 4 with Hot Reload and redux-devtools-extension STARTER
 ==========
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/MacKentoch/react-redux-bootstrap-webpack-starter)
 [![Build Status](https://travis-ci.org/MacKentoch/react-redux-bootstrap-webpack-starter.svg?branch=master)](https://travis-ci.org/MacKentoch/react-redux-bootstrap-webpack-starter)
@@ -16,6 +16,20 @@ React 16 + React-Router 4 + Redux + Bootstrap + Webpack 3 with Hot Reload and re
 ![preview](./preview/preview.png)
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FMacKentoch%2Freact-redux-bootstrap-webpack-starter.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FMacKentoch%2Freact-redux-bootstrap-webpack-starter?ref=badge_shield)
 
+## Breaking changes since v6.0.0
+
+* upgrade to `React 16.3.x`
+* upgrade to `webpack 4`
+* upgrade to `react-hot-loader v4`
+* drop `CSS Module` in favor of `styled-components` (_scoped style, theme support, better scaling in huge applications, simplify toolchain and keep nearly SASS syntax_)
+* add `flow types` (*even a little typing at least for better dev experience*)
+* drop `prop-types`(*static and dynamic typing apart, flow type does far more so avoid writing 2 differents typing system*)
+* `workbox-webpack-plugin` (_service worker caching powerful tool from Google_)
+* [loadable-components](https://github.com/smooth-code/loadable-components) (_split your code: here splitted just by routes, by you can split a component level if you feel the need_)
+* `webpack-bundle-analyzer`: analyze your bundle size (_maybe you should split or lazy load some part of your application: you will see clearly how to fix that_)
+* drop `moment` for `date-fns` (*since far smaller size and job's done*)
+
+
 ## Breaking changes since v5.0.0
 - upgrade to React 16.x
 - `react-router 4+` with `react-router-redux ^5.0.0-alpha.8` (*read this [nice article about migrating from react-router 3 to react-router 4](https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a)*)
@@ -45,7 +59,7 @@ React 16 + React-Router 4 + Redux + Bootstrap + Webpack 3 with Hot Reload and re
 
 ## Breaking changes since v2.2.0
 - `cross-env` added so no more particular windows command
-- serve dev and prod bundles 
+- serve dev and prod bundles
  - `npm run serve-dev`: with server hot reload (*uses nodemon*)
  - `npm run serve-prod`: production like node-express server
 
@@ -65,7 +79,7 @@ React 16 + React-Router 4 + Redux + Bootstrap + Webpack 3 with Hot Reload and re
 ## Detailed Content
 
 **Front:**
-- React JS (16.x+ - [github :link:](https://github.com/facebook/react))
+- React JS (16.3+ - [github :link:](https://github.com/facebook/react))
 - Redux (*as you application grows managing state will be a serious concern, save pain with Redux*)
 - React-Redux (*Redux is not specific to ReactJS, you could easily use it with Angular2 for instance*)
 - redux-devtools-extension ([github :link:](https://github.com/zalmoxisus/redux-devtools-extension#redux-devtools-extension))
@@ -84,22 +98,18 @@ React 16 + React-Router 4 + Redux + Bootstrap + Webpack 3 with Hot Reload and re
 **Tool chain:**
 - babel 6+
 - eslint
-- webpack 2
+- webpack 4
 - hot reload
 - loaders
   - `js` / `jsx`
-  - sass
   - css
   - json
   - images formats
   - svg and fonts formats
 
 **tests:**
-- Mocha
-- Chai (*+ dirty-chai*)
+- Jest
 - enzyme
-- Sinon
-- nyc
 
 
 ## Usage

README.md

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>ReactJS Redux Bootstrap Starter</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="ReactJS Redux Bootstrap Starter">
+  <meta name="author" content="Erwan DATIN (MacKentoch)">
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+
+<body>
+  <section id="root"></section>
+  <script type="text/javascript" src="./public/assets/vendors.js"></script>
+  <script type="text/javascript" src="./public/assets/app.js"></script>
+</body>
+
+</html>

docs/200.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html><html><head><title>ReactJS Redux Bootstrap Starter</title><meta charset="utf-8"><meta content="IE=edge" http-equiv="X-UA-Compatible"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="ReactJS Redux Bootstrap Starter" name="description"><meta content="Erwan DATIN (MacKentoch)" name="author"><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css"><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"><style data-styled-components="">.eYqzQM{margin-right:10px}body,html{margin:0;height:100%;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}a{text-decoration:none;color:inherit}a:hover{text-decoration:none}@-webkit-keyframes GapJg{0%{opacity:0}100%{opacity:1;transform:none}}@keyframes GapJg{0%{opacity:0}100%{opacity:1;transform:none}}.cwEZas{opacity:0;animation-name:GapJg;animation-timing-function:ease-in;animation-duration:.7s;animation-delay:0s;animation-fill-mode:both}</style><script src="public/assets/2.js" charset="utf-8"></script><link href="https://cdnjs.cloudflare.com" rel="preconnect"></head><body><section id="root"><div id="appContainer"><nav class="navbar navbar-default"><div class="containersCustom"><div class="navbar-header"><button class="collapsed navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand">React Redux Bootstrap Starter</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><ul class="nav navbar-nav"></ul></ul><ul class="nav navbar-nav navbar-right"><ul class="nav navbar-nav navbar-right"><li><a href="/">Home</a></li><li><a href="/protected">Protected</a></li><li><a href="/about">About</a></li><li><a href="/login">Disconnect</a></li></ul></ul></div></div></nav><div class="container-fluid"><div class="cwEZas sc-bwzfXH"><div><div class="jumbotron"><h1>Sorry this page does not exists...</h1></div></div></div></div><button class="btn" style="transform:translate3d(120px,0,0);position:fixed;right:-10px;bottom:40px;width:100px;z-index:10;opacity:.5;background-color:#4a4a4a"><div class="eYqzQM sc-bdVaJa"><svg fill="#F1F1F1" height="24px" viewBox="0 0 512 512" width="24px"><path d="M256,213.7L256,213.7L256,213.7l174.2,167.2c4.3,4.2,11.4,4.1,15.8-0.2l30.6-29.9c4.4-4.3,4.5-11.3,0.2-15.5L264.1,131.1
+      c-2.2-2.2-5.2-3.2-8.1-3c-3-0.1-5.9,0.9-8.1,3L35.2,335.3c-4.3,4.2-4.2,11.2,0.2,15.5L66,380.7c4.4,4.3,11.5,4.4,15.8,0.2L256,213.7z"></path></svg></div></button></div></section><script src="./public/assets/vendors.js" type="text/javascript"></script><script src="./public/assets/app.js" type="text/javascript"></script></body></html>