added universal script

config/webpack.config.server.js

@@ -9,16 +9,18 @@ const nodeExternals = require('webpack-node-externals');
 
 const base = require('./webpack.config.base');
 
-base.target = 'node'
-base.entry = './src/server'
-base.externals = [nodeExternals()] // / in order to ignore all modules in node_modules folder
-base.output = {
+const config = Object.assign({}, base)
+
+config.target = 'node'
+config.entry = './src/server'
+config.externals = [nodeExternals()] // / in order to ignore all modules in node_modules folder
+config.output = {
   path: paths.serverBuild,
   filename: 'bundle.js',
   publicPath: '/'
 },
 
-base.node = {
+config.node = {
   console: false,
   global: false,
   process: false,
@@ -28,4 +30,4 @@ base.node = {
   setImmediate: false,
 }
 
-module.exports = base
+module.exports = config

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "scripts": {
     "serve": "NODE_ENV=production node ./build/server/bundle.js",
+    "start-client": "node scripts/start-client.js",
+    "start-universal": "node scripts/start-universal.js",
     "start": "NODE_ENV=development concurrently -c blue,grey,magenta \"npm run dev-build-server\" \"sleep 3 && npm run dev-run-server\" \"npm run dev-build-and-run-client\"",
     "clean-build": "node_modules/.bin/rimraf ./build",
     "dev-build-server": "NODE_ENV=development webpack --watch --config config/webpack.config.server.js",

scripts/start-universal.js

@@ -0,0 +1,127 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'development';
+process.env.NODE_ENV = 'development';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const fs = require('fs');
+const chalk = require('chalk');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const clearConsole = require('react-dev-utils/clearConsole');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const {
+  choosePort,
+  createCompiler,
+  prepareProxy,
+  prepareUrls,
+} = require('react-dev-utils/WebpackDevServerUtils');
+const openBrowser = require('react-dev-utils/openBrowser');
+const paths = require('../config/paths');
+const configWebpackClient = require('../config/webpack.config.client.dev');
+
+// const createDevServerConfig = require('../config/webpackDevServer.config');
+
+const useYarn = fs.existsSync(paths.yarnLockFile);
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appIndexJs])) {
+  process.exit(1);
+}
+
+// Tools like Cloud9 rely on this.
+const DEFAULT_CLIENT_PORT = parseInt(process.env.PORT, 10) || 3020;
+const DEFAULT_SERVER_PORT = parseInt(process.env.PORT, 10) || 5678;
+const HOST = process.env.HOST || '0.0.0.0';
+
+// We attempt to use the default port but if it is busy, we offer the user to
+// run on a different port. `detect()` Promise resolves to the next free port.
+choosePort(HOST, DEFAULT_CLIENT_PORT)
+  .then(port => {
+    if (port == null) {
+      // We have not found a port.
+      return;
+    }
+
+    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
+    const appName = require(paths.appPackageJson).name;
+    const urls = prepareUrls(protocol, HOST, port);
+
+    global.CLIENT_PORT = port
+
+    // Create a webpack compiler that is configured with custom messages.
+    //const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+    const compiler = webpack(configWebpackClient);
+    // Load proxy config
+    const proxySetting = require(paths.appPackageJson).proxy;
+    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+    const serverConfig = {
+      hot: false,
+      port,
+      inline: true
+    }
+    const clientServer = new WebpackDevServer(compiler, serverConfig);
+    // Launch WebpackDevServer.
+    clientServer.listen(port, HOST, err => {
+      if (err) {
+        return console.log(err);
+      }
+      if (isInteractive) {
+        clearConsole();
+      }
+      console.log(chalk.cyan(`Starting the client on port ${port}...\n`));
+
+      choosePort(HOST, DEFAULT_SERVER_PORT)
+        .then(portServer => {
+          if (portServer == null) {
+            // We have not found a port.
+            return;
+          }
+
+          global.SERVER_PORT = portServer
+
+          const configWebpackServer = require('../config/webpack.config.server');
+          const compiler = webpack(configWebpackServer)
+          compiler.watch({ // watch options:
+              aggregateTimeout: 300, // wait so long for more changes
+          }, function(err, stats) {
+              if (err)
+                console.log('error on webpack server', err)
+
+              const server = require('../build/server/bundle.js')
+              const urls = prepareUrls(protocol, HOST, portServer);
+              openBrowser(urls.localUrlForBrowser);
+          });
+
+        })
+        .catch(err => {
+          if (err && err.message) {
+            console.log(err.message);
+          }
+          process.exit(1);
+        });
+    });
+    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
+      process.on(sig, function() {
+        devServer.close();
+        process.exit();
+      })
+    });
+  })
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });

src/server/index.js

@@ -20,13 +20,15 @@ if (process.env.NODE_ENV === 'production') {
 } else {
   // Otherwise we want to proxy the webpack development server.
   app.use('/static', proxy({
-    target: 'http://localhost:3020',
+    target: `http://localhost:${global.CLIENT_PORT || 3020}`,
+    //target: `http://localhost:3020`,
     ws: true,
     logLevel: 'warn'
   }));
 }
 
 app.use(reactApp)
 
-app.listen(config.port)
-console.log(`Listening at http://${config.host}:${config.port}`)
+const port = global.SERVER_PORT || config.port
+app.listen(port)
+console.log(`Listening at http://${config.host}:${port}`)

src/server/render.js

@@ -1,7 +1,7 @@
 import { renderToString } from 'react-dom/server'
 
 const DEV = process.env.NODE_ENV === 'development'
-// TODO: move this to config and set according to environment
+
 const bundleUrl = DEV ?
   '/static/js/bundle.js' :
   '/static/js/main[hash].js'