JohannBillar · JohannBillar · Jul 11, 2017 · Jul 11, 2017 · Jul 13, 2017 · Jul 13, 2017
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,28 @@
 {
-  "presets": ["es2015", "react"]
+  "presets": [
+    "react",
+    ["env", {
+      "targets": {
+        "browsers": "last 2 versions"
+      },
+      "loose": true,
+      "modules": false
+    }]
+  ],
+  "plugins": [
+    "react-hot-loader/babel",
+    "babel-plugin-transform-class-properties"
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        "babel-plugin-transform-es2015-modules-commonjs"
+      ]
+    },
+    "server": {
+      "plugins": [
+        "babel-plugin-transform-es2015-modules-commonjs"
+      ]
+    }
+  }
 }
diff --git a/.editorconfig b/.editorconfig
@@ -7,3 +7,4 @@ indent_size = 2
 end_of_line = lf
 charset = utf-8
 insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+public/
+node_modules/
diff --git a/.eslintrc b/.eslintrc
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,38 @@
+
+{
+  "extends": [
+    // "plugin:flowtype/recommended",
+    "airbnb",
+    "prettier",
+    "prettier/react"
+  ],
+  "plugins": [
+    // "flowtype",
+    "prettier"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 2016,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true,
+    "jest": true
+  }
+  // "rules": {
+  //   "no-cond-assign": [2, "except-parens"],
+  //   "radix": 0,
+  //   "space-infix-ops": 0,
+  //   "no-unused-vars": [1, {"vars": "local", "args": "none"}],
+  //   "default-case": 0,
+  //   "no-else-return": 0,
+  //   "no-param-reassign": 0,
+  //   "no-console": 0,
+  //   "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
+  // }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,10 +1,33 @@
-.DS_Store
-
+# dependencies
 node_modules/
+
+# testing
+/coverage
+.nyc_output
+.eslintcache
+
+# production
+/build
+*.map
+*.bundle.js
+
 public/bundle.js
+public/*bundle*
 public/images/
 
+_site/
+.sass-cache/
+
+# misc
+.DS_Store
+.env
+*.iml
+.idea/
 .config.js
 
-.eslintcache
-npm-debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+functions/firebase-debug.log
+
diff --git a/README.md b/README.md
@@ -1,15 +1,16 @@
-# ReactJS Project Boilerplate
+# ReactJS Project Boilerplate v2
 ## Repo created to quickly setup my React projects.
+## Inspired by Complete Intro to React, v3
 
 ### Quick start a project with:
-* Webpack and webpack-dev-server
-* Babel 6
+* Prettier
 * ESLint (extended with airbnb)
-* Jest
+* Webpack2 and webpack-dev-server
+* Babel 6
+* Jest/Enzyme
 * SASS
 * Express
 * React-Router
-* Much more coming...
 
 ___
 ### Usage:
@@ -20,9 +21,10 @@ $ git clone --bare https://github.com/JohannBillar/reactjs-boilerplate.git .git
 $ git config --bool core.bare false
 $ git reset --hard
 
-$ npm install
-$ npm test
-$ npm start or $ NODE_ENV=production npm start
+$ yarn
+$ $ yarn start or $ NODE_ENV=production npm start
+$ yarn test
+
 ```
 ___
 ### TODO

diff --git a/app/index.js b/app/index.js
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -4,10 +4,10 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
-  <title>React Boilerplate</title>
+  <title>ReactJS Boilerplate V2</title>
 </head>
 <body>
-  <div id="app"></div>
-  <script src="/bundle.js"></script>
+  <div id="root"></div>
+  <script src="/public/bundle.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,61 +1,93 @@
 {
-  "name": "reactjs-boilerplate",
-  "version": "0.0.1",
-  "description": "Quick React starter boilerplate.",
-  "main": "index.js",
+  "name": "Quick-ReactJS-Boilerplate",
+  "version": "2.0.1",
+  "description": "Quick ReactJS project starter boilerplate.",
+  "main": "server.js",
   "scripts": {
-    "test": "jest",
-    "lint": "eslint app",
+    "format": "prettier --write --single-quote --print-width=120 --parser=flow --tab-width=2 \"src/**/*.{js,jsx}\"",
+    "lint": "eslint **/*.{js,jsx} --quiet",
+    "test": "NODE_ENV=test jest",
+    "test:update": "jest -u",
+    "test:coverage": "NODE_ENV=test jest --coverage",
+    "test:no-cache": "jest --no-cache",
+    "server": "firebase serve",
+    "deploy": "firebase deploy",
+    "deploy:hosting": "firebase deploy --only hosting",
+    "deploy:functions": "firebase deploy --only functions",
+    "build": "webpack",
+    "watch": "webpack --watch",
     "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
-    "start:dev": "webpack-dev-server --progress --colors --hot --inline --watch --history-api-fallback",
+    "start:dev": "webpack-dev-server --progress --colors --inline --watch --history-api-fallback",
     "start:prod": "webpack && node server.js"
   },
