Merge branch 'develop'

Author: carloluis

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"tabWidth": 4,
+	"printWidth": 120,
+	"jsxBracketSameLine": false,
+	"semi": true,
+	"singleQuote": true
+}

README.md

@@ -91,7 +91,7 @@ yarn
 yarn dev
 ```
 
-Open browser on [localhost:3000](http://localhost:3000/)
+Open browser on [localhost:4000](http://localhost:4000/)
 
 
 ## Docs

client/config/webpack.config.common.js

@@ -47,10 +47,6 @@ const common = {
 				use: ['babel-loader?cacheDirectory'],
 				exclude: /node_modules/,
 				include: PATHS.app
-			},
-			{
-				test: /\.json$/,
-				loader: 'json-loader'
 			}
 		]
 	},
@@ -71,7 +67,10 @@ const common = {
 			mobile: true
 		}),
 		new webpack.optimize.ModuleConcatenationPlugin()
-	]
+	],
+	stats: {
+		children: false
+	}
 };
 
 module.exports = {

client/config/webpack.config.dev.js

@@ -3,7 +3,8 @@ const merge = require('webpack-merge');
 const webpack = require('webpack');
 
 module.exports = merge(common, {
-	devtool: 'eval-source-map',
+	mode: 'development',
+	devtool: 'eval',
 	module: {
 		rules: [
 			{
@@ -27,6 +28,9 @@ module.exports = merge(common, {
 							localIdentName: '[path][name]__[local]'
 						}
 					},
+					{
+						loader: 'postcss-loader'
+					},
 					{
 						loader: 'resolve-url-loader'
 					},

client/config/webpack.config.prod.js

@@ -1,17 +1,24 @@
 const CleanPlugin = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const merge = require('webpack-merge');
-const webpack = require('webpack');
 const path = require('path');
+
 const { common, PATHS } = require('./webpack.config.common');
 
 module.exports = merge(common, {
+	mode: 'production',
 	output: {
-		path: PATHS.build,
-		filename: '[name].[chunkhash].js',
-		chunkFilename: '[chunkhash].js'
+		chunkFilename: '[chunkhash].js',
+		filename: '[name].[chunkhash].js'
+	},
+	optimization: {
+		runtimeChunk: 'single',
+		splitChunks: {
+			chunks: 'all'
+		}
 	},
+	devtool: 'hidden-source-map',
 	module: {
 		rules: [
 			{
@@ -22,28 +29,26 @@ module.exports = merge(common, {
 			},
 			{
 				test: /\.scss$/,
-				use: ExtractTextPlugin.extract({
-					fallback: 'style-loader',
-					use: [
-						{
-							loader: 'css-loader',
-							options: {
-								modules: true,
-								camelCase: 'dashes',
-								minimize: true
-							}
-						},
-						{
-							loader: 'postcss-loader'
-						},
-						{
-							loader: 'resolve-url-loader'
-						},
-						{
-							loader: 'sass-loader'
+				use: [
+					MiniCssExtractPlugin.loader,
+					{
+						loader: 'css-loader',
+						options: {
+							modules: true,
+							camelCase: 'dashes',
+							minimize: true
 						}
-					]
-				})
+					},
+					{
+						loader: 'postcss-loader'
+					},
+					{
+						loader: 'resolve-url-loader'
+					},
+					{
+						loader: 'sass-loader'
+					}
+				]
 			}
 		]
 	},
@@ -52,19 +57,7 @@ module.exports = merge(common, {
 			root: PATHS.root,
 			verbose: false
 		}),
-		new webpack.optimize.CommonsChunkPlugin({
-			names: 'vendor',
-			minChunks: module => /node_modules/.test(module.resource)
-		}),
-		new ExtractTextPlugin('[name].[chunkhash].css'),
-		new webpack.DefinePlugin({
-			'process.env.NODE_ENV': '"production"'
-		}),
-		new webpack.optimize.UglifyJsPlugin({
-			compress: {
-				warnings: false
-			}
-		}),
+		new MiniCssExtractPlugin('[name].[chunkhash].css'),
 		new CopyWebpackPlugin([
 			{
 				from: path.join(PATHS.app, 'favicon.ico'),

docs/setup.md

@@ -1,4 +1,4 @@
-# React Seed - Setup 
+# React Seed - Setup
 
 ## Install dependencies
 
@@ -14,26 +14,25 @@ You can install Postgres or run your server in a Docker container.
 
 ### Postgres
 
-* Install [postgres](https://www.postgresql.org/). When prompted to enter the `postgres` user password, use `sa.pg.01` or one of your choice
-    * Make sure to update the password in `server/datastore/create/knexfile.js` if you picked a different password.
-* For more information about setting up the server see [official docs](https://wiki.postgresql.org/wiki/First_steps)
+*   Install [postgres](https://www.postgresql.org/). When prompted to enter the `postgres` user password, use `sa.pg.01` or one of your choice
+    *   Make sure to update the password in `server/datastore/create/knexfile.js` if you picked a different password.
+*   For more information about setting up the server see [official docs](https://wiki.postgresql.org/wiki/First_steps)
 
 ### Docker
 
-* Install [Docker](https://docs.docker.com/engine/installation/) and [docker-compose](https://docs.docker.com/compose/install/)
-* Run `yarn database:docker-server` to create the docker container for the Postgres Server (volume to persist data will be mounted)
+*   Install [Docker](https://docs.docker.com/engine/installation/) and [docker-compose](https://docs.docker.com/compose/install/)
+*   Run `yarn database:docker-server` to create the docker container for the Postgres Server (volume to persist data will be mounted)
 
 #### Structure and Data
 
 Once you have configured your Postgres server, run the following commands:
 
-* Create the `reactseeddb` database, `pg` user and grant access to database:
-    * `yarn database:create`
-* Create tables running migrations: 
-    * `yarn migrate:latest`
-* Populate database running the seeds: 
-    * `yarn seed:run`
-
+*   Create the `reactseeddb` database, `pg` user and grant access to database:
+    *   `yarn database:create`
+*   Create tables running migrations:
+    *   `yarn migrate:latest`
+*   Populate database running the seeds:
+    *   `yarn seed:run`
 
 ## Start the app
 
@@ -51,17 +50,16 @@ $ yarn dev # or (yarn run dev)
 $ yarn prod # build and start
 ```
 
