Isomorphic render

client/config/design/webpack.config.client.js

@@ -0,0 +1,5 @@
+import { client_configuration } from 'universal-webpack'
+import settings from '../../../universal-webpack-settings'
+import configuration from './webpack'
+
+export default client_configuration(configuration, settings)

client/config/development/webpack.config.client.js

@@ -0,0 +1,5 @@
+import { client_configuration } from 'universal-webpack'
+import settings from '../../../universal-webpack-settings'
+import configuration from './webpack.js'
+
+export default client_configuration(configuration, settings)

client/config/development/webpack.js

@@ -2,12 +2,14 @@
 
 import webpack from 'webpack';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import path from 'path';
 
 const CLIENT = __dirname + '/../..';
 const ROOT = CLIENT + '/..';
 
 // Identical to development webpack config, except minified.
 module.exports = {
+  context: __dirname + '/../../../',
   entry: {
     app: __dirname + '/entry',
     style: __dirname + '/style'
@@ -24,10 +26,22 @@ module.exports = {
         loader: 'babel'
       }, {
         test: /\.scss$/,
-        loader: ExtractTextPlugin.extract('style', 'css!sass?sourceMap=true')
+        loaders: //ExtractTextPlugin.extract({fallbackLoader:'style', loader:'css!sass?sourceMap=true'})
+        [
+          'style-loader',
+          'css-loader?importLoaders=2&sourceMap',
+          'postcss-loader',
+          'sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true'
+        ]
       }, {
         test: /\.css$/,
-        loader: ExtractTextPlugin.extract('style', 'css?sourceMap=true')
+        loaders: //ExtractTextPlugin.extract('style', 'css?sourceMap=true')
+       [
+          'style-loader',
+          'css-loader?importLoaders=2&sourceMap',
+          'postcss-loader',
+          'sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true'
+        ]
       }, {
         test: /\.json$/,
         loader: 'json'
@@ -61,13 +75,11 @@ module.exports = {
       }
     ]
   },
-  sassLoader: {
+  /*sassLoader: {
     includePaths: [CLIENT, ROOT + '/node_modules']
-  },
+  },*/
   plugins: [
-    new ExtractTextPlugin('style.css', {
-      allChunks: true
-    }),
+
     new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery',
@@ -79,7 +91,8 @@ module.exports = {
     })
   ],
   node: {
-    fs: 'empty'
+    fs: 'empty',
+    __dirname: true
   },
   resolve: {
     alias: {

client/config/production/entry.js

@@ -0,0 +1,5 @@
+import { createHistory, useQueries } from 'history';
+
+import app from 'client/app';
+
+app(useQueries(createHistory));

client/config/production/style.js

@@ -0,0 +1,13 @@
+/*global require __dirname*/
+
+// Vendor Stylesheets
+require('bootstrap/dist/css/bootstrap.min.css');
+require('font-awesome/css/font-awesome.min.css');
+
+// other css assets.
+let cssContext = require.context(__dirname + '/../../../server/assets/css', true);
+cssContext.keys().forEach(cssContext);
+
+// component context
+let componentContext = require.context(__dirname + '/../../../shared/components', true, /\.s?css$/);
+componentContext.keys().forEach(componentContext);

client/config/production/webpack.config.client.js

@@ -0,0 +1,5 @@
+import { client_configuration } from 'universal-webpack'
+import settings from '../../../universal-webpack-settings.production'
+import configuration from './webpack.js'
+
+export default client_configuration(configuration, settings)

client/config/production/webpack.js

@@ -2,20 +2,22 @@
 
 import webpack from 'webpack';
 import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import path from 'path';
 
 const CLIENT = __dirname + '/../..';
 const ROOT = CLIENT + '/..';
 
 // Identical to development webpack config, except minified.
 module.exports = {
+  context: __dirname + '/../../../',
   entry: {
-    app: __dirname + '/../development/entry',
-    style: __dirname + '/../development/style'
+    app: __dirname + '/entry',
+    style: __dirname + '/style'
   },
   devtool: 'source-map',
   output: {
     filename: '[name].js',
-    path: __dirname + '/../../../build/development'
+    path: __dirname + '/../../../build/production'
   },
   module: {
     loaders: [
@@ -24,10 +26,22 @@ module.exports = {
         loader: 'babel'
       }, {
         test: /\.scss$/,
-        loader: ExtractTextPlugin.extract('style', 'css!sass?sourceMap=true')
+        loaders: //ExtractTextPlugin.extract({fallbackLoader:'style', loader:'css!sass?sourceMap=true'})
+        [
+          'style-loader',
+          'css-loader?importLoaders=2&sourceMap',
+          'postcss-loader',
+          'sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true'
+        ]
       }, {
         test: /\.css$/,
-        loader: ExtractTextPlugin.extract('style', 'css?sourceMap=true')
+        loaders: //ExtractTextPlugin.extract('style', 'css?sourceMap=true')
+       [
+          'style-loader',
+          'css-loader?importLoaders=2&sourceMap',
+          'postcss-loader',
+          'sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true'
+        ]
       }, {
         test: /\.json$/,
         loader: 'json'
@@ -61,13 +75,11 @@ module.exports = {
       }
     ]
   },
-  sassLoader: {
+  /*sassLoader: {
     includePaths: [CLIENT, ROOT + '/node_modules']
-  },
+  },*/
   plugins: [
-    new ExtractTextPlugin('style.css', {
-      allChunks: true
-    }),
+
     new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery',
@@ -79,14 +91,17 @@ module.exports = {
     })
   ],
   node: {
-    fs: 'empty'
+    fs: 'empty',
+    __dirname: true
   },
   resolve: {
     alias: {
       api: __dirname + `/../../api/fixture`,
       assets: __dirname + '/../../../server/assets',
       client: __dirname + '/../..',
-      shared: __dirname + '/../../../shared'
+      shared: __dirname + '/../../../shared',
+      server: __dirname + '/../../../server'
+
     }
   }
 }

client/config/webpack.config.client.js

@@ -0,0 +1,5 @@
+import { client_configuration } from 'universal-webpack'
+import settings from './universal-webpack-settings'
+import configuration from './webpack.config'
+
+export default client_configuration(configuration, settings)

package.json

@@ -3,14 +3,25 @@
   "version": "1.3.0",
   "description": "Basic architecture and dependencies for creating a React app alongside a server api.",
   "scripts": {
+    "delay": "node ./sleep 500",
     "test": "npm run test_client && npm run test_server && npm run lint",
     "test_client": "BABEL_DISABLE_CACHE=1 karma start --single-run",
     "test_server": "BABEL_DISABLE_CACHE=1 babel-node test.server.js",
     "lint": "eslint --fix .",
     "build_design": "gulp build --env design",
     "start": "babel-node run.js",
-    "develop": "BABEL_DISABLE_CACHE=1 NODE_ENV=development babel-node run.js",
-    "production": "BABEL_DISABLE_CACHE=1 NODE_ENV=production babel-node run.js",
+    "develop": "npm-run-all development-prepare-server-build development",
+    "development-prepare-server-build": "universal-webpack --settings ./universal-webpack-settings.js prepare",
+    "development": "npm-run-all --parallel development-build-client development-build-server development-server-delayed",
+    "development-build-client": "BABEL_DISABLE_CACHE=1 NODE_ENV=development babel-node ./webpack-devserver.js",
+    "development-build-server": "webpack --config webpack.server.config.entry.js --watch --colors --display-error-details",
+    "development-server": "BABEL_DISABLE_CACHE=1 NODE_ENV=development nodemon --exec babel-node ./start-server.js --watch ./build/development/server",
+    "development-server-delayed": "npm-run-all delay development-server",
+    "production": "npm-run-all production-build-client production-build-server production-server",
+    "production-build-client": "webpack --colors --display-error-details --config webpack.client.config.entry.production.js",
+    "production-build-server": "webpack --colors --display-error-details --config webpack.server.config.entry.production.js",
+    "production-server": "BABEL_DISABLE_CACHE=1 NODE_ENV=production nodemon --exec babel-node ./start-server.production.js --watch ./build/production/server",
+    "production-local": "npm-run-all production-build-server production-server",
     "design": "NODE_ENV=design npm start",
     "generate": "gulp generate"
   },
@@ -61,7 +72,7 @@
     "style-loader": "^0.12.3",
     "supertest": "1.2.0",
     "url-loader": "0.5.x",
-    "webpack": "1.12.9",
+    "webpack": "^2.1.0-beta.25",
     "webpack-dev-server": "1.14.0"
   },
   "dependencies": {
@@ -77,35 +88,43 @@
     "babel-preset-es2015": "6.3.13",
     "babel-preset-react": "6.3.13",
     "babel-preset-stage-0": "6.3.13",
+    "babel-register": "^6.16.0",
     "body-parser": "1.12.x",
     "bootstrap": "3.3.6",
     "cookie-parser": "1.4.x",
     "debug": "~2.1.1",
     "ejs": "~2.4.1",
     "express": "4.13.3",
     "extend": "3.0.x",
+    "extract-text-webpack-plugin": "^v2.0.0-beta.4",
     "font-awesome": "4.6.x",
     "history": "^2.0.0",
     "i18next": "^2.5.1",
     "i18next-node-fs-backend": "0.1.x",
     "i18next-xhr-backend": "^0.5.3",
     "immutable": "3.8.x",
     "jquery": "2.2.x",
-    "morgan": "~1.5.1",
     "moment": "2.13.x",
+    "morgan": "~1.5.1",
+    "postcss-loader": "^0.13.0",
     "query-string": "^3.0.0",
     "react": "0.14.7",
     "react-addons-test-utils": "0.14.7",
     "react-bootstrap": "0.29.x",
     "react-dom": "0.14.7",
+    "react-isomorphic-render": "^5.0.2",
     "react-redux": "4.4.x",
+    "react-router": "^2.8.1",
     "react-templates": "0.4.x",
     "react-templates-loader": "0.4.x",
     "redux": "3.5.x",
     "redux-act": "0.5.x",
+    "redux-devtools": "^3.3.1",
     "redux-loop": "2.1.x",
+    "sass-loader": "^3.1.2",
     "serve-favicon": "2.2.x",
     "underscore.string": "^3.3.4",
+    "universal-webpack": "^0.1.40",
     "yargs": "3.32.0"
   },
   "author": "Eric Hulburd <eric@analyticsfire.com> (http://afdc.co/)",

readme.md

@@ -27,6 +27,7 @@ Project supports Node 5.10+, so using [nvm](https://github.com/creationix/nvm):
 ```sh
 nvm install 5.10
 nvm use 5.10
+npm install -g npm-run-all
 npm install
 ```
 
@@ -40,7 +41,7 @@ A Spike application is separated into 3 main directories:
   - Browser specific tests.
 - server
   - Express server for serving Webpack development server in development.
-  - Configuration for pre-rendering application server side.
+  - Configuration for isomorphic pre-rendering application server side.
   - Supporting assets such as stylesheets, fonts, vendor libraries.
   - Models, repositories, and api classes for accessing data from server.
   - Server specific tests.
@@ -104,7 +105,7 @@ Can run scripts in four modes:
 
 ### Local Production
 
-`npm run production_build`
+`npm run production-local`
 
 - Server side rendering.
 - Babel compiles & caches templates on server.

run-dev.js

@@ -0,0 +1,7 @@
+import Server from "./server/config/development/page.server";
+
+export default function(parameters)
+{
+	var server = new Server();
+	server.run();
+}

run-pro.js

@@ -0,0 +1,7 @@
+import Server from "./server/config/production/server";
+
+export default function(parameters)
+{
+	var server = new Server();
+	server.run();
+}

server/config/development/page.server.js

@@ -0,0 +1,43 @@
+/*global console*/
+import express from 'express';
+import os from 'os'
+import webpack from 'webpack'; 
+
+import ServerBase from '../server.base';
+import serverRenderable from '../../lib/mixins/server_renderable';
+import config from '../../../server/config/development/webpack';
+
+import cookieParser from 'cookie-parser';
+import path from 'path';
+import favicon from 'serve-favicon';
+import logger from 'morgan';
+import Backend from 'i18next-node-fs-backend';
+
+const APP_PORT = 3000;
+
+class Server extends serverRenderable(ServerBase) {
+
+  constructor(){
+    super();
+    var server = this;
+    server.app = express();
+  }
+
+  run(){
+    var server = this;
+
+    webpack(config, function(err, stats) {
+      server.config();
+      server.app.set('views', path.resolve(__dirname, '../../server/', 'views'));
+      server.app.use('/assets', express.static(path.resolve(__dirname, '../../assets')));
+
+      server.app.listen(APP_PORT, () => {
+        console.info(`App is now running on ${os.hostname()}:${APP_PORT}`);
+      });
+   });
+  }
+
+}
+
+
+export default Server;

server/config/development/server.js

@@ -7,7 +7,7 @@ import ServerBase from '../server.base';
 import serverRenderable from 'server/lib/mixins/server_renderable';
 import config from 'client/config/development/webpack';
 
-const APP_PORT = 3000;
+const APP_PORT = 8000;
 
 class Server extends serverRenderable(ServerBase) {
 
@@ -28,7 +28,7 @@ class Server extends serverRenderable(ServerBase) {
     server.config();
 
     server.dev_server.listen(APP_PORT, () => {
-      console.info(`App is now running on http://localhost:${APP_PORT}`);
+      console.info(`WebpackDevServer is now running on http://localhost:${APP_PORT}`);
     });
   }