chore: upgrade webpack configuration and setup

Author: mrtnbroder

.babelrc

@@ -7,6 +7,9 @@
     "async-to-promises",
     "transform-export-extensions",
     ["transform-object-rest-spread", { "useBuiltIns": true }],
-    ["transform-runtime", { "polyfill": false, "regenerator": false }]
+    ["transform-runtime", { "polyfill": false, "regenerator": false }],
+    ["module-resolver", {
+      "root": ["./src/shared"]
+    }]
   ]
 }

.eslintrc

@@ -13,10 +13,8 @@
   },
   "globals": {
     "__DEV__": true,
-    "__BROWSER__": true,
     "__INITIAL_STATE__": true,
     "google": true,
-    "jest": true
   },
   "parserOptions": {
     "ecmaVersion": 6,
@@ -151,7 +149,7 @@
     "block-spacing": [2, "always"],
     "brace-style": [2, "1tbs", { "allowSingleLine": true }],
     "callback-return": 2,
-    "camelcase": 2,
+    "camelcase": [2, { "properties": "never" }],
     "comma-dangle": 0,
     "comma-spacing": [2, { "before": false, "after": true }],
     "comma-style": [2, "last"],

.gitignore

@@ -26,6 +26,7 @@ build/Release
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
 build
+dist
 _tmp
 public
 .DS_Store

config/config.js

@@ -1,12 +1,12 @@
 
-const config = require('../config/config')
+const { signal } = require('../webpack/env')
+const { spawn } = require('child_process')
 const path = require('path')
-const spawn = require('child_process').spawn
 const webpackConfig = require('../webpack')
 
-const output = webpackConfig.find((x) => x.target === 'node').output
+const { output } = webpackConfig.find((x) => x.target === 'node')
 const serverFile = path.join(output.path, output.filename)
-const IS_RUNNING = new RegExp(config.signal, 'g')
+const IS_RUNNING = new RegExp(signal, 'g')
 
 function runServer() {
   const pool = []

config/paths.js

@@ -1,7 +1,6 @@
 
-const merge = require('lodash.merge')
+const { appName, HOST, PORT } = require('../webpack/env')
 const browsersync = require('browser-sync')
-const { appName, host, port } = require('../config/config')
 const runServer = require('./runServer')
 const webpack = require('webpack')
 const webpackConfigs = require('../webpack')
@@ -17,7 +16,7 @@ function start() {
     stats: configs[0].stats,
   })
   const hotMiddlewares = createHotMiddlewares(multicompiler.compilers)
-  const middlewares = [wpMiddleware, ...hotMiddlewares]
+  const middleware = [wpMiddleware, ...hotMiddlewares]
   const restartServer = runServer()
 
   return onPluginDone(multicompiler)
@@ -28,8 +27,8 @@ function start() {
       bs.init({
         notify: false,
         proxy: {
-          target: `${host}:${port}`,
-          middleware: middlewares,
+          target: `${HOST}:${PORT}`,
+          middleware,
         },
       }, resolve)
     }))
@@ -41,12 +40,8 @@ const onlyBrowserCompiler = (compiler) => onlyBrowser(compiler.options)
 const createHotMiddlewares = (compilers) => compilers.filter(onlyBrowserCompiler).map(webpackHotMiddleware)
 const addHotMiddleware = (config) => {
   if (onlyBrowser(config)) {
-    return merge({}, config, {
-      entry: {
-        [appName]: ['react-hot-loader/patch', 'webpack-hot-middleware/client?reload=true', config.entry[appName]],
-      },
-      plugins: [new webpack.HotModuleReplacementPlugin()],
-    })
+    config.entry[appName] = ['react-hot-loader/patch', 'webpack-hot-middleware/client?reload=true', config.entry[appName]]
+    config.plugins = config.plugins.concat([new webpack.HotModuleReplacementPlugin()])
   }
   return config
 }

postcss.config.js

@@ -1,4 +1,4 @@
 
 export * from './route'
 export * from './update'
-export * from './view'
+export * from './view.jsx'

scripts/runServer.js

