Restructure build process, begin adding HMR support

.babelrc

@@ -1,4 +1,4 @@
 {
   "presets": ["@babel/env", "@babel/react"],
-  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
+  "plugins": ["react-hot-loader/babel", "@babel/plugin-proposal-object-rest-spread"]
 }

.gitignore

@@ -11,6 +11,8 @@ site/
 devConfig/sequelizeCliConfig.js
 devConfig/testingConfig.js
 
+server/bundle
+
 public/bundle/bundle.js
 public/bundle/bundle.js.map
 public/bundle/Lekton-*

client/src/app.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { hot } from 'react-hot-loader/root'
 import { Route, Switch } from 'react-router-dom';
 
 import HomePage  from '@pages/HomePage';
@@ -30,4 +31,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default hot(App);

client/src/components/Memeify/EditableFontface/index.js

@@ -88,13 +88,13 @@ export default class EditableFontface extends Component {
 };
 
 export const PRESETS = {
-  'Green Machine': require('../FontFaces/GreenMachine'),
+  'Green Machine': require('../FontFaces/GreenMachine').default,
-  'Inferno': require('../FontFaces/Inferno'),
+  'Inferno': require('../FontFaces/Inferno').default,
-  'Lazer': require('../FontFaces/Lazer'),
+  'Lazer': require('../FontFaces/Lazer').default,
-  'Neon': require('../FontFaces/Neon'),
+  'Neon': require('../FontFaces/Neon').default,
-  'Old Blue': require('../FontFaces/OldBlue'),
+  'Old Blue': require('../FontFaces/OldBlue').default,
-  'Outline': require('../FontFaces/Outline'),
+  'Outline': require('../FontFaces/Outline').default,
-  'Retro Rainbow': require('../FontFaces/RetroRainbow'),
+  'Retro Rainbow': require('../FontFaces/RetroRainbow').default,
-  'The Special': require('../FontFaces/TheSpecial'),
+  'The Special': require('../FontFaces/TheSpecial').default,
-  'Vapor Wave': require('../FontFaces/VaporWave'),
+  'Vapor Wave': require('../FontFaces/VaporWave').default,
 }

