Fixes 438

.babelrc

@@ -11,6 +11,12 @@
       "plugins": [
         "typecheck"
       ]
+    },
+    "production": {
+      "plugins": [
+        "transform-react-inline-elements",
+        "transform-react-constant-elements"
+      ]
     }
   }
 }

start.js → bin/server.js

@@ -3,7 +3,10 @@ require('app-module-path').addPath(__dirname);
 require('app-module-path').addPath('./src');
 
 var fs = require('fs');
+var path = require('path');
+var webpackIsomorphicTools = require('webpack-isomorphic-tools');
 var babelrc = fs.readFileSync('./.babelrc');
+var rootDir = path.resolve(__dirname, '..');
 var config;
 
 try {
@@ -30,12 +33,8 @@ if (__DEVELOPMENT__) {
   }
 }
 
-var webpackIsomorphicTools = require('webpack-isomorphic-tools');
-// this must be equal to your Webpack configuration "context" parameter
-var rootPath = require('path').resolve(__dirname, './')
-
-global.webpack_isomorphic_tools = new webpackIsomorphicTools(require('./webpack/isomorphic-tools-configuration'))
+global.webpack_isomorphic_tools = new webpackIsomorphicTools(require('../webpack/isomorphic-tools-configuration'))
 .development(process.env.NODE_ENV === 'development')