-Open browser on [localhost:3000](http://localhost:3000/)
-
+Open browser on [localhost:4000](http://localhost:4000/)
 
 ## NPM Scripts
 
 ```bash
-$ yarn build  # build production assets
+$ yarn build # build production assets
 
-$ yarn start  # execute production server
+$ yarn start # execute production server
 
-$ yarn test  # execute all tests
+$ yarn test # execute all tests
 
 $ yarn lint # execute linting
 ```
@@ -70,28 +68,27 @@ $ yarn lint # execute linting
 
 #### More scripts
 
-* `test`: exec all test (client uses `jest`, server uses `tape`)
-    * `test:client`: exec client test
-    * `test:server`: exec server test
-* `tdd`: exec test (on watch mode)
-* `lint`: exec linting (`eslint`)
-* `migrate:*`: knex migrations
-    * `migrate:make`: create migration script
-    * `migrate:latest`: exec migrations
-    * `migrate:rollback`: rollback migration
-* `seed:*`: data seeds
-    * `seed:make`: create seed script
-    * `seed:run`: exec seeds
-* `stats`: run `npm` stats
-* `build`: build production assets
-* `start`: exec production server
-* `dev`: exec development server
-* `prod`: build production assets and exec production server
+*   `test`: exec all test (client uses `jest`, server uses `tape`)
+    *   `test:client`: exec client test
+    *   `test:server`: exec server test
+*   `tdd`: exec test (on watch mode)
+*   `lint`: exec linting (`eslint`)
+*   `migrate:*`: knex migrations
+    *   `migrate:make`: create migration script
+    *   `migrate:latest`: exec migrations
+    *   `migrate:rollback`: rollback migration
+*   `seed:*`: data seeds
+    *   `seed:make`: create seed script
+    *   `seed:run`: exec seeds
+*   `stats`: run `npm` stats
+*   `build`: build production assets
+*   `start`: exec production server
+*   `dev`: exec development server
+*   `prod`: build production assets and exec production server
 
 </details>
 
-
-## Development 
+## Development
 
 ### Git Hooks (using `husky`)
 

docs/vscode.md

@@ -18,13 +18,7 @@ We encourage the use of [prettier](https://github.com/prettier/prettier) in your
 
     // settings for `relative path` extension
     "relativePath.removeExtension": true,
-    "relativePath.removeLeadingDot": true,
-
-    // settings for `prettier` extension
-    "prettier.singleQuote": true,
-    "prettier.printWidth": 120,
-    "prettier.useTabs": true,
-    "prettier.tabWidth": 4
+    "relativePath.removeLeadingDot": true
 }
 ```
 

package.json

@@ -20,7 +20,7 @@
 	"scripts": {
 		"precommit": "lint-staged",
 		"prepush": "npm test",
-		"lint": "eslint . --ext .js,.jsx --ignore-path .gitignore --cache --ignore-pattern plop-templates",
+		"slint": "eslint . --ext .js,.jsx --ignore-path .gitignore --cache --ignore-pattern plop-templates",
 		"stats": "cd client && npm run stats",
 		"build": "cd client && npm run build",
 		"start": "cd server && npm start",
@@ -46,11 +46,11 @@
 	},
 	"lint-staged": {
 		"*.{js,jsx}": [
-			"lint"
+			"npm run slint"
 		]
 	},
 	"devDependencies": {
-		"autoprefixer": "^7.1.2",
+		"autoprefixer": "^8.2.0",
 		"babel-core": "^6.26.0",
 		"babel-eslint": "^8.0.1",
 		"babel-loader": "^7.1.2",
@@ -62,17 +62,16 @@
 		"coveralls": "^2.13.1",
 		"css-loader": "^0.28.5",
 		"eslint": "^4.5.0",
-		"eslint-loader": "^1.9.0",
+		"eslint-loader": "^2.0.0",
 		"eslint-plugin-react": "^7.3.0",
-		"extract-text-webpack-plugin": "^3.0.0",
-		"file-loader": "^0.11.2",
-		"html-webpack-plugin": "^2.30.1",
+		"file-loader": "^1.1.11",
+		"html-webpack-plugin": "^3.1.0",
 		"html-webpack-template": "^6.0.1",
 		"http-server": "^0.10.0",
 		"husky": "^0.14.3",
 		"istanbul-instrumenter-loader": "^3.0.0",
-		"json-loader": "^0.5.6",
-		"lint-staged": "^4.0.3",
+		"lint-staged": "^7.0.0",
+		"mini-css-extract-plugin": "^0.2.0",
 		"node-sass": "^4.5.3",
 		"nodemon": "^1.11.0",
 		"npm-install-webpack-plugin": "^4.0.5",
@@ -81,9 +80,10 @@
 		"raw-loader": "^0.5.1",
 		"resolve-url-loader": "^2.1.0",
 		"sass-loader": "^6.0.6",
-		"style-loader": "^0.18.2",
-		"webpack": "^3.5.5",
-		"webpack-dev-middleware": "^1.12.0",
+		"style-loader": "^0.20.3",
+		"webpack": "^4.2.0",
+		"webpack-cli": "^2.0.13",
+		"webpack-dev-middleware": "^3.0.1",
 		"webpack-hot-middleware": "^2.18.2",
 		"webpack-merge": "^4.1.0"
 	},