server-side render POC

config/webpack.config.dev.js

@@ -10,7 +10,6 @@
 var path = require('path');
 var autoprefixer = require('autoprefixer');
 var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 // TODO: hide this behind a flag and eliminate dead code on eject.
 // This shouldn't be exposed to the user.
@@ -25,16 +24,14 @@ if (isInDebugMode) {
 }
 var srcPath = path.resolve(__dirname, relativePath, 'src');
 var nodeModulesPath = path.join(__dirname, '..', 'node_modules');
-var indexHtmlPath = path.resolve(__dirname, relativePath, 'index.html');
-var faviconPath = path.resolve(__dirname, relativePath, 'favicon.ico');
 var buildPath = path.join(__dirname, isInNodeModules ? '../../..' : '..', 'build');
 
 module.exports = {
   devtool: 'eval',
   entry: [
     require.resolve('webpack-dev-server/client') + '?http://localhost:3000',
     require.resolve('webpack/hot/dev-server'),
-    path.join(srcPath, 'index')
+    path.join(srcPath, 'client/index')
   ],
   output: {
     // Next line is not used in dev but WebpackDevServer crashes without it:
@@ -92,11 +89,6 @@ module.exports = {
     return [autoprefixer];
   },
   plugins: [
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: indexHtmlPath,
-      favicon: faviconPath,
-    }),
     new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }),
     // Note: only CSS is currently hot reloaded
     new webpack.HotModuleReplacementPlugin()

config/webpack.config.prod.js

@@ -10,7 +10,6 @@
 var path = require('path');
 var autoprefixer = require('autoprefixer');
 var webpack = require('webpack');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var url = require('url');
 
@@ -24,9 +23,7 @@ if (process.argv[2] === '--debug-template') {
 }
 var srcPath = path.resolve(__dirname, relativePath, 'src');
 var nodeModulesPath = path.join(__dirname, '..', 'node_modules');
-var indexHtmlPath = path.resolve(__dirname, relativePath, 'index.html');
-var faviconPath = path.resolve(__dirname, relativePath, 'favicon.ico');
-var buildPath = path.join(__dirname, isInNodeModules ? '../../..' : '..', 'build');
+var buildPath = path.join(__dirname, isInNodeModules ? '../../..' : '..', 'build/client');
 var homepagePath = require(path.resolve(__dirname, relativePath, 'package.json')).homepage;
 var publicPath = homepagePath ? url.parse(homepagePath).pathname : '/';
 if (!publicPath.endsWith('/')) {
@@ -37,7 +34,7 @@ if (!publicPath.endsWith('/')) {
 module.exports = {
   bail: true,
   devtool: 'source-map',
-  entry: path.join(srcPath, 'index'),
+  entry: path.join(srcPath, 'client/index'),
   output: {
     path: buildPath,
     filename: '[name].[chunkhash].js',
@@ -98,23 +95,6 @@ module.exports = {
     return [autoprefixer];
   },
   plugins: [
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: indexHtmlPath,
-      favicon: faviconPath,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeRedundantAttributes: true,
-        useShortDoctype: true,
-        removeEmptyAttributes: true,
-        removeStyleLinkTypeAttributes: true,
-        keepClosingSlash: true,
-        minifyJS: true,
-        minifyCSS: true,
-        minifyURLs: true
-      }
-    }),
     new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
     new webpack.optimize.OccurrenceOrderPlugin(),
     new webpack.optimize.DedupePlugin(),
@@ -131,6 +111,13 @@ module.exports = {
         screw_ie8: true
       }
     }),
-    new ExtractTextPlugin('[name].[contenthash].css')
+    new ExtractTextPlugin('[name].[contenthash].css'),
+    function() {
+      this.plugin('done', function(stats) {
+        require('fs').writeFileSync(
+          path.join(buildPath, 'stats.json'),
+          JSON.stringify(stats.toJson().assetsByChunkName));
+      });
+    }
   ]
 };

config/webpack.config.server.dev.js