client/src/components/Memeify/FontFaces/GreenMachine.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   editorStyle: {
     fontFamily: 'courier, Courier New',
     fontWeight: 'bold',

client/src/components/Memeify/FontFaces/Inferno.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   editorStyle: {
     fontFamily: 'helvetica, Helvetica Nue',
     fontWeight: 'bold',

client/src/components/Memeify/FontFaces/Lazer.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   editorStyle: {
     fontFamily: 'helvetica, Helvetica Nue',
     fontWeight: 'bold',

client/src/components/Memeify/FontFaces/Neon.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   editorStyle: {
     fontFamily: 'Helvetica, Arial',
     fontWeight: 'bold',

client/src/components/Memeify/FontFaces/OldBlue.js

@@ -7,9 +7,7 @@ const charToFullWidth = char => {
 		: char
 }
 
-const stringToFullWidth =
+export default {
-
-module.exports = {
   container: {},
   editorStyle: {},
   text: {

client/src/components/Memeify/FontFaces/Outline.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   editorStyle: {
     fontFamily: 'arial',
     fontWeight: 'bold',

client/src/components/Memeify/FontFaces/RetroRainbow.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   editorStyle: {
     fontFamily: 'Arial, sans-serif',
     fontWeight: 'bold',

client/src/components/Memeify/FontFaces/TheSpecial.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-module.exports = {
+export default {
   editorStyle: {
     fontFamily: 'Arial, sans-serif',
     fontWeight: 'bold',

client/src/components/Memeify/FontFaces/VaporWave.js

@@ -7,9 +7,7 @@ const charToFullWidth = char => {
 		: char
 }
 
-const stringToFullWidth =
+export default {
-
-module.exports = {
   container: {
 		overflow: 'hidden',
 	},

client/src/index.js

@@ -10,7 +10,7 @@ import App from '@app';
 import GAListener from '@components/GAListener';
 
 // import scss so webpack will build it
-import 'all.scss';
+import '../scss/all.scss';
 
 // get the state from a global variable injected into the server-generated HTML
 const preloadedState = window.__PRELOADED_STATE__ || null;

client/src/utils/file.js

@@ -8,35 +8,34 @@ const {
   }
 } = siteConfig;
 
-module.exports = {
+
-  validateFile (file) {
+export function validateFile (file) {
-    if (!file) {
+  if (!file) {
-      throw new Error('no file provided');
+    throw new Error('no file provided');
-    }
+  }
-    if (/'/.test(file.name)) {
+  if (/'/.test(file.name)) {
-      throw new Error('apostrophes are not allowed in the file name');
+    throw new Error('apostrophes are not allowed in the file name');
-    }
+  }
-    // validate size and type
+  // validate size and type
-    switch (file.type) {
+  switch (file.type) {
-      case 'image/jpeg':
+    case 'image/jpeg':
-      case 'image/jpg':
+    case 'image/jpg':
-      case 'image/png':
+    case 'image/png':
-        if (file.size > maxSizeImage) {
+      if (file.size > maxSizeImage) {
-          throw new Error(`Sorry, images are limited to ${maxSizeImage / SIZE_MB} megabytes.`);
+        throw new Error(`Sorry, images are limited to ${maxSizeImage / SIZE_MB} megabytes.`);
-        }
+      }
-        break;
+      break;
-      case 'image/gif':
+    case 'image/gif':
-        if (file.size > maxSizeGif) {
+      if (file.size > maxSizeGif) {
-          throw new Error(`Sorry, .gifs are limited to ${maxSizeGif / SIZE_MB} megabytes.`);
+        throw new Error(`Sorry, .gifs are limited to ${maxSizeGif / SIZE_MB} megabytes.`);
-        }
+      }
-        break;
+      break;
-      case 'video/mp4':
+    case 'video/mp4':
-        if (file.size > maxSizeVideo) {
+      if (file.size > maxSizeVideo) {
-          throw new Error(`Sorry, videos are limited to ${maxSizeVideo / SIZE_MB} megabytes.`);
+        throw new Error(`Sorry, videos are limited to ${maxSizeVideo / SIZE_MB} megabytes.`);
-        }
+      }
-        break;
+      break;
-      default:
+    default:
-        throw new Error(file.type + ' is not a supported file type. Only, .jpeg, .png, .gif, and .mp4 files are currently supported.');
+      throw new Error(file.type + ' is not a supported file type. Only, .jpeg, .png, .gif, and .mp4 files are currently supported.');
-    }
+  }
-  },
+}
-};

package.json

@@ -4,31 +4,18 @@
   "description": "an npm package that exports a customizeable spee.ch server",
   "main": "index.js",
   "scripts": {
-    "build": "builder run bundle",
+    "build": "webpack --config webpack.config.js --mode=production",
-    "prebundle": "npm run transpile",
+    "dev": "webpack --config webpack.config.js --mode=development",
-    "bundle": "webpack --config webpack.config.js",
-    "bundle:dev": "webpack --config webpack.config.js --watch",
     "configure": "node cli/configure.js",
     "fix": "eslint . --fix",
     "lint": "eslint .",
-    "prestart": "builder run bundle",
+    "start": "node server/bundle/server.js",
-    "start": "node server.js",
-    "start:build": "builder run start",
-    "chainquery:build": "rollup ./server/chainquery/index.js --file ./server/chainquery/bundle.js --format cjs",
     "devtools:server": "ndb server.js",
     "devtools:chainquery": "npm run devtools:chainquery:build && ndb ./server/chainquery/bundle.debug.js",
     "devtools:chainquery:build": "rollup ./server/chainquery/index.debug.js --file ./server/chainquery/bundle.debug.js --format cjs",
     "test": "mocha --recursive",
     "test:no-lbc": "npm test -- --grep @usesLbc --invert",
-    "test:server": "mocha --recursive './server/**/*.test.js'",
+    "test:server": "mocha --recursive './server/**/*.test.js'"
-    "transpile": "builder concurrent transpile:server transpile:client transpile:custom",
-    "transpile:dev": "builder concurrent transpile:server:dev transpile:client:dev transpile:custom:dev",
-    "transpile:server": "babel server/render/src -d server/render/build",
-    "transpile:server:dev": "babel server/render/src -w -d server/render/build",
-    "transpile:client": "babel client/src -d client/build",
-    "transpile:client:dev": "babel client/src -w -d client/build",
-    "transpile:custom": "babel site/custom/src -d site/custom/build",
-    "transpile:custom:dev": "babel site/custom/src -w -d site/custom/build"
   },
   "repository": {
     "type": "git",
@@ -84,30 +71,27 @@
     "sequelize": "^4.41.1",
     "sequelize-cli": "^4.0.0",
     "universal-analytics": "^0.4.20",
-    "webpack": "^3.10.0",
     "webpack-merge": "^4.1.4",
-    "webpack-node-externals": "^1.7.2",
     "whatwg-fetch": "^2.0.4",
     "winston": "^2.3.1",
     "winston-slack-webhook": "github:billbitt/winston-slack-webhook"
   },
   "devDependencies": {
     "@babel/cli": "^7.1.5",
-    "@babel/core": "^7.1.5",
+    "@babel/core": "^7.2.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
     "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.1.5",
+    "@babel/preset-env": "^7.2.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-stage-2": "^7.0.0",
     "@babel/register": "^7.0.0",
     "babel-eslint": "9.0.0-beta.3",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^8.0.4",
     "babel-plugin-module-resolver": "^3.1.1",
-    "builder": "^4.0.0",
     "chai": "^4.2.0",
     "chai-http": "^4.2.0",
     "cross-fetch": "^2.2.3",
-    "css-loader": "^0.28.11",
+    "css-loader": "^2.0.0",
     "eslint": "5.9.0",
     "eslint-config-standard": "^12.0.0",
     "eslint-config-standard-jsx": "^6.0.2",
@@ -116,14 +100,16 @@
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-standard": "^4.0.0",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "extract-css-chunks-webpack-plugin": "^3.2.1",
-    "file-loader": "^1.1.11",
+    "file-loader": "^2.0.0",
     "husky": "^1.1.3",
+    "mini-css-extract-plugin": "^0.5.0",
     "mocha": "^5.2.0",
     "ndb": "^1.0.26",
     "node-sass": "^4.10.0",
     "nodemon": "^1.18.6",
     "react-color": "^2.14.1",
+    "react-hot-loader": "^4.6.0",
     "redux-devtools": "^3.4.1",
     "regenerator-transform": "^0.13.3",
     "rollup": "^0.67.0",
@@ -131,7 +117,11 @@
     "sequelize-cli": "^4.0.0",
     "style-loader": "^0.23.1",
     "url-loader": "^1.1.2",
-    "wait-on": "^3.2.0"
+    "wait-on": "^3.2.0",
+    "webpack": "^4.27.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-middleware": "^3.4.0",
+    "webpack-node-externals": "^1.7.2"
   },
   "husky": {
     "hooks": {

server.js

@@ -1,14 +1,5 @@
-// module imports
-const moduleAlias = require('module-alias');
-require('@babel/polyfill');
-
-// local imports
-const createModuleAliases = require('./utils/createModuleAliases.js');
 const checkForLocalConfig = require('./utils/checkForLocalConfig.js');
 
-const customAliases = createModuleAliases();
-moduleAlias.addAliases(customAliases);
-
 try {
   checkForLocalConfig('lbryConfig');
   checkForLocalConfig('loggerConfig');
@@ -20,11 +11,27 @@ try {
   process.exit(1);
 }
 
+let currentApp;
+
 try {
-  const Server = require('./server/index.js');
+  const Server = require('./server/');
+  currentApp = Server;
+
   const speech = new Server();
   speech.start();
+
 } catch (error) {
   console.log('server startup error:', error);
   process.exit(1);
 }
+
+/*
+TODO: Finish SSR HMR
+if (module.hot) {
+ module.hot.accept('./server', () => {
+  server.removeListener('request', currentApp);
+  server.on('request', app);
+  currentApp = app;
+ })
+}
+*/

server/chainquery/index.js

@@ -66,7 +66,7 @@ const {
   database,
   username,
   password,
-} = require('../../site/config/chainqueryConfig'); // TODO: Make '@config/siteConfig' work outside Webpack for testing/dev
+} = require('@config/chainqueryConfig');
 
 if (!database || !username || !password) {
   logger.warn('missing database, user, or password from chainqueryConfig');

server/chainquery/models/ClaimModel.js

@@ -3,7 +3,7 @@ const logger = require('winston');
 const {
   assetDefaults: { thumbnail: defaultThumbnail },
   details: { host }
-} = require('../../site/config/siteConfig'); // TODO: Fix paths for rollup
+} = require('@config/siteConfig');
 
 const getterMethods = {
   generated_extension() {

server/controllers/assets/serveByClaim/index.js

@@ -1,7 +1,7 @@
 const logger = require('winston');
 
 const { sendGAServeEvent } = require('../../../utils/googleAnalytics');
-const handleShowRender = require('../../../render/build/handleShowRender.js');
+const handleShowRender = require('../../../render/handleShowRender');
 
 const lbryUri = require('../../../../utils/lbryUri.js');
 

server/controllers/assets/serveByIdentifierAndClaim/index.js

@@ -1,7 +1,7 @@
 const logger = require('winston');
 
 const { sendGAServeEvent } = require('../../../utils/googleAnalytics');
-const handleShowRender = require('../../../render/build/handleShowRender.js');
+const handleShowRender = require('../../../render/handleShowRender');
 
 const lbryUri = require('../../../../utils/lbryUri.js');
 

server/controllers/pages/sendReactApp.js

@@ -1,7 +1,5 @@
-const handleShowRender = require('../../render/build/handleShowRender.js');
+import handleShowRender from '../../render/handleShowRender';
 
-const sendReactApp = (req, res) => {
+export default (req, res) => {
   handleShowRender(req, res);
 };
-
-module.exports = sendReactApp;

server/index.js

@@ -45,6 +45,24 @@ function Server () {
     /* create app */
     const app = express();
 
+    if (process.env.NODE_ENV === 'development') {
+      const webpack = require('webpack');
+      const webpackDevMiddleware = require('webpack-dev-middleware');
+
+      const webpackClientConfig = require('../webpack/webpack.client.config')(null, { mode: 'development' });
+      const clientCompilerConfig = Object.assign({}, webpackClientConfig, {
+        mode: 'development',
+      });
+
+      console.log(clientCompilerConfig)
+
+      const clientCompiler = webpack(webpackClientConfig);
+
+      app.use(webpackDevMiddleware(clientCompiler, {
+        publicPath: webpackClientConfig.output.publicPath,
+      }));
+    }
+
     // trust the proxy to get ip address for us
     app.enable('trust proxy');
 

server/models/index.js

@@ -51,16 +51,17 @@ sequelize
 
 // manually add each model to the db object (note: make this dynamic)
 const db = {};
-db['Blocked'] = sequelize.import('Blocked', Blocked);
+
-db['Certificate'] = sequelize.import('Certificate', Certificate);
+db['Blocked'] = Blocked(sequelize, Sequelize);
-db['Channel'] = sequelize.import('Channel', Channel);
+db['Certificate'] = Certificate(sequelize, Sequelize);
-db['Claim'] = sequelize.import('Claim', Claim);
+db['Channel'] = Channel(sequelize, Sequelize);
-db['File'] = sequelize.import('File', File);
+db['Claim'] = Claim(sequelize, Sequelize);
-db['Metrics'] = sequelize.import('Metrics', Metrics);
+db['File'] = File(sequelize, Sequelize);
-db['Tor'] = sequelize.import('Tor', Tor);
+db['Metrics'] = Metrics(sequelize, Sequelize);
-db['Trending'] = sequelize.import('Trending', Trending);
+db['Tor'] = Tor(sequelize, Sequelize);
-db['User'] = sequelize.import('User', User);
+db['Trending'] = Trending(sequelize, Sequelize);
-db['Views'] = sequelize.import('Views', Views);
+db['User'] = User(sequelize, Sequelize);
+db['Views'] = Views(sequelize, Sequelize);
 
 // run model.association for each model in the db object that has an association
 logger.info('associating db models...');

server/models/user.js

@@ -60,7 +60,7 @@ module.exports = (sequelize, { STRING }) => {
   };
 
   // pre-save hook method to hash the user's password before the user's info is saved to the db.
-  User.hook('beforeCreate', (user, options) => {
+  User.addHook('beforeCreate', (user, options) => {
     logger.debug('User.beforeCreate hook...');
     return new Promise((resolve, reject) => {
       // generate a salt string to use for hashing

server/render/build/handlePageRender.js

@@ -1,88 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _server = require("react-dom/server");
-
-var _redux = require("redux");
-
-var _reactRedux = require("react-redux");
-
-var _reactRouterDom = require("react-router-dom");
-
-var _renderFullPage = _interopRequireDefault(require("../renderFullPage"));
-
-var _reduxSaga = _interopRequireDefault(require("redux-saga"));
-
-var _effects = require("redux-saga/effects");
-
-var _reactHelmet = _interopRequireDefault(require("react-helmet"));
-
-var _reducers = _interopRequireDefault(require("@reducers"));
-
-var _GAListener = _interopRequireDefault(require("@components/GAListener"));
-
-var _app = _interopRequireDefault(require("@app"));
-
-var _sagas = _interopRequireDefault(require("@sagas"));
-
-var _actions = _interopRequireDefault(require("@actions"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var returnSagaWithParams = function returnSagaWithParams(saga, params) {
-  return (
-    /*#__PURE__*/
-    regeneratorRuntime.mark(function _callee() {
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return (0, _effects.call)(saga, params);
-
-            case 2:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, this);
-    })
-  );
-};
-
-module.exports = function (req, res) {
-  var context = {}; // create and apply middleware
-
-  var sagaMiddleware = (0, _reduxSaga.default)();
-  var middleware = (0, _redux.applyMiddleware)(sagaMiddleware); // create a new Redux store instance
-
-  var store = (0, _redux.createStore)(_reducers.default, middleware); // create an action to handle the given url,
-  // and create a the saga needed to handle that action
-
-  var action = _actions.default.onHandleShowPageUri(req.params);
-
-  var saga = returnSagaWithParams(_sagas.default.handleShowPageUri, action); // run the saga middleware with the saga call
-
-  sagaMiddleware.run(saga).done.then(function () {
-    // render component to a string
-    var html = (0, _server.renderToString)(_react.default.createElement(_reactRedux.Provider, {
-      store: store
-    }, _react.default.createElement(_reactRouterDom.StaticRouter, {
-      location: req.url,
-      context: context
-    }, _react.default.createElement(_GAListener.default, null, _react.default.createElement(_app.default, null))))); // get head tags from helmet
-
-    var helmet = _reactHelmet.default.renderStatic(); // check for a redirect
-
-
-    if (context.url) {
-      return res.redirect(301, context.url);
-    } // get the initial state from our Redux store
-
-
-    var preloadedState = store.getState(); // send the rendered page back to the client
-
-    res.send((0, _renderFullPage.default)(helmet, html, preloadedState));
-  });
-};

server/render/build/handleShowRender.js

@@ -1,166 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _server = require("react-dom/server");
-
-var _redux = require("redux");
-
-var _reactRedux = require("react-redux");
-
-var _reactRouterDom = require("react-router-dom");
-
-var _renderFullPage = _interopRequireDefault(require("../renderFullPage"));
-
-var _reduxSaga = _interopRequireDefault(require("redux-saga"));
-
-var _effects = require("redux-saga/effects");
-
-var _reactHelmet = _interopRequireDefault(require("react-helmet"));
-
-var httpContext = _interopRequireWildcard(require("express-http-context"));
-
-var _reducers = _interopRequireDefault(require("@reducers"));
-
-var _GAListener = _interopRequireDefault(require("@components/GAListener"));
-
-var _app = _interopRequireDefault(require("@app"));
-
-var _sagas = _interopRequireDefault(require("@sagas"));
-
-var _actions = _interopRequireDefault(require("@actions"));
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var createCanonicalLink = require('../../../utils/createCanonicalLink');
-
-var getCanonicalUrlFromShow = function getCanonicalUrlFromShow(show) {
-  var requestId = show.requestList[show.request.id];
-  var requestType = show.request.type;
-
-  if (!requestId || !requestType) {
-    return null;
-  }
-
-  switch (requestType) {
-    case 'ASSET_DETAILS':
-      var asset = show.assetList[requestId.key];
-      return createCanonicalLink({
-        asset: _objectSpread({}, asset.claimData, {
-          shortId: asset.shortId
-        })
-      });
-
-    case 'CHANNEL':
-      return createCanonicalLink({
-        channel: show.channelList[requestId.key]
-      });
-
-    default:
-      return null;
-  }
-};
-
-var returnSagaWithParams = function returnSagaWithParams(saga, params) {
-  return (
-    /*#__PURE__*/
-    regeneratorRuntime.mark(function _callee() {
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return (0, _effects.call)(saga, params);
-
-            case 2:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, this);
-    })
-  );
-};
-
-module.exports = function (req, res) {
-  var context = {};
-
-  var _httpContext$get = httpContext.get('routeData'),
-      _httpContext$get$acti = _httpContext$get.action,
-      action = _httpContext$get$acti === void 0 ? false : _httpContext$get$acti,
-      _httpContext$get$saga = _httpContext$get.saga,
-      saga = _httpContext$get$saga === void 0 ? false : _httpContext$get$saga;
-
-  var runSaga = action !== false && saga !== false;
-
-  var renderPage = function renderPage(store) {
-    // Workaround, remove when a solution for async httpContext exists
-    var showState = store.getState().show;
-    var assetKeys = Object.keys(showState.assetList);
-
-    if (assetKeys.length !== 0) {
-      res.claimId = showState.assetList[assetKeys[0]].claimId;
-    } else {
-      var channelKeys = Object.keys(showState.channelList);
-
-      if (channelKeys.length !== 0) {
-        res.claimId = showState.channelList[channelKeys[0]].longId;
-        res.isChannel = true;
-      }
-    } // render component to a string
-
-
-    var html = (0, _server.renderToString)(_react.default.createElement(_reactRedux.Provider, {
-      store: store
-    }, _react.default.createElement(_reactRouterDom.StaticRouter, {
-      location: req.url,
-      context: context
-    }, _react.default.createElement(_GAListener.default, null, _react.default.createElement(_app.default, null))))); // get head tags from helmet
-
-    var helmet = _reactHelmet.default.renderStatic(); // check for a redirect
-
-
-    if (context.url) {
-      return res.redirect(301, context.url);
-    } // get the initial state from our Redux store
-
-
-    var preloadedState = store.getState(); // send the rendered page back to the client
-
-    res.send((0, _renderFullPage.default)(helmet, html, preloadedState));
-  };
-
-  if (runSaga) {
-    // create and apply middleware
-    var sagaMiddleware = (0, _reduxSaga.default)();
-    var middleware = (0, _redux.applyMiddleware)(sagaMiddleware); // create a new Redux store instance
-
-    var store = (0, _redux.createStore)(_reducers.default, middleware); // create an action to handle the given url,
-    // and create a the saga needed to handle that action
-
-    var boundAction = action(req.params, req.url);
-    var boundSaga = returnSagaWithParams(saga, boundAction); // run the saga middleware with the saga call
-
-    sagaMiddleware.run(boundSaga).done.then(function () {
-      // redirect if request does not use canonical url
-      var canonicalUrl = getCanonicalUrlFromShow(store.getState().show);
-
-      if (canonicalUrl && canonicalUrl !== req.originalUrl) {
-        console.log("redirecting ".concat(req.originalUrl, " to ").concat(canonicalUrl));
-        res.redirect(canonicalUrl);
-      }
-
-      return renderPage(store);
-    });
-  } else {
-    var _store = (0, _redux.createStore)(_reducers.default);
-
-    renderPage(_store);
-  }
-};

server/render/handleShowRender.jsx

@@ -3,7 +3,7 @@ import { renderToString } from 'react-dom/server';
 import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import { StaticRouter } from 'react-router-dom';
-import renderFullPage from '../renderFullPage';
+import renderFullPage from './renderFullPage';
 import createSagaMiddleware from 'redux-saga';
 import { call } from 'redux-saga/effects';
 import Helmet from 'react-helmet';
@@ -15,7 +15,7 @@ import App from '@app';
 import Sagas from '@sagas';
 import Actions from '@actions';
 
-const createCanonicalLink = require('../../../utils/createCanonicalLink');
+const createCanonicalLink = require('../../utils/createCanonicalLink');
 
 const getCanonicalUrlFromShow = show => {
   const requestId = show.requestList[show.request.id];
@@ -42,7 +42,7 @@ const returnSagaWithParams = (saga, params) => {
   };
 };
 
-module.exports = (req, res) => {
+export default (req, res) => {
   let context = {};
 
   const {
@@ -98,7 +98,9 @@ module.exports = (req, res) => {
   if (runSaga) {
     // create and apply middleware
     const sagaMiddleware = createSagaMiddleware();
+    console.log('saga')
     const middleware = applyMiddleware(sagaMiddleware);
+    console.log('sagaend')
 
     // create a new Redux store instance
     const store = createStore(Reducers, middleware);

server/routes/api/index.js

@@ -26,7 +26,7 @@ const getTorList = require('../../controllers/api/tor');
 const getBlockedList = require('../../controllers/api/blocked');
 const getOEmbedData = require('../../controllers/api/oEmbed');
 
-module.exports = {
+export default {
   // homepage routes
   '/api/homepage/data/channels'                           : { controller: [ torCheckMiddleware, channelData ] },
   // channel routes

server/routes/assets/index.js

@@ -5,7 +5,7 @@ const serveByIdentifierAndClaim = require('../../controllers/assets/serveByIdent
 const Actions = require('@actions').default;
 const Sagas = require('@sagas').default;
 
-module.exports = {
+export default {
   '/:identifier/:claim': { controller: serveByIdentifierAndClaim, action: Actions.onHandleShowPageUri, saga: Sagas.handleShowPageUri },
   '/:claim'            : { controller: serveByClaim, action: Actions.onHandleShowPageUri, saga: Sagas.handleShowPageUri },
 };

server/routes/auth/index.js

@@ -4,7 +4,7 @@ const handleLoginRequest = require('../../controllers/auth/login');
 const handleLogoutRequest = require('../../controllers/auth/logout');
 const handleUserRequest = require('../../controllers/auth/user');
 
-module.exports = {
+export default {
   '/signup': { method: 'post', controller: [ speechPassport.authenticate('local-signup'), handleSignupRequest ] },
   '/auth'  : { method: 'post', controller: handleLoginRequest },
   '/logout': { controller: handleLogoutRequest },

server/routes/fallback/index.js

@@ -1,5 +1,5 @@
-const handlePageRequest = require('../../controllers/pages/sendReactApp');
+import handlePageRequest from '../../controllers/pages/sendReactApp';
 
-module.exports = {
+export default {
   '*': { controller: handlePageRequest, action: 'fallback' },
 };

server/routes/index.js

@@ -1,7 +1,7 @@
 module.exports = {
-  ...require('./pages'),
+  ...require('./pages').default,
-  ...require('./api'),
+  ...require('./api').default,
-  ...require('./auth'),
+  ...require('./auth').default,
-  ...require('./assets'),
+  ...require('./assets').default,
-  ...require('./fallback'),
+  ...require('./fallback').default,
 };

server/routes/pages/index.js

@@ -1,4 +1,4 @@
-const handlePageRequest = require('../../controllers/pages/sendReactApp');
+import handlePageRequest from '../../controllers/pages/sendReactApp';
 const handleVideoEmbedRequest = require('../../controllers/pages/sendVideoEmbedPage');
 const redirect = require('../../controllers/utils/redirect');
 
@@ -6,7 +6,7 @@ const redirect = require('../../controllers/utils/redirect');
 const Actions = require('@actions').default;
 const Sagas = require('@sagas').default;
 
-module.exports = {
+export default {
   '/'                                   : { controller: handlePageRequest, action: Actions.onHandleShowHomepage, saga: Sagas.handleShowHomepage  },
   '/login'                              : { controller: handlePageRequest },
   '/about'                              : { controller: handlePageRequest },

utils/createModuleAliases.js

@@ -1,7 +1,7 @@
 const { statSync, existsSync, readdirSync } = require('fs');
 const { join, resolve } = require('path');
-const DEFAULT_ROOT = 'client/build';
+const DEFAULT_ROOT = 'client/src';
-const CUSTOM_ROOT = 'site/custom/build';
+const CUSTOM_ROOT = 'site/custom/src';
 const DEFAULT_SCSS_ROOT = 'client/scss';
 const CUSTOM_SCSS_ROOT = 'site/custom/scss';
 
@@ -27,7 +27,7 @@ const addAliasesForCustomComponentFolder = (name, aliasObject) => {
 module.exports = () => {
   let moduleAliases = {};
 
-  moduleAliases['chainquery'] = resolve('./server/chainquery/bundle');
+  moduleAliases['chainquery'] = resolve('./server/chainquery');
   moduleAliases['server'] = resolve('./server');
 
   // aliases for configs

webpack.config.js

@@ -1,55 +1,10 @@
-const Path = require('path');
+module.exports = (env, argv) => {
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+  const isDev = argv.mode === 'development';
-const createModuleAliases = require('./utils/createModuleAliases.js');
-const SCSS_ROOT = Path.join(__dirname, 'client/scss/');
-const CLIENT_ROOT = Path.join(__dirname, 'client/');
-const CUSTOM_CLIENT_ROOT = Path.join(__dirname, 'site/custom/');
 
-const customAliases = createModuleAliases();
+  return isDev ? [
-
+    require('./webpack/webpack.server.config')(env, argv),
-module.exports = {
+  ] : [
-  target: 'web',
+    require('./webpack/webpack.server.config')(env, argv),
-  entry : ['@babel/polyfill', 'whatwg-fetch', './client/build/index.js'],
+    require('./webpack/webpack.client.config')(env, argv),
-  output: {
+  ];
-    path      : Path.join(__dirname, 'public/bundle'),
+}
-    publicPath: '/bundle/',
-    filename  : 'bundle.js',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.scss$/,
-        use : ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use     : ['css-loader', 'sass-loader'],
-        }),
-      },
-      {
-        test: /\.(png|jpg|gif|otf|ttf|svg)$/,
-        use : [
-          {
-            loader : 'url-loader',
-            options: {
-              limit: 8192,
-              name : '[name]-[hash].[ext]',
-            },
-          },
-        ],
-      },
-    ],
-  },
-  resolve: {
-    modules: [
-      CUSTOM_CLIENT_ROOT,
-      CLIENT_ROOT,
-      SCSS_ROOT,
-      'node_modules',
-      __dirname,
-    ],
-    alias     : customAliases,
-    extensions: ['.js', '.jsx', '.scss'],
-  },
-  plugins: [
-    new ExtractTextPlugin('style.css'),
-  ],
-};

webpack/webpack.client.config.js

@@ -0,0 +1,74 @@
+const Path = require('path');
+const webpack = require('webpack');
+const nodeExternals = require('webpack-node-externals');
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+const createModuleAliases = require('../utils/createModuleAliases.js');
+
+const SCSS_ROOT = Path.resolve(__dirname, '../client/scss/');
+const CLIENT_ROOT = Path.resolve(__dirname, '../client/');
+const CUSTOM_CLIENT_ROOT = Path.resolve(__dirname, '../site/custom/');
+
+const customAliases = createModuleAliases();
+
+module.exports = (env, argv) => {
+  const isDev = argv.mode === 'development';
+
+  return {
+    target: 'web',
+    entry : ['@babel/polyfill', 'whatwg-fetch', './client/src/index.js'],
+    output: {
+      path      : Path.resolve(__dirname, '../public/bundle'),
+      publicPath: '/bundle/',
+      filename  : 'bundle.js',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.jsx?$/,
+          exclude: /(node_modules|bower_components)/,
+          use: {
+            loader: 'babel-loader',
+          },
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            {
+              loader: ExtractCssChunks.loader,
+            },
+            'css-loader',
+            'sass-loader',
+          ]
+        },
+        {
+          test: /\.(png|jpg|gif|otf|ttf|svg)$/,
+          use : [
+            {
+              loader : 'url-loader',
+              options: {
+                limit: 8192,
+                name : '[name]-[hash].[ext]',
+              },
+            },
+          ],
+        },
+      ],
+    },
+    resolve: {
+      modules: [
+        CUSTOM_CLIENT_ROOT,
+        CLIENT_ROOT,
+        SCSS_ROOT,
+        'node_modules',
+        __dirname,
+      ],
+      alias     : customAliases,
+      extensions: ['.js', '.jsx', '.scss', '.json'],
+    },
+    plugins: [
+      new ExtractCssChunks({
+        filename: 'style.css', // '[name].css',
+      })
+    ],
+  };
+}

webpack/webpack.server.config.js

@@ -0,0 +1,87 @@
+const Path = require('path');
+const webpack = require('webpack');
+const nodeExternals = require('webpack-node-externals');
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+const createModuleAliases = require('../utils/createModuleAliases.js');
+
+const SCSS_ROOT = Path.resolve(__dirname, '../client/scss/');
+const CLIENT_ROOT = Path.resolve(__dirname, '../client/');
+const CUSTOM_CLIENT_ROOT = Path.resolve(__dirname, '../site/custom/');
+
+const customAliases = createModuleAliases();
+
+module.exports = (env, argv) => {
+  const isDev = argv.mode === 'development';
+
+  return {
+    target: 'node',
+    //watch: isDev,
+    externals: [nodeExternals({
+      whitelist: ['webpack/hot/poll?1000'],
+    })],
+
+    // Set __dirname relative to current __dirname for node
+    context: Path.resolve(__dirname, '../'),
+    node: {
+      __dirname: true,
+    },
+
+    entry : [
+      ...(isDev ? ['webpack/hot/poll?1000'] : []),
+      '@babel/polyfill',
+      './server.js'
+    ],
+    output: {
+      path      : Path.resolve(__dirname, '../server/bundle'),
+      //publicPath: '/bundle/',
+      filename  : 'server.js',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.jsx?$/,
+          exclude: /(node_modules|bower_components)/,
+          use: {
+            loader: 'babel-loader',
+          },
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            {
+              loader: ExtractCssChunks.loader,
+            },
+            'css-loader',
+            'sass-loader',
+          ]
+        },
+        {
+          test: /\.(png|jpg|gif|otf|ttf|svg)$/,
+          use : [
+            {
+              loader : 'url-loader',
+              options: {
+                limit: 8192,
+                name : '[name]-[hash].[ext]',
+              },
+            },
+          ],
+        },
+      ],
+    },
+    resolve: {
+      modules: [
+        CUSTOM_CLIENT_ROOT,
+        CLIENT_ROOT,
+        SCSS_ROOT,
+        'node_modules',
+        __dirname,
+      ],
+      alias     : customAliases,
+      extensions: ['.js', '.jsx', '.scss', '.json'],
+    },
+    plugins: [
+      new webpack.HotModuleReplacementPlugin(),
+    ]
+  };
+}