removed openGraphTag component and added webpack-merge

models/index.js

@@ -30,17 +30,6 @@ sequelize
     logger.error('Sequelize was unable to connect to the database:', err);
   });
 
-// // add each model to the db object
-// fs
-//   .readdirSync(__dirname)
-//   .filter(file => {
-//     return (file.indexOf('.') !== 0 && file !== basename && file.slice(-3) === '.js');
-//   })
-//   .forEach(file => {
-//     const model = sequelize['import'](path.join(__dirname, file));
-//     db[model.name] = model;
-//   });
-
 // manually add each model to the db
 const Certificate = require('./certificate.js');
 const Channel = require('./channel.js');

package.json

@@ -6,12 +6,13 @@
   "scripts": {
     "test": "mocha --recursive",
     "test-all": "mocha --recursive",
-    "start": "nodemon server.js",
+    "start": "server.js",
     "lint": "eslint .",
     "fix": "eslint . --fix",
     "precommit": "eslint .",
     "babel": "babel",
-    "webpack": "webpack"
+    "build-dev": "webpack",
+    "build-production": "webpack"
   },
   "repository": {
     "type": "git",
@@ -89,6 +90,7 @@
     "nodemon": "^1.15.1",
     "redux-devtools": "^3.4.1",
     "regenerator-transform": "^0.12.3",
-    "webpack": "^3.10.0"
+    "webpack": "^3.10.0",
+    "webpack-merge": "^4.1.2"
   }
 }

react/client.js

