Skip to content

Commit

Permalink
Update server-side rendering logic and other misc stuff
Browse files Browse the repository at this point in the history 
 - 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 #57, #55, #53,  #4
  • Loading branch information
@koistya
koistya committed Feb 8, 2015
1 parent 10a0e82 commit 9f49066
Show file tree
Hide file tree
Showing 16 changed files with 177 additions and 187 deletions.
194 changes: 110 additions & 84 deletions config/webpack.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
28 changes: 9 additions & 19 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}';
Expand All @@ -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) {
Expand All @@ -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
Expand All @@ -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));
Expand All @@ -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));
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/actions/AppActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down

0 comments on commit 9f49066

Please sign in to comment.