-.server(rootPath, function() {
-  require('./server.js')();
+.server(rootDir, function() {
+  require('../src/server.js')();
 });

bin/server.prod.js

@@ -0,0 +1,18 @@
+require('dotenv').load();
+require('app-module-path').addPath(__dirname);
+require('app-module-path').addPath('./src');
+
+var path = require('path');
+var rootDir = path.resolve(__dirname, '../dist');
+
+global.__CLIENT__ = false;
+global.__SERVER__ = true;
+global.__DEVELOPMENT__ = process.env.NODE_ENV !== 'production';
+
+var webpackIsomorphicTools = require('webpack-isomorphic-tools');
+
+global.webpack_isomorphic_tools = new webpackIsomorphicTools(require('./webpack/isomorphic-tools-configuration'))
+.development(__DEVELOPMENT__)
+.server(rootDir, function() {
+  require('../dist/server.js')();
+});

docker/supervisord.conf

@@ -2,7 +2,7 @@
 nodaemon=true
 
 [program:pm2]
-command=pm2 start /quran/start.js -i 0 --no-daemon
+command=pm2 start /quran/bin/server.prod.js -i 0 --no-daemon
 directory=/quran
 redirect_stderr=true
 stdout_logfile=/dev/stdout

package.json

@@ -14,9 +14,11 @@
     "posttest:dev:functional": "bash tests/functional/test.sh stop",
     "test:dev:lint": "node_modules/eslint/bin/eslint.js ./src/scripts/**/*.js",
     "test:stylelint": "node_modules/stylelint/dist/cli.js './src/**/*.scss' --config webpack/.stylelintrc",
-    "dev": "node webpack/dev-server.js & PORT=8000 node start.js",
+    "dev": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node webpack/webpack-dev-server.js & PORT=8000 node ./bin/server.js",
     "start": "NODE_PATH=\"./src\" node ./start",
-    "build": "node ./node_modules/webpack/bin/webpack.js --config webpack/prod.config.js",
+    "build": "npm run build:client & npm run build:server",
+    "build:server": "babel src -d dist -D",
+    "build:client": "node ./node_modules/webpack/bin/webpack.js --config webpack/prod.config.js",
     "validate": "npm ls",
     "analyze:build": "env NODE_ENV=production ./node_modules/webpack/bin/webpack.js --json --config webpack/prod.config.js  > bundle-stats.json",
     "analyze:json": "webpack-bundle-size-analyzer bundle-stats.json"
@@ -33,7 +35,9 @@
     "babel-plugin-add-module-exports": "^0.1.4",
     "babel-plugin-system-import-transformer": "^2.0.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-react-constant-elements": "^6.9.1",
     "babel-plugin-transform-react-display-name": "^6.5.0",
+    "babel-plugin-transform-react-inline-elements": "^6.8.0",
     "babel-plugin-transform-runtime": "^6.7.5",
     "babel-plugin-typecheck": "^3.8.0",
     "babel-polyfill": "^6.7.4",
@@ -158,7 +162,8 @@
     "wdio-mocha-framework": "^0.3.7",
     "wdio-spec-reporter": "0.0.3",
     "webdriverio": "4.2.1",
-    "webpack-dev-server": "^1.6.5"
+    "webpack-dev-server": "^1.6.5",
+    "webpack-hot-middleware": "^2.12.2"
   },
   "pre-commit": [
     "test:dev:lint",

client.js → src/client.js

@@ -16,9 +16,9 @@ import { syncHistoryWithStore } from 'react-router-redux';
 import debug from 'debug';
 
 import config from 'config';
-import ApiClient from './src/helpers/ApiClient';
-import createStore from './src/redux/create';
-import routes from './src/routes';
+import ApiClient from './helpers/ApiClient';
+import createStore from './redux/create';
+import routes from './routes';
 
 const client = new ApiClient();
 const store = createStore(browserHistory, client, window.reduxData);

src/containers/Home/index.js

@@ -188,4 +188,3 @@ const AsyncHome = asyncConnect([{
 }])(Home);
 
 export default connect(state => ({surahs: state.surahs.entities}))(AsyncHome);
-

server.js → src/server.js

@@ -11,22 +11,22 @@ import raven from 'raven';
 import errorhandler from 'errorhandler';
 
 import config from 'config';
-import expressConfig from 'server/config/express';
+import expressConfig from '../server/config/express';
 
 const pretty = new PrettyError();
 const server = express();
 
 expressConfig(server);
 
-import routes from './src/routes';
-import ApiClient from './src/helpers/ApiClient';
-import createStore from './src/redux/create';
-import debug from './src/helpers/debug';
+import routes from './routes';
+import ApiClient from './helpers/ApiClient';
+import createStore from './redux/create';
+import debug from './helpers/debug';
 
-import Html from './src/helpers/Html';
+import Html from './helpers/Html';
 
-import { setUserAgent } from './src/redux/actions/audioplayer.js';
-import { setOption } from './src/redux/actions/options.js';
+import { setUserAgent } from './redux/actions/audioplayer.js';
+import { setOption } from './redux/actions/options.js';
 
 // Use varnish for the static routes, which will cache too
 server.use(raven.middleware.express.requestHandler(config.sentryServer));

webpack/dev.config.js

@@ -7,7 +7,7 @@ var IsomorphicPlugin = require('webpack-isomorphic-tools/plugin');
 var webpackIsomorphicToolsPlugin = new IsomorphicPlugin(require('./isomorphic-tools-configuration'));
 
 module.exports = {
-  context: path.join(process.env.PWD, './'),
+  context: path.resolve(__dirname, '..'),
   resolve: {
     extensions: ['', '.js'],
     modules: [
@@ -16,14 +16,14 @@ module.exports = {
     ]
   },
   entry: [
-    'webpack-dev-server/client?http://localhost:8001',
+    'webpack-hot-middleware/client?path=http://localhost:8001/__webpack_hmr',
     'webpack/hot/only-dev-server',
     'bootstrap-sass!./bootstrap.config.js',
-    './client.js'
+    './src/client.js'
   ],
   output: {
     path: path.resolve('./build'),
-    publicPath: '/public/',
+    publicPath: 'http://localhost:8001/public/',
     filename: 'main.js'
   },
   module: {

webpack/prod.config.js

@@ -20,6 +20,7 @@ module.exports = {
     sourceMapFilename: '[name]-[chunkhash].map.js'
 
   },
+  context: path.resolve(__dirname, '../src'),
   devtool: 'cheap-source-map',
   debug: false,
   target: 'web',
@@ -52,7 +53,9 @@ module.exports = {
               'transform-runtime',
               'add-module-exports',
               'transform-decorators-legacy',
-              'transform-react-display-name'
+              'transform-react-display-name',
+              "transform-react-inline-elements",
+              "transform-react-constant-elements"
             ]
           }
         }

webpack/webpack-dev-server.js

@@ -0,0 +1,33 @@
+var Express = require('express');
+var webpack = require('webpack');
+
+var config = require('../src/config');
+var webpackConfig = require('./dev.config');
+var compiler = webpack(webpackConfig);
+
+var host = config.host || 'localhost';
+var port = (Number(config.port) + 1) || 3001;
+var serverOptions = {
+  contentBase: 'http://' + host + ':' + port,
+  quiet: true,
+  noInfo: true,
+  hot: true,
+  inline: true,
+  lazy: false,
+  publicPath: webpackConfig.output.publicPath,
+  headers: {'Access-Control-Allow-Origin': '*'},
+  stats: {colors: true}
+};
+
+var app = new Express();
+
+app.use(require('webpack-dev-middleware')(compiler, serverOptions));
+app.use(require('webpack-hot-middleware')(compiler));
+
+app.listen(port, function onAppListening(err) {
+  if (err) {
+    console.error(err);
+  } else {
+    console.info('==> 🚧  Webpack development server listening on port %s', port);
+  }
+});