Fixes 438 (#448)

* Fixes 438

* babel cli

* pass

* tools pass

* Kick

* Docker changes

* kick

* changes

* fix

* fix

* moved files

* fix

* fix

* moved files

* eslint

* silly me

* fix

* fixed dev

.babelrc

@@ -4,13 +4,20 @@
     "transform-runtime",
     "add-module-exports",
     "transform-decorators-legacy",
-    "transform-react-display-name"
+    "transform-react-display-name",
+    ["system-import-transformer", {"modules": "common"}]
   ],
   "env": {
     "development": {
       "plugins": [
         "typecheck"
       ]
+    },
+    "production": {
+      "plugins": [
+        "transform-react-inline-elements",
+        "transform-react-constant-elements"
+      ]
     }
   }
 }

.gitignore

@@ -3,13 +3,15 @@ build
 node_modules
 /node_modules
 static/dist
+dist
 test-results.xml
 npm-debug.log
+npm-debug.log.*
 webpack-stats.json
 webpack-assets.json
 bundle-stats.json
 selenium-debug.log
 tests/functional/output/*
 test/functional/screenshots/*
 .ssh
-webpack-stats.debug.json
+webpack-stats.debug.json

Dockerfile

@@ -5,6 +5,7 @@ ENV API_URL http://api.quran.com:3000
 ENV SENTRY_KEY_CLIENT https://44c105328ae544ae9928f9eb74b40061@app.getsentry.com/80639
 ENV SENTRY_KEY_SERVER https://44c105328ae544ae9928f9eb74b40061:41ca814d33124e04ab450104c3938cb1@app.getsentry.com/80639
 ENV PORT 8000
+ENV NODE_PATH "./src"
 
 RUN apt-get -y update && apt-get -y install supervisor ssh rsync
 
@@ -25,7 +26,8 @@ RUN cp -a /tmp/node_modules /quran
 
 WORKDIR /quran
 ADD . /quran/
-RUN npm run build
+RUN npm run build:client
+RUN npm run build:server
 
 # ssh keys
 WORKDIR /root
@@ -38,5 +40,7 @@ RUN rsync --update --progress -raz . ahmedre@rsync.keycdn.com:zones/assets/
 # go back to /quran
 WORKDIR /quran
 
+ENV NODE_PATH "./dist"
+
 EXPOSE 8000
 CMD ["supervisord", "--nodaemon", "-c", "/etc/supervisor/supervisord.conf"]

README.md

@@ -40,8 +40,6 @@ subl bundle-stats.json #so that you can the output
 analyze-bundle-size bundle-stats.json
 ```
 
-## [View project issues on waffle.io...](https://waffle.io/quran/quran.com-frontend)
-
 [Reactjs]: https://facebook.github.io/react/docs/getting-started.html
 [Redux]: http://redux.js.org/
 [Expressjs]: http://expressjs.com/en/starter/hello-world.html

start.js → bin/server.js

@@ -1,9 +1,12 @@
 require('dotenv').load();
 require('app-module-path').addPath(__dirname);
-require('app-module-path').addPath('./src');
+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 {
@@ -13,8 +16,6 @@ try {
   console.error(err);
 }
 
-config.plugins.push(['system-import-transformer', {modules: 'common'}]);
-
 require('babel-register')(config);
 
 global.__CLIENT__ = false;
@@ -30,12 +31,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,17 @@
+require('dotenv').load();
+require('app-module-path').addPath(__dirname);
+require('app-module-path').addPath('../dist');
+
+var webpackIsomorphicTools = require('webpack-isomorphic-tools');
+var path = require('path');
+var rootDir = path.resolve(__dirname, '../dist');
+
+global.__CLIENT__ = false;
+global.__SERVER__ = true;
+global.__DEVELOPMENT__ = process.env.NODE_ENV !== 'production';
+
+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 & env NODE_PATH='./src' 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"
@@ -28,12 +30,15 @@
     "app-module-path": "^1.0.2",
     "autoprefixer-loader": "^3.1.0",
     "babel": "^6.5.2",
+    "babel-cli": "^6.11.4",
     "babel-core": "^6.13.2",
     "babel-loader": "^6.2.4",
     "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 +163,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);
-

src/containers/Surah/Header/index.js

@@ -2,33 +2,37 @@ import React, { PropTypes } from 'react';
 
 import Grid from 'react-bootstrap/lib/Grid';
 import Navbar from 'react-bootstrap/lib/Navbar';
+const Header = Navbar.Header;
+const Brand = Navbar.Brand;
+const Toggle = Navbar.Toggle;
+const Collapse = Navbar.Collapse;
 
 import debug from '../../../helpers/debug';
 import Title from '../../../containers/Surah/Title';
 
-const Header = ({ surah, children }) => {
-  debug('component:Header', 'Render');
+const SurahHeader = ({ surah, children }) => {
+  debug('component:SurahHeader', 'Render');
 
   return (
     <Navbar className="montserrat" fixedTop fluid>
-      <Navbar.Header>
-        <Navbar.Brand>
+      <Header>
+        <Brand>
           <Title surah={surah} />
-        </Navbar.Brand>
-        <Navbar.Toggle />
-      </Navbar.Header>
-      <Navbar.Collapse>
+        </Brand>
+        <Toggle />
+      </Header>
+      <Collapse>
         <Grid fluid>
           {children}
         </Grid>
-      </Navbar.Collapse>
+      </Collapse>
     </Navbar>
   );
 };
 
-Header.propTypes = {
+SurahHeader.propTypes = {
   surah: PropTypes.object.isRequired,
   children: PropTypes.any
 };
 
-export default Header;
+export default SurahHeader;

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));

server/config/sitemap.js → src/server/config/sitemap.js

@@ -1,6 +1,6 @@
 import sitemap from 'sitemap';
 
-import ApiClient from '../../src/helpers/ApiClient';
+import ApiClient from '../../helpers/ApiClient';
 
 
 export default (server) => {

bootstrap.config.js → src/styles/bootstrap.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 module.exports = {
   "verbose": false,
   "debug": false,

bootstrap.config.prod.js → src/styles/bootstrap.config.prod.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 const bootstrapConfig = require('./bootstrap.config.js');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 bootstrapConfig.styleLoader = ExtractTextPlugin.extract({fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader'});

src/styles/fonts/_fonts.scss

@@ -1,29 +1,29 @@
 @font-face{
   font-family: 'Montserrat';
-  src: url('./static/fonts/montserrat/Montserrat-Regular.otf');
+  src: url('../../static/fonts/montserrat/Montserrat-Regular.otf');
 }
 
 @font-face{
   font-family: 'Montserrat';
-  src: url('./static/fonts/montserrat/Montserrat-Bold.otf');
+  src: url('../../static/fonts/montserrat/Montserrat-Bold.otf');
   font-weight: 700;
 }
 
 @font-face{
   font-family: 'Montserrat';
-  src: url('./static/fonts/montserrat/Montserrat-Light.otf');
+  src: url('../../static/fonts/montserrat/Montserrat-Light.otf');
   font-weight: 300;
 }
 
 @font-face{
   font-family: 'Montserrat';
-  src: url('./static/fonts/montserrat/Montserrat-Hairline.otf');
+  src: url('../../static/fonts/montserrat/Montserrat-Hairline.otf');
   font-weight: 100;
 }
 
 @font-face{
   font-family: 'Montserrat';
-  src: url('./static/fonts/montserrat/Montserrat-Black.otf');
+  src: url('../../static/fonts/montserrat/Montserrat-Black.otf');
   font-weight: 600;
 }
 
@@ -39,11 +39,11 @@
 
 @font-face {
   font-family: "SSStandard";
-  src: url('./static/fonts/ss-standard/ss-standard.eot');
-  src: url('./static/fonts/ss-standard/ss-standard.eot?#iefix') format('embedded-opentype'),
-  url('./static/fonts/ss-standard/ss-standard.woff') format('woff'),
-  url('./static/fonts/ss-standard/ss-standard.ttf')  format('truetype'),
-  url('./static/fonts/ss-standard/ss-standard.svg#SSStandard') format('svg');
+  src: url('../../static/fonts/ss-standard/ss-standard.eot');
+  src: url('../../static/fonts/ss-standard/ss-standard.eot?#iefix') format('embedded-opentype'),
+  url('../../static/fonts/ss-standard/ss-standard.woff') format('woff'),
+  url('../../static/fonts/ss-standard/ss-standard.ttf')  format('truetype'),
+  url('../../static/fonts/ss-standard/ss-standard.svg#SSStandard') format('svg');
   font-weight: normal;
   font-style: normal;
 }

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'
+    'bootstrap-sass!./src/styles/bootstrap.config.js',
+    './src/client.js'
   ],
   output: {
     path: path.resolve('./build'),
-    publicPath: '/public/',
+    publicPath: 'http://localhost:8001/public/',
     filename: 'main.js'
   },
   module: {