@@ -0,0 +1,68 @@
+var path = require('path');
+var fs = require('fs');
+var webpack = require('webpack');
+
+var isInNodeModules = 'node_modules' ===
+  path.basename(path.resolve(path.join(__dirname, '..', '..')));
+var relativePath = isInNodeModules ? '../../..' : '..';
+var isInDebugMode = process.argv.some(arg =>
+  arg.indexOf('--debug-template') > -1
+);
+if (isInDebugMode) {
+  relativePath = '../template';
+}
+
+var srcPath = path.resolve(__dirname, relativePath, 'src');
+var nodeModulesPath = path.join(__dirname, '..', 'node_modules');
+var buildPath = path.join(__dirname, isInNodeModules ? '../../..' : '..', 'build/server');
+
+const nodeModules = fs.readdirSync(nodeModulesPath)
+  .filter(entry => ['.bin'].indexOf(entry) === -1)
+  .reduce((reduction, entry, foo) => {
+    const objectWithCommonJsModule = {};
+    objectWithCommonJsModule[entry] = `commonjs ${entry}`;
+    return Object.assign(reduction, objectWithCommonJsModule);
+  }, {});
+
+module.exports = {
+  entry: path.join(srcPath, 'server/server'),
+  target: 'node',
+  debug: true,
+  watch: true,
+  inline: true,
+  devtool: 'eval',
+  output: {
+    path: buildPath,
+    filename: 'server-dev.js',
+    publicPath: '/'
+  },
+  externals: nodeModules,
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        include: srcPath,
+        loader: 'babel',
+        query: require('./babel.dev')
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
+      },
+      {
+        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
+        loader: 'file?emitFile=false',
+      },
+      {
+        test: /\.(mp4|webm)$/,
+        loader: 'url?limit=10000'
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['', '.js']
+  },
+  plugins: [
+    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }),
+  ]
+};

config/webpack.config.server.prod.js

@@ -0,0 +1,80 @@
+var path = require('path');
+var fs = require('fs');
+var webpack = require('webpack');
+
+var isInNodeModules = 'node_modules' ===
+  path.basename(path.resolve(path.join(__dirname, '..', '..')));
+var relativePath = isInNodeModules ? '../../..' : '..';
+var isInDebugMode = process.argv.some(arg =>
+  arg.indexOf('--debug-template') > -1
+);
+if (isInDebugMode) {
+  relativePath = '../template';
+}
+
+var srcPath = path.resolve(__dirname, relativePath, 'src');
+var nodeModulesPath = path.join(__dirname, '..', 'node_modules');
+var buildPath = path.join(__dirname, isInNodeModules ? '../../..' : '..', 'build/server');
+
+const nodeModules = fs.readdirSync(nodeModulesPath)
+  .filter(entry => ['.bin'].indexOf(entry) === -1)
+  .reduce((reduction, entry, foo) => {
+    const objectWithCommonJsModule = {};
+    objectWithCommonJsModule[entry] = `commonjs ${entry}`;
+    return Object.assign(reduction, objectWithCommonJsModule);
+  }, {});
+
+module.exports = {
+  entry: path.join(srcPath, 'server/server'),
+  target: 'node',
+  devtool: 'source-map',
+  output: {
+    path: buildPath,
+    filename: 'server.js',
+    publicPath: '/'
+  },
+  externals: nodeModules,
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        include: srcPath,
+        loader: 'babel',
+        query: require('./babel.prod')
+      },
+      {
+        test: /\.json$/,
+        loader: 'json'
+      },
+      {
+        test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)$/,
+        loader: 'file?emitFile=false',
+      },
+      {
+        test: /\.(mp4|webm)$/,
+        loader: 'url?limit=10000'
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['', '.js']
+  },
+  plugins: [
+    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
+    new webpack.optimize.OccurrenceOrderPlugin(),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        screw_ie8: true,
+        warnings: false
+      },
+      mangle: {
+        screw_ie8: true
+      },
+      output: {
+        comments: false,
+        screw_ie8: true
+      }
+    })
+  ]
+};

foobar/package.json

@@ -0,0 +1 @@
+{"name":"foobar","version":"0.0.1","private":true}

package.json

@@ -48,11 +48,12 @@
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.9.0",
     "fs-extra": "^0.30.0",
-    "html-webpack-plugin": "2.22.0",
     "json-loader": "0.5.4",
     "opn": "4.0.2",
     "postcss-loader": "0.9.1",
+    "request": "^2.74.0",
     "rimraf": "2.5.3",
+    "single-child": "^0.3.4",
     "style-loader": "0.13.1",
     "url-loader": "0.5.7",
     "webpack": "1.13.1",

scripts/build.js

@@ -12,7 +12,8 @@ process.env.NODE_ENV = 'production';
 var path = require('path');
 var rimrafSync = require('rimraf').sync;
 var webpack = require('webpack');
-var config = require('../config/webpack.config.prod');
+var configClient = require('../config/webpack.config.prod');
+var configServer = require('../config/webpack.config.server.prod');
 
 var isInNodeModules = 'node_modules' ===
   path.basename(path.resolve(path.join(__dirname, '..', '..')));
@@ -24,7 +25,9 @@ var packageJsonPath = path.join(__dirname, relative, 'package.json');
 var buildPath = path.join(__dirname, relative, 'build');
 rimrafSync(buildPath);
 
-webpack(config).run(function(err, stats) {
+webpack(configServer).run(() => {});
+
+webpack(configClient).run(function(err, stats) {
   if (err) {
     console.error('Failed to create a production build. Reason:');
     console.error(err.message || err);