Code splitting assets

.babelrc

@@ -14,14 +14,7 @@
     },
     "development": {
       "plugins": [
-        "typecheck",
-        ["react-transform", {
-            "transforms": [{
-                "transform": "react-transform-catch-errors",
-                "imports": ["react", "redbox-react"]
-              }
-            ]
-        }]
+        "typecheck"
       ]
     }
   }

.env

@@ -1,4 +1,4 @@
 NODE_ENV=development
 PORT=8000
 API_URL=http://quran.com:3000
-SEGMENTS_KEY="¯\_(ツ)_/¯"
+SEGMENTS_KEY=

Dockerfile

@@ -1,6 +1,8 @@
 FROM node:5.10.0
 
 ENV NODE_ENV production
+ENV API_URL http://api.quran.com:3000
+ENV PORT 8000
 
 RUN apt-get -y update && apt-get -y install supervisor ssh rsync
 

README.md

@@ -22,8 +22,9 @@ Unless you have the backend API running locally, you will need to update the `AP
 
 To start the app, run `npm run dev` which will run both the server and the client (webpack) to compile upon edits. Go to http://localhost:8001 in your browser, not 8000 (that is just the express server).
 
-## Tests
-Run `npm run test:watch` to run the tests locally and watching. Otherwise use `npm run test` for CI level tests.
+
+#### Tests
+Run `npm run test` to run the tests locally and watching. Otherwise use `npm run test:ci:unit` for CI level tests.
 
 We also have nightwatch function tests. You can install nightwatch globally and can run tests like this:
 ```

bootstrap.config.js

@@ -0,0 +1,64 @@
+module.exports = {
+  "verbose": false,
+  "debug": false,
+  "preBootstrapCustomizations": "./src/styles/variables.scss",
+  "mainSass": "./src/styles/main.scss",
+  "scripts": {
+    "transition": false,
+    "alert": false,
+    "button": false,
+    "carousel": false,
+    "collapse": false,
+    "dropdown": true,
+    "modal": true,
+    "tooltip": true,
+    "popover": true,
+    "scrollspy": false,
+    "tab": false,
+    "affix": false
+  },
+  "styles": {
+    "mixins": true,
+
+    "normalize": true,
+    "print": false,
+
+    "scaffolding": true,
+    "type": true,
+    "code": true,
+    "grid": true,
+    "tables": true,
+    "forms": true,
+    "buttons": true,
+
+    "component-animations": true,
+    "glyphicons": false,
+    "dropdowns": true,
+    "button-groups": false,
+    "input-groups": false,
+    "navs": true,
+    "navbar": true,
+    "breadcrumbs": false,
+    "pagination": true,
+    "pager": true,
+    "labels": true,
+    "badges": true,
+    "jumbotron": false,
+    "thumbnails": false,
+    "alerts": false,
+    "progress-bars": false,
+    "media": false,
+    "list-group": false,
+    "panels": true,
+    "wells": false,
+    "close": true,
+
+    "modals": true,
+    "tooltip": true,
+    "popovers": true,
+    "carousel": false,
+
+    "utilities": true,
+    "responsive-utilities": true
+  }
+};

bootstrap.config.prod.js

@@ -0,0 +1,4 @@
+const bootstrapConfig = require('./bootstrap.config.js');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+bootstrapConfig.styleLoader = ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader');
+module.exports = bootstrapConfig;

client.js

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
 import reactCookie from 'react-cookie';
 import Provider from 'react-redux/lib/components/Provider';
 import Router from 'react-router/lib/Router';
+import match from 'react-router/lib/match';
 import browserHistory from 'react-router/lib/browserHistory';
 import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware';
 import useScroll from 'react-router-scroll';
@@ -42,31 +43,29 @@ if (typeof window !== 'undefined') {
   });
 }
 
