Update server-side rendering logic and other misc stuff

- Refactor webpack config - Generate source maps in debug mode - Create two bundles during a build - `./build/app.js` (client-side) and `./build/server.js` (server-side) - Replace the original JSX transpiler with 6to5 - Register core-js polyfills - Clean up the top-level React component (App) - Load page content asynchronously - Remove `./src/images` folder and `images` Gulp task in favor of images-per-component Closes kriasoft#57, kriasoft#55, kriasoft#53, kriasoft#4
vishwanatharondekar · Feb 8, 2015 · 541a3cf · 541a3cf
1 parent 1a047dc
commit 541a3cf
Show file tree

Hide file tree

Showing 16 changed files with 177 additions and 187 deletions.
diff --git a/config/webpack.js b/config/webpack.js
@@ -6,96 +6,122 @@
 'use strict';
 
 var webpack = require('webpack');
+var update = require('react/lib/update');
+var argv = require('minimist')(process.argv.slice(2));
 
-/**
- * Get configuration for Webpack
- *
- * @see http://webpack.github.io/docs/configuration
- *      https://github.com/petehunt/webpack-howto
- *
- * @param {boolean} release True if configuration is intended to be used in
- * a release mode, false otherwise
- * @return {object} Webpack configuration
- */
-module.exports = function(release) {
-  return {
-    entry: './src/app.js',
+var DEBUG = !argv.release;
 
-    output: {
-      filename: 'app.js',
-      path: './build/',
-      publicPath: './build/'
-    },
+// Common configuration for both
+// client-side and server-side bundles
+var config = {
+  output: {
+    path: './build/',
+    publicPath: './build/',
+    sourcePrefix: '  '
+  },
 
-    cache: !release,
-    debug: !release,
-    devtool: false,
+  cache: DEBUG,
+  debug: DEBUG,
+  devtool: DEBUG ? '#inline-source-map' : false,
 
-    stats: {
-      colors: true,
-      reasons: !release
-    },
+  stats: {
+    colors: true,
+    reasons: DEBUG
+  },
 
-    plugins: release ? [
-      new webpack.DefinePlugin({
-        'process.env.NODE_ENV': '"production"',
-        '__DEV__': false,
-        '__SERVER__': false
-      }),
-      new webpack.optimize.DedupePlugin(),
-      new webpack.optimize.UglifyJsPlugin(),
-      new webpack.optimize.OccurenceOrderPlugin(),
-      new webpack.optimize.AggressiveMergingPlugin()
-    ] : [
-      new webpack.DefinePlugin({
-        '__DEV__': true,
-        '__SERVER__': false
-      })
-    ],
+  plugins: DEBUG ? [
+    new webpack.DefinePlugin({
+      '__DEV__': true,
+      '__SERVER__': false
+    })
+  ] : [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': '"production"',
+      '__DEV__': false,
+      '__SERVER__': false
+    }),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin(),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.optimize.AggressiveMergingPlugin()
+  ],
 
-    resolve: {
-      extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
-    },
+  resolve: {
+    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
+  },
 
-    module: {
-      preLoaders: [
-        {
-          test: /\.js$/,
-          exclude: /node_modules/,
-          loader: 'jshint'
-        }
-      ],
+  module: {
+    preLoaders: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'jshint'
+      }
+    ],
 
-      loaders: [
-        {
-          test: /\.css$/,
-          loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:[' +
-          '"Android 2.3", "Android >= 4", "Chrome >= 20", "Firefox >= 24", ' +
-          '"Explorer >= 8", "iOS >= 6", "Opera >= 12", "Safari >= 6"]}'
-        },
-        {
-          test: /\.less$/,
-          loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:[' +
-          '"Android 2.3", "Android >= 4", "Chrome >= 20", "Firefox >= 24", ' +
-          '"Explorer >= 8", "iOS >= 6", "Opera >= 12", "Safari >= 6"]}!less-loader'
-        },
-        {
-          test: /\.gif/,
-          loader: 'url-loader?limit=10000&mimetype=image/gif'
-        },
-        {
-          test: /\.jpg/,
-          loader: 'url-loader?limit=10000&mimetype=image/jpg'
-        },
-        {
-          test: /\.png/,
-          loader: 'url-loader?limit=10000&mimetype=image/png'
-        },
-        {
-          test: /\.jsx?$/,
-          loader: 'jsx-loader?harmony&stripTypes'
-        }
-      ]
-    }
-  };
+    loaders: [
+      {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:[' +
+        '"Android 2.3", "Android >= 4", "Chrome >= 20", "Firefox >= 24", ' +
+        '"Explorer >= 8", "iOS >= 6", "Opera >= 12", "Safari >= 6"]}'
+      },
+      {
+        test: /\.less$/,
+        loader: 'style-loader!css-loader!autoprefixer-loader?{browsers:[' +
+        '"Android 2.3", "Android >= 4", "Chrome >= 20", "Firefox >= 24", ' +
+        '"Explorer >= 8", "iOS >= 6", "Opera >= 12", "Safari >= 6"]}!less-loader'
+      },
+      {
+        test: /\.gif/,
+        loader: 'url-loader?limit=10000&mimetype=image/gif'
+      },
+      {
+        test: /\.jpg/,
+        loader: 'url-loader?limit=10000&mimetype=image/jpg'
+      },
+      {
+        test: /\.png/,
+        loader: 'url-loader?limit=10000&mimetype=image/png'
+      },
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: '6to5-loader'
+      }
+    ]
+  }
 };