@@ -1,5 +1,5 @@
 
-import { view as component } from './view'
+import { view as component } from './view.jsx'
 import { update as reducer } from './update'
 
 export const route = {

scripts/start.js

@@ -1,4 +1,4 @@
 
 export * from './route'
 // export * from './update'
-export * from './view'
+export * from './view.jsx'

src/Application/components/Authorized/components/Dashboard/index.js

@@ -1,6 +1,6 @@
 
 // import { update as reducer } from './update'
-import { view as component } from './view'
+import { view as component } from './view.jsx'
 
 export const route = {
   path: 'profile',

src/Application/components/Authorized/components/Dashboard/route.js

@@ -1,4 +1,4 @@
 
 export * from './route'
 export * from './update'
-export * from './view'
+export * from './view.jsx'

src/Application/components/Authorized/components/Profile/index.js

@@ -2,7 +2,7 @@
 import { route as dashboardRoute } from './components/Dashboard'
 import { route as profileRoute } from './components/Profile'
 import { update as reducer } from './update'
-import { view as component } from './view'
+import { view as component } from './view.jsx'
 
 export const route = {
   path: 'authorized',

src/Application/components/Authorized/components/Profile/route.js

@@ -1,4 +1,4 @@
 
 export * from './route'
 export * from './update'
-export * from './view'
+export * from './view.jsx'

src/Application/components/Authorized/index.js

@@ -1,6 +1,6 @@
 
 import { update as reducer } from './update'
-import { view as component } from './view'
+import { view as component } from './view.jsx'
 
 export const route = {
   path: 'login',

src/Application/components/Authorized/route.js

@@ -1,3 +1,3 @@
 
 export * from './route'
-export * from './view'
+export * from './view.jsx'

src/Application/components/Login/index.js

@@ -1,6 +1,6 @@
 
 import { route as authorizedRoute } from './components/Authorized'
-import { view as component } from './view'
+import { view as component } from './view.jsx'
 import { route as loginRoute } from './components/Login'
 
 export const route = {

src/Application/components/Login/route.js

@@ -2,11 +2,12 @@
 import { Router, browserHistory } from 'react-router'
 import { AppContainer } from 'react-hot-loader'
 import { Provider } from 'react-redux'
+import { render } from 'react-dom'
 import React from 'react'
 import configureStore from 'configureStore'
-import reducers from '../shared/modules'
-import { render } from 'react-dom'
+
 import { route as routes } from '../Application'
+import reducers from 'modules'
 
 if (__DEV__) {
   // Export React and Performance Utility for debugging

src/Application/index.js

@@ -1,8 +1,7 @@
 
-import { DEBUG, appName, inlineName, statsName, vendorName } from '../../../config/config'
+import { appName, inlineName, isDev, outputPath, statsName, vendorName } from '../../../webpack/env'
 import React, { PropTypes as PT, PureComponent } from 'react'
 import fs from 'fs'
-import { publicDir } from '../../../config/paths'
 import { renderToStaticMarkup } from 'react-dom/server'
 
 class Html extends PureComponent {
@@ -12,19 +11,19 @@ class Html extends PureComponent {
   }
 
   static getScript(name) {
-    if (DEBUG) return `/${name}.js`
+    if (isDev) return `/${name}.js`
 
-    const file = fs.readFileSync(`${publicDir}/${statsName}.json`)
+    const file = fs.readFileSync(`${outputPath}/${statsName}.json`)
     const stats = JSON.parse(file)
 
-    return name === 'app' && !DEBUG
+    return name === 'app' && !isDev
       ? `/${stats.assetsByChunkName[name][0]}`
       : `/${stats.assetsByChunkName[name]}`
   }
 
   static getWebpackJsonpInlineScript() {
-    if (DEBUG) return false
-    return fs.readFileSync(`${publicDir}/${inlineName}.js`)
+    if (isDev) return false
+    return fs.readFileSync(`${outputPath}/${inlineName}.js`)
   }
 
   static renderToStaticMarkup(props) {
@@ -83,7 +82,7 @@ class Html extends PureComponent {
           <meta content='/ms-icon-144x144.png' name='msapplication-TileImage'/>
           <meta content='#ffffff' name='theme-color'/>
 
-          {!DEBUG && <link href='/style.css' rel='stylesheet'/>}
+          {!isDev && <link href='/style.css' rel='stylesheet'/>}
         </head>
         <body>
           <div id='app'>
@@ -105,7 +104,7 @@ Html.propTypes = {
   content: PT.string.isRequired,
   initalState: PT.object.isRequired,
   vendor: PT.string.isRequired,
-  inline: DEBUG ? PT.bool : PT.string,
+  inline: isDev ? PT.bool : PT.string,
 }
 
 Html.defaultProps = {

src/Application/route.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 
 import * as m from './middlewares'
-import { DEBUG, host, port, signal } from '../../config/config'
+import { HOST, PORT, isDev, signal } from '../../webpack/env'
 import compression from 'compression'
 import express from 'express'
 
@@ -15,7 +15,7 @@ const app = express()
 app.disable('x-powered-by')
 
 // Compression
-if (!DEBUG) app.use(compression())
+if (!isDev) app.use(compression())
 
 // I. Static Assets
 m.staticMiddleware(app)
@@ -28,8 +28,8 @@ m.viewMiddleware(app)
 // Initialise Express
 // -----------------------------------------------------------------------------
 
-app.listen(port, host, (err) => {
+app.listen(PORT, HOST, (err) => {
   if (err) return console.error('[server.js]: Error: ', err)
 
-  return console.log(`${signal} http://%s:%s`, host, port)
+  return console.log(`${signal} http://%s:%s`, HOST, PORT)
 })

src/client/index.jsx

@@ -3,14 +3,13 @@
 // Static Middleware
 //
 
-import { DEBUG } from '../../../config/config'
+import { isDev, outputPath } from '../../../webpack/env'
 import express from 'express'
-import { publicDir } from '../../../config/paths'
 
-const MAX_AGE = DEBUG ? 0 : '1 year'
+const MAX_AGE = isDev ? 0 : '1 year'
 const staticCache = { maxAge: MAX_AGE, etag: true, lastModified: false }
 
 export default (app) => {
   // root dir assets
-  app.use(express.static(publicDir, staticCache))
+  app.use(express.static(outputPath, staticCache))
 }

src/server/components/Html.jsx

@@ -4,7 +4,7 @@
 //
 
 import { RouterContext, match } from 'react-router'
-import Html from '../components/Html'
+import Html from '../components/Html.jsx'
 import { Provider } from 'react-redux'
 import React from 'react'
 import configureStore from 'configureStore'

src/server/index.js

@@ -9,6 +9,6 @@ export default (reducers = {}) => (initalState = {}) => {
 
   return compose(
     applyMiddleware(...middleware),
-    __BROWSER__ ? window.devToolsExtension ? window.devToolsExtension() : (f) => f : (f) => f
+    typeof window === 'object' ? window.devToolsExtension ? window.devToolsExtension() : (f) => f : (f) => f
   )(createStore)(rootReducer, initalState)
 }

src/server/middlewares/staticMiddleware.js

@@ -0,0 +1,38 @@
+
+import path from 'path'
+
+/**
+ *  ENV
+ */
+
+// dev mode or prod
+export const isDev = process.env.NODE_ENV !== 'production'
+// port used by express
+export const PORT = process.env.PORT || 8080
+// webpack and server host
+export const HOST = process.env.HOST || 'localhost'
+
+export const signal = 'server is running at'
+
+/**
+ *  WEBPACK
+ */
+
+// style.css
+export const cssName = 'style.css'
+// app.js
+export const appName = 'app'
+// vendor.js
+export const vendorName = 'vendor'
+// inline.js
+export const inlineName = 'inline'
+// stats.json
+export const statsName = 'stats'
+
+/**
+ *  PATHS
+ */
+
+export const contextPath = path.join(__dirname, '..')
+export const distPath = path.join(contextPath, 'build')
+export const outputPath = path.join(distPath, 'public')