-  "keywords": [
-    "react",
-    "boilerplate",
-    "javascript"
-  ],
+  "jest": {
+    "snapshotSerializers": ["jest-serializer-enzyme"]
+  },
+  "keywords": ["reactJS", "boilerplate", "javascript", "firebase"],
   "author": "Johann Billar <jwbillar@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "axios": "^0.16.1",
+    "axios": "^0.16.2",
+    "babel-plugin-dynamic-import-webpack": "^1.0.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-register": "^6.24.1",
     "compression": "^1.6.2",
-    "express": "^4.14.0",
+    "cors": "^2.8.3",
+    "enzyme": "^2.8.2",
+    "express": "^4.15.3",
+    "firebase": "^4.1.3",
     "if-env": "^1.0.0",
     "lodash": "^4.17.2",
-    "prop-types": "^15.5.6",
-    "react": "^15.5.0",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.0",
     "react-addons-css-transition-group": "^15.4.1",
+    "react-addons-perf": "^15.4.2",
     "react-addons-transition-group": "^15.4.1",
-    "react-dom": "^15.4.1",
-    "react-redux": "^5.0.4",
-    "react-router": "^4.0.0",
-    "redux": "^3.6.0"
+    "react-bootstrap": "^0.31.0",
+    "react-dom": "^15.6.0",
+    "react-router-dom": "^4.1.1",
+    "webpack": "^2.6.1",
+    "webpack-dev-middleware": "1.10.2",
+    "webpack-hot-middleware": "^2.18.0"
   },
   "devDependencies": {
-    "babel-core": "^6.21.1",
-    "babel-eslint": "^7.1.1",
-    "babel-jest": "^17.0.2",
-    "babel-loader": "^6.2.8",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.16.0",
+    "babel-core": "^6.25.0",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-dynamic-import-node": "^1.0.2",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
+    "babel-preset-env": "^1.5.2",
+    "babel-preset-react": "^6.24.1",
     "css-loader": "^0.25.0",
-    "eslint": "^3.10.2",
-    "eslint-config-airbnb": "^12.0.0",
-    "eslint-loader": "^1.6.1",
-    "eslint-plugin-import": "^1.16.0",
-    "eslint-plugin-jsx-a11y": "^2.2.2",
-    "eslint-plugin-react": "^6.7.1",
-    "file-loader": "^0.9.0",
-    "jest": "^19.0.2",
+    "eslint": "3.19.0",
+    "eslint-config-airbnb": "^15.0.1",
+    "eslint-config-prettier": "^2.1.1",
+    "eslint-config-react": "^1.1.7",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-flow": "^2.29.1",
+    "eslint-plugin-flowtype": "^2.34.0",
+    "eslint-plugin-import": "^2.3.0",
+    "eslint-plugin-jsx-a11y": "^5.0.3",
+    "eslint-plugin-prettier": "^2.1.2",
+    "eslint-plugin-react": "^7.1.0",
+    "file-loader": "^0.11.2",
+    "flow-bin": "^0.48.0",
+    "jest": "^20.0.4",
+    "jest-serializer-enzyme": "^1.0.0",
+    "moxios": "0.4.0",
+    "nodemon": "1.11.0",
     "node-sass": "^3.10.1",
-    "react-test-renderer": "^15.4.1",
+    "prettier": "^1.4.4",
+    "react-hot-loader": "3.0.0-beta.6",
+    "react-test-renderer": "^15.5.4",
     "sass-loader": "^4.0.2",
     "style-loader": "^0.13.1",
-    "url-loader": "^0.5.7",
-    "webpack": "^1.13.3",
-    "webpack-dev-server": "^1.16.1"
+    "url-loader": "^0.5.9",
+    "webpack-dev-server": "^2.4.5"
   },