@@ -24,10 +24,8 @@ const reduxMiddleware = window.__REDUX_DEVTOOLS_EXTENSION__ ? compose(middleware
 // create teh store
 let store;
 if (preloadedState) {
-  console.log('initial load: preloaded state found');
   store = createStore(Reducer, preloadedState, reduxMiddleware);
 } else {
-  console.log('initial load: no preloaded state found');
   store = createStore(Reducer, reduxMiddleware);
 }
 

react/components/OpenGraphTags/index.jsx

@@ -1,21 +0,0 @@
-import { connect } from 'react-redux';
-import View from './view';
-
-const mapStateToProps = ({ show }) => {
-  // select request info
-  const requestId = show.request.id;
-  // select asset info
-  let asset;
-  const request = show.requestList[requestId] || null;
-  const assetList = show.assetList;
-  if (request && assetList) {
-    const assetKey = request.key;  // note: just store this in the request
-    asset = assetList[assetKey] || null;
-  };
-  // return props
-  return {
-    asset,
-  };
-};
-
-export default connect(mapStateToProps, null)(View);

react/components/OpenGraphTags/view.jsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import Helmet from 'react-helmet';
-
-const { site: { title, host }, claim: { defaultThumbnail, defaultDescription } } = require('../../../config/speechConfig.js');
-
-const determineOgThumbnailContentType = (thumbnail) => {
-  if (thumbnail) {
-    const fileExt = thumbnail.substring(thumbnail.lastIndexOf('.'));
-    switch (fileExt) {
-      case 'jpeg':
-      case 'jpg':
-        return 'image/jpeg';
-      case 'png':
-        return 'image/png';
-      case 'gif':
-        return 'image/gif';
-      case 'mp4':
-        return 'video/mp4';
-      default:
-        return 'image/jpeg';
-    }
-  }
-  return '';
-};
-
-class OpenGraphTags extends React.Component {
-  render () {
-    const { claimData } = this.props.asset;
-    const { contentType } = claimData;
-    const embedUrl = `${host}/${claimData.claimId}/${claimData.name}`;
-    const showUrl = `${host}/${claimData.claimId}/${claimData.name}`;
-    const source = `${host}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`;
-    const ogTitle = claimData.title || claimData.name;
-    const ogDescription = claimData.description || defaultDescription;
-    const ogThumbnailContentType = determineOgThumbnailContentType(claimData.thumbnail);
-    const ogThumbnail = claimData.thumbnail || defaultThumbnail;
-    return (
-      <div>
-        <Helmet>
-          {/* basic open graph tags */}
-          <meta property='og:title' content={ogTitle} />
-          <meta property='og:url' content={showUrl} />
-          <meta property='og:site_name' content={title} />
-          <meta property='og:description' content={ogDescription} />
-          <meta property='og:image:width' content='600' />
-          <meta property='og:image:height' content='315' />
-          {/* basic twitter tags */}
-          <meta name='twitter:site' content='@spee_ch' />
-        </Helmet>
-        { contentType === 'video/mp4' || contentType === 'video/webm' ? (
-          <Helmet>
-            {/* video open graph tags */}
-            <meta property='og:video' content={source} />
-            <meta property='og:video:secure_url' content={source} />
-            <meta property='og:video:type' content={contentType} />
-            <meta property='og:image' content={ogThumbnail} />
-            <meta property='og:image:type' content={ogThumbnailContentType} />
-            <meta property='og:type' content='video' />
-            {/* video twitter tags */}
-            <meta name='twitter:card' content='player' />
-            <meta name='twitter:player' content={embedUrl} />
-            <meta name='twitter:player:width' content='600' />
-            <meta name='twitter:text:player_width' content='600' />
-            <meta name='twitter:player:height' content='337' />
-            <meta name='twitter:player:stream' content={source} />
-            <meta name='twitter:player:stream:content_type' content={contentType} />
-          </Helmet>
-        ) : (
-          <Helmet>
-            {/* image open graph tags */}
-            <meta property='og:image' content={source} />
-            <meta property='og:image:type' content={contentType} />
-            <meta property='og:type' content='article' />
-            {/* image twitter tags */}
-            <meta name='twitter:card' content='summary_large_image' />
-          </Helmet>
-        )}
-      </div>
-    );
-  }
-};
-
-export default OpenGraphTags;

webpack.config.js

@@ -1,76 +1,91 @@
 const Path = require('path');
 const nodeExternals = require('webpack-node-externals');
 const REACT_ROOT = Path.resolve(__dirname, 'react/');
+const merge = require('webpack-merge');
+const TARGET = process.env.npm_lifecycle_event;
 
-console.log('REACT_ROOT:', REACT_ROOT);
+const serverBaseConfig = {
+  target: 'node',
+  node  : {
+    __dirname: false,
+  },
+  externals: [nodeExternals()],
+  entry    : ['babel-polyfill', 'whatwg-fetch', './index.js'],
+  output   : {
+    path      : Path.resolve(__dirname),
+    publicPath: '/',
+    filename  : 'server.js',
+  },
+  module: {
+    rules: [
+      {
+        test   : /.jsx?$/,
+        exclude: /node_modules/,
+        loader : 'babel-loader',
+        options: {
+          presets: ['es2015',  'react', 'stage-2'],
+        },
+      },
+      {
+        test  : /.css$/,
+        loader: 'css-loader',
+      },
+    ],
+  },
+  resolve: {
+    modules: [
+      REACT_ROOT,
+      'node_modules',
+      __dirname,
+    ],
+    extensions: ['.js', '.json', '.jsx', '.css'],
+  },
+};
 
-module.exports = [
-  {
-    target: 'web',
-    entry : ['babel-polyfill', 'whatwg-fetch', './react/client.js'],
-    output: {
-      path      : Path.join(__dirname, 'public/bundle/'),
-      publicPath: 'public/bundle/',
-      filename  : 'bundle.js',
-    },
-    watch : true,
-    module: {
-      loaders: [
-        {
-          test   : /.jsx?$/,
-          loader : 'babel-loader',
-          exclude: /node_modules/,
-          query  : {
-            presets: ['es2015', 'react', 'stage-2'],
-          },
-        },
-      ],
-    },
-    resolve: {
-      modules: [
-        REACT_ROOT,
-        'node_modules',
-        __dirname,
-      ],
-      extensions: ['.js', '.jsx', '.scss'],
-    },
+const clientBaseConfig = {
+  target: 'web',
+  entry : ['babel-polyfill', 'whatwg-fetch', './react/client.js'],
+  output: {
+    path      : Path.join(__dirname, 'public/bundle/'),
+    publicPath: 'public/bundle/',
+    filename  : 'bundle.js',
   },
-  {
-    target: 'node',
-    node  : {
-      __dirname: false,
-    },
-    externals: [nodeExternals()],
-    entry    : ['babel-polyfill', 'whatwg-fetch', './index.js'],
-    output   : {
-      path      : Path.resolve(__dirname),
-      publicPath: '/',
-      filename  : 'server.js',
-    },
-    watch : true,
-    module: {
-      rules: [
-        {
-          test   : /.jsx?$/,
-          exclude: /node_modules/,
-          loader : 'babel-loader',
-          options: {
-            presets: ['es2015',  'react', 'stage-2'],
-          },
+  module: {
+    loaders: [
+      {
+        test   : /.jsx?$/,
+        loader : 'babel-loader',
+        exclude: /node_modules/,
+        query  : {
+          presets: ['es2015', 'react', 'stage-2'],
         },
-        {
-          test  : /.css$/,
-          loader: 'css-loader',
-        },
-      ],
-    },
-    resolve: {
-      modules: [
-        REACT_ROOT,
-        'node_modules',
-        __dirname,
-      ],
-      extensions: ['.js', '.json', '.jsx', '.css'],
-    },
+      },
+    ],
   },
-];
+  resolve: {
+    modules: [
+      REACT_ROOT,
+      'node_modules',
+      __dirname,
+    ],
+    extensions: ['.js', '.jsx', '.scss'],
+  },
+};
+
+if (TARGET === 'build-dev') {
+  module.exports = [
+    merge(serverBaseConfig, {
+      watch: true,
+    }),
+    merge(clientBaseConfig, {
+      watch: true,
+    }),
+  ];
+};
+
+if (TARGET === 'build-production') {
+  module.exports = [
+    merge(clientBaseConfig, {}),
+    merge(serverBaseConfig, {}),
+  ];
+};