Merge branch 'master' of github.com:bertho-zero/react-redux-universal-hot-example

Author: arfianadam

.babelrc

@@ -1,17 +1,58 @@
 {
   "presets": [
-    "react",
-    "es2015",
-    "stage-0"
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": ["last 2 versions", "IE >= 8"],
+          "node": "current"
+        },
+        "useBuiltIns": "entry"
+      }
+    ]
   ],
   "plugins": [
-    "transform-runtime",
-    "add-module-exports",
-    "transform-decorators-legacy"
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "corejs": 2
+      }
+    ],
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "react-loadable/babel",
+    "react-hot-loader/babel",
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-json-strings",
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions",
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-logical-assignment-operators",
+    "@babel/plugin-proposal-optional-chaining",
+    [
+      "@babel/plugin-proposal-pipeline-operator",
+      {
+        "proposal": "minimal"
+      }
+    ],
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@babel/plugin-proposal-do-expressions",
+    "@babel/plugin-proposal-function-bind"
   ],
   "env": {
     "development": {
-      "plugins": []
+      "plugins": [
+        "@babel/plugin-transform-react-jsx-source"
+      ]
     }
   }
 }

.bootstraprc

@@ -1,7 +1,7 @@
 {
   "bootstrapVersion": 3,
   "preBootstrapCustomizations": "./src/theme/variables.scss",
-  "appStyles": "./src/theme/bootstrap.overrides.scss",
+  "appStyles": "./src/theme/app.scss",
   "loglevel": "disabled",
   "env": {
     "development": {

.dockerignore

@@ -1,13 +1,15 @@
 .git/
 .idea/
 node_modules/
-yarn.lock
+package-lock.json
+npm-debug.log
+yarn-error.log
 static/dist/
 *.iml
 webpack-assets.json
 webpack-stats.json
-npm-debug.log
-.happypack
+.happypack/
 webpack/dlls/*.json
-api/**/*.nedb
-*.report.html
+# api/**/*.nedb
+*.report.html
+coverage/

.eslintignore

@@ -1,3 +1,2 @@
-webpack/*
-karma.conf.js
-tests.webpack.js
+node_modules/
+static/dist/

.eslintrc

@@ -1,48 +1,47 @@
 {
-  "extends": "eslint-config-airbnb",
+  "extends": "airbnb",
   "env": {
     "browser": true,
     "node": true,
-    "mocha": true,
+    "jest": true,
     "es6": true
   },
   "rules": {
-    "react/no-multi-comp": "warn",
-    "react/jsx-first-prop-new-line": ["warn", "multiline"],
-    "react/prefer-stateless-function": "off",
-    "react/jsx-closing-bracket-location": "off",
+    "arrow-parens": ["error", "as-needed"],
+    "comma-dangle": ["error", "only-multiline"],
+    "consistent-return": "off",
+    "global-require": "off",
+    "indent": ["error", 2, {"SwitchCase": 1}],
+    "max-len": ["warn", 120],
+    "no-alert": "off",
+    "no-confusing-arrow": "off",
+    "no-console": "off",
+    "no-param-reassign": "off",
+    "no-underscore-dangle": "off",
+    "prefer-promise-reject-errors": "warn",
+    "prefer-template": "warn",
+    "react/forbid-prop-types": "warn",
+    "react/jsx-closing-tag-location": "off",
     "react/jsx-filename-extension": "off",
-    "react/self-closing-comp": "off",
     "react/jsx-no-target-blank": "warn",
-    "react/no-find-dom-node": "warn",
-    "react/forbid-prop-types": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "react/no-multi-comp": ["error", {"ignoreStateless": true}],
     "react/no-unescaped-entities": "off",
+    "react/prefer-stateless-function": "warn",
+    "jsx-a11y/label-has-for": ["error", {"allowChildren": true}],
+    "jsx-a11y/anchor-is-valid": [
+      "error",
+      {
+        "components": ["Link"],
+        "specialLink": ["to"],
+        "aspects": ["noHref", "invalidHref", "preferButton"]
+      }
+    ],
     "import/default": "off",
-    "import/extensions": ["off"],
-    "import/no-duplicates": "off",
-    "import/named": "off",
-    "import/namespace": "off",
-    "import/no-unresolved": "off",
-    "import/no-named-as-default": "error",
-    "import/imports-first": "off",
-    "import/prefer-default-export": "off",
+    "import/extensions": "off",
     "import/no-extraneous-dependencies": "off",
-    "import/newline-after-import": "off",
-    "comma-dangle": "off", // not sure why airbnb turned this on. gross!
-    "consistent-return": "off",
-    "no-param-reassign": "off",
-    "prefer-template": "warn",
-    "global-require": "off",
-    "no-case-declarations": "off",
-    "no-underscore-dangle": "off",
-    "arrow-parens": "off",
-    "class-methods-use-this": "off",
-    "no-bitwise": "off",
-    "no-plusplus": "off",
-    "no-console": "off",
-    "no-alert": "off",
-    "max-len": ["error", 120],
-    "indent": ["error", 2, {"SwitchCase": 1}]
+    "import/no-named-as-default": "error",
+    "import/no-unresolved": "off"
   },
   "plugins": [
     "react",
@@ -52,7 +51,8 @@
     "import/resolve": {
       "moduleDirectory": [
         "node_modules",
-        "src"
+        "src",
+        "api"
       ]
     }
   },
@@ -67,7 +67,6 @@
     "__DISABLE_SSR__": true,
     "__DEVTOOLS__": true,
     "__DLLS__": true,
-    "socket": true,
     "webpackIsomorphicTools": true
   }
 }

.gitignore

@@ -1,12 +1,14 @@
 .idea/
 node_modules/
-yarn.lock
+package-lock.json
+npm-debug.log
+yarn-error.log
 static/dist/
 *.iml
 webpack-assets.json
 webpack-stats.json
-npm-debug.log
-.happypack
+.happypack/
 webpack/dlls/*.json
 api/**/*.nedb
-*.report.html
+*.report.html
+coverage/

.travis.yml

@@ -3,10 +3,8 @@ dist: trusty
 language: node_js
 
 node_js:
-  - "4"
-  - "5"
-  - "6"
-  - "stable"
+  - '10'
+  - '8'
 
 addons:
   apt:
@@ -20,16 +18,25 @@ sudo: required
 
 before_install:
   - sudo apt-get -qq update
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH="$HOME/.yarn/bin:$PATH"
+
+install:
+  - yarn
 
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
   - export NODE_ENV=development
 
+cache:
+  yarn: true
+  directories:
+    - node_modules
+
 script:
-  - npm run lint
-  - npm test
-  - npm run test-node
+  - yarn lint
+  - yarn test
 
 env:
   - TRAVIS=travis CXX=g++-4.8

CONTRIBUTING.md

@@ -12,7 +12,7 @@ Please make sure that there aren't existing pull requests attempting to address
 
 ### Linting
 
-Please check your code using `npm run lint` before submitting your pull requests, as the CI build will fail if `eslint` fails.
+Please check your code using `yarn lint` before submitting your pull requests, as the CI build will fail if `eslint` fails.
 
 ### Commit Message Format
 

Dockerfile

@@ -1,4 +1,4 @@
-FROM mhart/alpine-node:6
+FROM mhart/alpine-node:8
 
 # Install required dependencies (Alpine Linux packages)
 RUN apk update && \
@@ -17,16 +17,19 @@ RUN apk update && \
 
 # Add user and make it sudoer
 ARG uid=1000
-ARG user
-RUN adduser -DS -u $uid $user
+ARG user=username
+RUN set -x ; \
+  addgroup -g $uid -S $user ; \
+  adduser -u $uid -D -S -G $user $user \
+  && exit 0 ; exit 1
 RUN echo $user' ALL=(ALL) NOPASSWD:ALL' >> /etc/sudoers
 
-# Switch to directory for external dependencies (installed from source)
-WORKDIR /external
-
-# Install (global) NPM packages/dependencies
-RUN npm install -g \
-  node-gyp
+# Install (global) Yarn packages/dependencies
+RUN yarn global add node-gyp
+RUN git clone --recursive https://github.com/sass/node-sass.git \
+  && cd node-sass \
+  && yarn \
+  && node scripts/build -f
 
 # Make project directory with permissions
 RUN mkdir /project
@@ -37,5 +40,10 @@ WORKDIR /project
 # Copy required stuff
 COPY . .
 
-# Install (local) NPM packages and build
-RUN npm install && npm run postinstall
+# Give owner rights to the current user
+RUN chown -Rh $user:$user /project
+
+# Install (local) Yarn packages and build
+RUN yarn
+
+USER $user

README.md

@@ -26,14 +26,15 @@ This is a starter boilerplate app I've put together using the following technolo
 * [Redux Dev Tools](https://github.com/reactjs/redux-devtools) for next generation DX (developer experience). Watch [Dan Abramov's talk](https://www.youtube.com/watch?v=xsSnOQynTHs).
 * [React Router Redux](https://github.com/reactjs/react-router-redux) Redux/React Router bindings.
 * [ESLint](http://eslint.org) to maintain a consistent code style
-* [redux-form](http://redux-form.com/) to manage form state in Redux
+* [react-final-form](https://github.com/final-form/react-final-form) to manage form state
 * [lru-memoize](https://github.com/erikras/lru-memoize) to speed up form validation
 * [multireducer](https://github.com/erikras/multireducer) to combine single reducers into one key-based reducer
 * [style-loader](https://github.com/webpack/style-loader), [sass-loader](https://github.com/jtangelder/sass-loader) and [less-loader](https://github.com/webpack/less-loader) to allow import of stylesheets in plain css, sass and less,
-* [bootstrap-loader](https://github.com/shakacode/bootstrap-loader) and [font-awesome-webpack](https://github.com/gowravshekar/font-awesome-webpack) to customize Bootstrap and FontAwesome
+* [bootstrap-loader](https://github.com/shakacode/bootstrap-loader) to customize Bootstrap
+* [font-awesome](https://github.com/FortAwesome/Font-Awesome)
 * [react-helmet](https://github.com/nfl/react-helmet) to manage title and meta tag information on both server and client
 * [webpack-isomorphic-tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools) to allow require() work for statics both on client and server
-* [Jest](https://facebook.github.io/jest/) and [mocha](https://mochajs.org/) to allow writing unit tests for the project.
+* [Jest](https://facebook.github.io/jest/) to allow writing unit tests for the project.
 
 I cobbled this together from a wide variety of similar "starter" repositories. As I post this in June 2015, all of these libraries are right at the bleeding edge of web development. They may fall out of fashion as quickly as they have come into it, but I personally believe that this stack is the future of web development and will survive for several years. I'm building my new projects like this, and I recommend that you do, too.
 
@@ -81,13 +82,13 @@ This new level of quality allows Progressive Web Apps to earn a place on the use
 ## Installation
 
 ```bash
-npm install
+yarn
 ```
 
 ## Running Dev Server
 
 ```bash
-npm run dev
+yarn dev
 ```
 
 The first time it may take a little while to generate the first `webpack-assets.json` and complain with a few dozen `[webpack-isomorphic-tools] (waiting for the first Webpack build to finish)` printouts, but be patient. Give it 30 seconds.
@@ -108,8 +109,8 @@ DevTools are not enabled during production by default.
 ## Building and Running Production Server
 
 ```bash
-npm run build
-npm run start
+yarn build
+yarn start
 ```
 
 ## Demo
@@ -133,7 +134,7 @@ We also spit out the `redux` state into a global `window.__data` variable in the
 
 #### Server-side Data Fetching
 
-The [redux-connect](https://www.npmjs.com/package/redux-connect) package exposes an API to return promises that need to be fulfilled before a route is rendered. It exposes a `<ReduxAsyncConnect />` container, which wraps our render tree on both [server](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/server.js) and [client](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/client.js). More documentation is available on the [redux-connect](https://www.npmjs.com/package/redux-connect) page.
+The [redial](https://www.npmjs.com/package/redial) package exposes an API to return promises that need to be fulfilled before a route is rendered. It exposes a `<ReduxAsyncConnect />` container, which wraps our render tree on both [server](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/server.js) and [client](https://github.com/bertho-zero/react-redux-universal-hot-example/blob/master/src/client.js). More documentation is available on the [redial](https://www.npmjs.com/package/redial) page.
 
 #### Client Side
 
@@ -240,17 +241,15 @@ After this modification to both loaders you will be able to use scss and less fi
 
 #### Unit Tests
 
-The project uses [Jest](https://facebook.github.io/jest/) and [Mocha](https://mochajs.org/) to run your unit tests, it uses [Karma](http://karma-runner.github.io/0.13/index.html) as the test runner, it enables the feature that you are able to render your tests to the browser (e.g: Firefox, Chrome etc.), which means you are able to use the [Test Utilities](http://facebook.github.io/react/docs/test-utils.html) from Facebook api like `renderIntoDocument()`.
+The project uses [Jest](https://facebook.github.io/jest/) to run your unit tests.
 
-To run the tests in the project, just simply run `npm test` if you have `Chrome` installed, it will be automatically launched as a test service for you.
-
-To keep watching your test suites that you are working on, just set `singleRun: false` in the `karma.conf.js` file. Please be sure set it to `true` if you are running `npm test` on a continuous integration server (travis-ci, etc).
+To run the tests in the project, just simply run `yarn test` if you have `Chrome` installed, it will be automatically launched as a test service for you.
 
 ## Deployment on Heroku
 
 To get this project to work on Heroku, you need to:
 
-1. Remove the `"PORT": 8080` line from the `betterScripts` / `start-prod` section of `package.json`.
+1. Remove the `"PORT": 8080` line from the `start-prod` script of `package.json`.
 2. `heroku config:set NODE_ENV=production`
 3. `heroku config:set NODE_PATH=./src`
 4. `heroku config:set NPM_CONFIG_PRODUCTION=false`