+  "private": false,
   "repository": {
     "type": "git",
     "url": "git://github.com/JohannBillar/reactjs-boilerplate.git"

diff --git a/src/index.jsx b/src/index.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'react-dom';
+import App from './js/App';
+
+require('./sass/main.scss');
+
+const renderApp = () => {
+  render(<App message="Hello, world!" />, document.getElementById('root'));
+};
+renderApp();
+
+if (module.hot) {
+  module.hot.accept('./js/App', () => {
+    renderApp();
+  });
+}
diff --git a/app/components/App.js → src/js/App.jsx b/app/components/App.js → src/js/App.jsx
@@ -2,11 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 function App({ message }) {
-  return <div className="container">{message}</div>;
+  return (
+    <div className="container">
+      {message}
+    </div>
+  );
 }
 
 App.propTypes = {
-  message: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired
 };
 
 export default App;
diff --git a/src/js/__test__/App.spec.jsx b/src/js/__test__/App.spec.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import App from '../App';
+
+test('App renders correctly', () => {
+  const component = renderer.create(<App />);
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/js/__test__/__snapshots__/App.spec.jsx.snap b/src/js/__test__/__snapshots__/App.spec.jsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App renders correctly 1`] = `
+<div
+  className="container"
+/>
+`;
diff --git a/app/sass/abstracts/_functions.scss → src/sass/abstracts/_functions.scss b/app/sass/abstracts/_functions.scss → src/sass/abstracts/_functions.scss
diff --git a/app/sass/abstracts/_mixins.scss → src/sass/abstracts/_mixins.scss b/app/sass/abstracts/_mixins.scss → src/sass/abstracts/_mixins.scss
diff --git a/app/sass/abstracts/_variables.scss → src/sass/abstracts/_variables.scss b/app/sass/abstracts/_variables.scss → src/sass/abstracts/_variables.scss
diff --git a/app/sass/base/_base.scss → src/sass/base/_base.scss b/app/sass/base/_base.scss → src/sass/base/_base.scss
diff --git a/app/sass/base/_fonts.scss → src/sass/base/_fonts.scss b/app/sass/base/_fonts.scss → src/sass/base/_fonts.scss
diff --git a/app/sass/base/_helpers.scss → src/sass/base/_helpers.scss b/app/sass/base/_helpers.scss → src/sass/base/_helpers.scss
diff --git a/app/sass/base/_typography.scss → src/sass/base/_typography.scss b/app/sass/base/_typography.scss → src/sass/base/_typography.scss
diff --git a/app/sass/components/_button.scss → src/sass/components/_button.scss b/app/sass/components/_button.scss → src/sass/components/_button.scss
diff --git a/app/sass/layout/_footer.scss → src/sass/layout/_footer.scss b/app/sass/layout/_footer.scss → src/sass/layout/_footer.scss
diff --git a/app/sass/layout/_form.scss → src/sass/layout/_form.scss b/app/sass/layout/_form.scss → src/sass/layout/_form.scss
diff --git a/app/sass/layout/_grid.scss → src/sass/layout/_grid.scss b/app/sass/layout/_grid.scss → src/sass/layout/_grid.scss
diff --git a/app/sass/layout/_header.scss → src/sass/layout/_header.scss b/app/sass/layout/_header.scss → src/sass/layout/_header.scss
diff --git a/app/sass/layout/_navigation.scss → src/sass/layout/_navigation.scss b/app/sass/layout/_navigation.scss → src/sass/layout/_navigation.scss
diff --git a/app/sass/main.scss → src/sass/main.scss b/app/sass/main.scss → src/sass/main.scss
diff --git a/app/sass/pages/_home.scss → src/sass/pages/_home.scss b/app/sass/pages/_home.scss → src/sass/pages/_home.scss
diff --git a/app/sass/themes/_default.scss → src/sass/themes/_default.scss b/app/sass/themes/_default.scss → src/sass/themes/_default.scss
diff --git a/app/sass/vendor/_normalize.scss → src/sass/vendor/_normalize.scss b/app/sass/vendor/_normalize.scss → src/sass/vendor/_normalize.scss