-const component = (
-  <Router
-    history={history}
-    render={(props) => (
-      <ReduxAsyncConnect
-        {...props}
-        helpers={{client}}
-        filter={item => !item.deferred}
-        render={applyRouterMiddleware(useScroll())}
-      />
-    )}
-  >
-    {routes()}
-  </Router>
-);
+match({ history, routes: routes() }, (error, redirectLocation, renderProps) => {
+  const component = (
+    <Router
+      {...renderProps}
+      render={(props) => (
+        <ReduxAsyncConnect
+          {...props}
+          helpers={{client}}
+          filter={item => !item.deferred}
+          render={applyRouterMiddleware(useScroll())}
+        />
+      )}
+    />
+  );
 
-debug('client', 'rehydrating app');
+  const mountNode = document.getElementById('app');
 
-const mountNode = document.getElementById('app');
+  debug('client', 'React Rendering');
 
-debug('client', 'React Rendering');
-
-ReactDOM.render(
-  <Provider store={store} key="provider">
-    {component}
-  </Provider>, mountNode, () => {
-  debug('client', 'React Rendered');
+  ReactDOM.render(
+    <Provider store={store} key="provider">
+      {component}
+    </Provider>, mountNode, () => {
+    debug('client', 'React Rendered');
+  });
 });

karma.conf.js

@@ -56,7 +56,7 @@ module.exports = function(config) {
         'react/lib/ReactContext': true
       },
       resolve: {
-        modulesDirectories: [
+        modules: [
           'src',
           'node_modules'
         ],

package.json

@@ -3,46 +3,47 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "test": "npm build && npm start && npm run test:lint && npm run test:unit && npm run test:functional",
+    "test": "./node_modules/karma/bin/karma start",
     "test:ci:unit": "./node_modules/karma/bin/karma start --browsers PhantomJS --single-run",
     "test:ci:functional": "node ./nightwatch.js -c ./nightwatch.json -e production",
     "test:ci:lint": "eslint ./src/scripts/**/*.js",
     "test:dev:unit": "./node_modules/karma/bin/karma start",
     "test:dev:functional": "node ./nightwatch.js -c ./nightwatch.json",
     "test:dev:lint": "eslint ./src/scripts/**/*.js",
-    "dev": "node webpack-dev-server.js & PORT=8000 node start.js",
+    "dev": "node webpack/dev-server.js & PORT=8000 node start.js",
     "start": "NODE_PATH=\"./src\" node ./start",
-    "build": "node ./node_modules/webpack/bin/webpack.js --verbose --colors --display-error-details --config webpack.prod.config.js",
+    "build": "node ./node_modules/webpack/bin/webpack.js --config webpack/prod.config.js",
     "validate": "npm ls",
-    "analyze:build": "env NODE_ENV=development webpack --json --config webpack.config.js  > bundle-stats.json",
-    "analyze:json": "analyze-bundle-size bundle-stats.json"
+    "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"
   },
   "engines": {
-    "node": ">= 0.10.0",
-    "iojs": ">= 1.0.3"
+    "node": ">= 5.1.0"
   },
   "dependencies": {
     "app-module-path": "^1.0.2",
     "autoprefixer-loader": "^3.1.0",
     "babel": "^6.5.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-display-name": "^6.5.0",
     "babel-plugin-transform-runtime": "^6.7.5",
     "babel-plugin-typecheck": "^3.8.0",
     "babel-polyfill": "^6.7.4",
     "babel-preset-es2015": "^6.6.0",
+    "babel-preset-es2015-webpack": "^6.4.1",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
     "babel-register": "^6.7.2",
     "babel-runtime": "^6.6.1",
     "body-parser": "^1.14.1",
+    "bootstrap-loader": "^1.0.10",
     "bootstrap-sass": "~3.3.1",
     "bootstrap-sass-loader": "^1.0.9",
     "bundle-loader": "~0.5.0",
     "cache-manager": "^1.1.0",
-    "classnames": "^2.1.2",
     "clean-webpack-plugin": "^0.1.8",
     "compression": "^1.6.0",
     "cookie-parser": "^1.3.5",
@@ -56,7 +57,7 @@
     "express": "^4.3.2",
     "express-state": "^1.2.0",
     "express-useragent": "^0.2.0",
-    "extract-text-webpack-plugin": "^0.8.0",
+    "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.4",
     "html-webpack-plugin": "^1.4.0",
     "http-proxy": "^1.13.2",
@@ -66,7 +67,6 @@
     "js-yaml": "~3.6.0",
     "json-loader": "~0.5.1",
     "loopstacks": "0.0.3",
-    "moment": "^2.12.0",
     "morgan": "^1.6.1",
     "node-sass": "^3.2.0",
     "normalizr": "^2.0.0",
@@ -90,24 +90,27 @@
     "react-scroll": "^1.0.4",
     "redux": "^3.3.1",
     "redux-connect": "^2.4.0",
+    "resolve-url": "^0.2.1",
     "sass-loader": "2.0.1",
     "scroll-behavior": "^0.3.3",
     "serialize-javascript": "^1.0.0",
     "serve-favicon": "^2.2.1",
     "sitemap": "^1.5.0",
     "sjcl": "~1.0.3",
+    "strip-loader": "^0.1.2",
     "style-loader": "^0.13.1",
     "superagent": "^1.2.0",
     "url": "^0.11.0",
     "url-loader": "~0.5.5",
-    "webpack": "^1.10.3",
+    "webpack": "2.1.0-beta.7",
     "webpack-isomorphic-tools": "^2.2.41",
     "winston": "^1.1.2"
   },
   "devDependencies": {
     "babel-core": "^6.7.7",
     "babel-eslint": "^6.0.4",
     "babel-plugin-react-transform": "^2.0.2",
+    "babel-preset-react-hmre": "^1.1.1",
     "chai": "^3.0.0",
     "chromedriver": "^2.19.0",
     "del": "^2.0.2",