+
+// Configuration for the client-side bundle
+var appConfig = update(config, {
+  entry: {$set: './src/app.js'},
+  output: {filename: {$set: 'app.js'}}
+});
+
+// Configuration for the server-side bundle
+var serverConfig = update(config, {
+  entry: {$set: './src/server.js'},
+  output: {
+    filename: {$set: 'server.js'},
+    libraryTarget: {$set: 'commonjs2'}
+  },
+  target: {$set: 'node'},
+  externals: {$set: /^[a-z\-0-9]+$/},
+  node: {$set: {
+    console: true,
+    global: false,
+    process: false,
+    Buffer: false,
+    __filename: false,
+    __dirname: false
+  }},
+  module: {loaders: {$apply: function(loaders) {
+    loaders.forEach(function(loader) {
+      loader.loader = loader.loader.replace('style-loader!', '');
+    });
+    return loaders;
+  }}}
+});
+
+module.exports = [appConfig, serverConfig];
diff --git a/gulpfile.js b/gulpfile.js
@@ -52,26 +52,17 @@ gulp.task('vendor', function() {
 
 // Static files
 gulp.task('assets', function() {
-  src.assets = 'src/assets/**';
+  src.assets = [
+    'src/assets/**',
+    'src/content*/**/*.*',
+    'src/templates*/**/*.*'
+  ];
   return gulp.src(src.assets)
     .pipe($.changed(DEST))
     .pipe(gulp.dest(DEST))
     .pipe($.size({title: 'assets'}));
 });
 
-// Images
-gulp.task('images', function() {
-  src.images = 'src/images/**';
-  return gulp.src(src.images)
-    .pipe($.changed(DEST + '/images'))
-    .pipe($.imagemin({
-      progressive: true,
-      interlaced: true
-    }))
-    .pipe(gulp.dest(DEST + '/images'))
-    .pipe($.size({title: 'images'}));
-});
-
 // CSS style sheets
 gulp.task('styles', function() {
   src.styles = 'src/styles/**/*.{css,less}';
@@ -92,7 +83,7 @@ gulp.task('styles', function() {
 // Bundle
 gulp.task('bundle', function(cb) {
   var started = false;
-  var config = require('./config/webpack.js')(RELEASE);
+  var config = require('./config/webpack.js');
   var bundler = webpack(config);
 
   function bundle(err, stats) {
@@ -119,7 +110,7 @@ gulp.task('bundle', function(cb) {
 
 // Build the app from source code
 gulp.task('build', ['clean'], function(cb) {
-  runSequence(['vendor', 'assets', 'images', 'styles', 'bundle'], cb);
+  runSequence(['vendor', 'assets', 'styles', 'bundle'], cb);
 });
 
 // Launch a lightweight HTTP Server
@@ -133,8 +124,8 @@ gulp.task('serve', function(cb) {
   runSequence('build', function() {
 
     var server = require('nodemon')({
-      script: 'src/server.js',
-      watch: [path.join(__dirname, 'src/**/*.js')],
+      script: 'build/server.js',
+      watch: [path.join(__dirname, 'build/server.js')],
       env: {NODE_ENV: 'development'}
     }).on('log', function(log) {
       $.util.log('nodemon', $.util.colors.green(log.message));
@@ -160,7 +151,6 @@ gulp.task('serve', function(cb) {
       });
 
       gulp.watch(src.assets, ['assets']);
-      gulp.watch(src.images, ['images']);
       gulp.watch(src.styles, ['styles']);
       gulp.watch(DEST + '/**/*.*', function (file) {
         browserSync.reload(path.relative(__dirname, file.path));

diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "repository": "https://github.com/kriasoft/react-starter-kit",
   "license": "MIT",
   "dependencies": {
+    "6to5": "3.5.3",
     "bootstrap": "3.3.1",
     "director": "1.2.7",
     "eventemitter3": "0.1.6",
@@ -18,6 +19,8 @@
     "superagent": "0.21.0"
   },
   "devDependencies": {
+    "6to5-core": "^3.5.3",
+    "6to5-loader": "^3.0.0",
     "autoprefixer-loader": "^1.1.0",
     "browser-sync": "^1.9.0",
     "css-loader": "^0.9.1",
@@ -47,7 +50,6 @@
     "jshint": "^2.5.11",
     "jshint-loader": "^0.8.0",
     "jshint-stylish": "^1.0.0",
-    "jsx-loader": "^0.12.2",
     "less": "^2.2.0",
     "less-loader": "^2.0.0",
     "minimist": "^1.1.0",

diff --git a/src/actions/AppActions.js b/src/actions/AppActions.js
@@ -34,7 +34,7 @@ module.exports = {
       .accept('application/json')
       .end((err, res) => {
         Dispatcher.handleServerAction({
-          actionType: ActionTypes.LOAD_PAGE, path: path, err: err, page: res
+          actionType: ActionTypes.LOAD_PAGE, path: path, err: err, page: res.body
         });
         if (cb) {
           cb();