matthewoden/Fullpage.js

## Fullpage.js
/*
 So the above file here is my Full page react file. I do a couple things here:
  - In the head, I inject my important CSS inline.
  - In the body, I link to my commons chunk (with react, react-router, and anything that's going to be on every single page).
  - Beneath that is the app entry file.
  - Beneath that is a dynamically generated chunkfile, based on the current route.

 Each of these are cachebusted with a hash, pulled from the webpack stats file.
 */

class FullPage extends React.Component {
  render() {
    return (
      <html>
        <head>
          <meta charSet="utf-8"/>
          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
          <title>{this.props.title}</title>
          <meta name="description" content=""/>
          <meta name="viewport" content="width=device-width"/>
          <style dangerouslySetInnerHTML={{__html: this.props.css}}/>
        </head>
        <body>
          <div id="app" dangerouslySetInnerHTML={{__html: this.props.markup}}/>
          <script src={"/assets/"+this.props.hash+".common.js"}></script>
          <script src={"/assets/"+this.props.hash+".app.js"}></script>
          <script src={"/assets/"+this.props.hash+"."+this.props.chunk+".js"}></script>
        </body>
      </html>
    );
  }
}

## routes.js
/*
  This is my route file.
  You can see here that I've put a proxy loader on the top level routes,
  and set the chunk name to match the path
*/

'use strict';
import React from 'react';
import { Route, DefaultRoute, NotFoundRoute } from 'react-router';

//Components
var App = require('./components/app/');
var Home = require('react-proxy-loader?name=home!./components/home/');
var PageOne =  require('react-proxy-loader?name=pageone!./components/pageOne/');
var PageTwo = require('react-proxy-loader?name=pagetwo!./components/pageTwo/');

export default (
      <Route handler={ App } path="/" >
        <DefaultRoute handler={ Home } />
        <Route path="/pageone" handler={ PageOne } />
        <Route path="/pagetwo" handler={ PageTwo } />
        <NotFoundRoute handler={ Home } />
      </Route>
    );

## views.js
/**
 This is my server side router. A little messy, but as far as I can tell, a fairly typical setup:
 - grab fullpage component
 - grab the handler component from react-router
 - render to string, static markup. Pass the props in.

 The chunk prop, in order to be dynamic, just passes in a formatted string based on the route.
**/

'use strict';
//React
import fs from 'fs';
import React from 'react';
import Router from 'react-router';
import DocumentTitle from 'react-document-title';

import Routes from '../assets/prerender/app';
import Html from '../client/components/fullPage/';
import Stats  from '../client/stats.json';
// TODO Add in configurable for page types, pass that into html.
// Like app.use, but switching based on route param.

let css;
if(!css){
  fs.readFile('./assets/public/' + Stats.hash + '.common.css', 'utf8', function (err,data) {
    if (err) {
      return console.log(err);
    }
    css = data;
  });
}


module.exports = function(req, res, next) {
  Router.run(Routes, req.url, function (Handler, state) {
    var chunk = req.url.replace('/','');
    var title  = DocumentTitle.rewind();
    var markup = React.renderToString(<Handler />);
    var html   = React.renderToStaticMarkup(<Html
                                            title={title}
                                            hash={Stats.hash}
                                            css={css}
                                            chunk={chunk}
                                            markup={markup} />);
    res.send('<!DOCTYPE html>' + html);
  });
};

## webpack.output.js
/*
  This is my webpack output configuration. I keep each webpack property separated out into separate modules.
  Webpack configs can get kind of hairy, so I keep them all separate.
*/

'use strict';
var path = require('path');

module.exports = {
  client:{
    path: path.resolve(__dirname, '../assets/public'),
    publicPath:'/assets/',
    filename: '[hash].[name].js',
    chunkFilename:'[hash].[name].js'
  },

  server:{
    path: path.resolve(__dirname, '../assets/prerender'),
    publicPath:'/assets/',
    filename: '[name].js',
    libraryTarget: 'commonjs2'
   },
};
	/*
	So the above file here is my Full page react file. I do a couple things here:
	- In the head, I inject my important CSS inline.
	- In the body, I link to my commons chunk (with react, react-router, and anything that's going to be on every single page).
	- Beneath that is the app entry file.
	- Beneath that is a dynamically generated chunkfile, based on the current route.

	Each of these are cachebusted with a hash, pulled from the webpack stats file.
	*/

	class FullPage extends React.Component {
	render() {
	return (
	<html>
	<head>
	<meta charSet="utf-8"/>
	<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
	<title>{this.props.title}</title>
	<meta name="description" content=""/>
	<meta name="viewport" content="width=device-width"/>
	<style dangerouslySetInnerHTML={{__html: this.props.css}}/>
	</head>
	<body>
	<div id="app" dangerouslySetInnerHTML={{__html: this.props.markup}}/>
	<script src={"/assets/"+this.props.hash+".common.js"}></script>
	<script src={"/assets/"+this.props.hash+".app.js"}></script>
	<script src={"/assets/"+this.props.hash+"."+this.props.chunk+".js"}></script>
	</body>
	</html>
	);
	}
	}
	/*
	This is my route file.
	You can see here that I've put a proxy loader on the top level routes,
	and set the chunk name to match the path
	*/

	'use strict';
	import React from 'react';
	import { Route, DefaultRoute, NotFoundRoute } from 'react-router';

	//Components
	var App = require('./components/app/');
	var Home = require('react-proxy-loader?name=home!./components/home/');
	var PageOne = require('react-proxy-loader?name=pageone!./components/pageOne/');
	var PageTwo = require('react-proxy-loader?name=pagetwo!./components/pageTwo/');

	export default (
	<Route handler={ App } path="/" >
	<DefaultRoute handler={ Home } />
	<Route path="/pageone" handler={ PageOne } />
	<Route path="/pagetwo" handler={ PageTwo } />
	<NotFoundRoute handler={ Home } />
	</Route>
	);
	/**
	This is my server side router. A little messy, but as far as I can tell, a fairly typical setup:
	- grab fullpage component
	- grab the handler component from react-router
	- render to string, static markup. Pass the props in.

	The chunk prop, in order to be dynamic, just passes in a formatted string based on the route.
	**/

	'use strict';
	//React
	import fs from 'fs';
	import React from 'react';
	import Router from 'react-router';
	import DocumentTitle from 'react-document-title';

	import Routes from '../assets/prerender/app';
	import Html from '../client/components/fullPage/';
	import Stats from '../client/stats.json';
	// TODO Add in configurable for page types, pass that into html.
	// Like app.use, but switching based on route param.

	let css;
	if(!css){
	fs.readFile('./assets/public/' + Stats.hash + '.common.css', 'utf8', function (err,data) {
	if (err) {
	return console.log(err);
	}
	css = data;
	});
	}


	module.exports = function(req, res, next) {
	Router.run(Routes, req.url, function (Handler, state) {
	var chunk = req.url.replace('/','');
	var title = DocumentTitle.rewind();
	var markup = React.renderToString(<Handler />);
	var html = React.renderToStaticMarkup(<Html
	title={title}
	hash={Stats.hash}
	css={css}
	chunk={chunk}
	markup={markup} />);
	res.send('<!DOCTYPE html>' + html);
	});
	};
	/*
	This is my webpack output configuration. I keep each webpack property separated out into separate modules.
	Webpack configs can get kind of hairy, so I keep them all separate.
	*/

	'use strict';
	var path = require('path');

	module.exports = {
	client:{
	path: path.resolve(__dirname, '../assets/public'),
	publicPath:'/assets/',
	filename: '[hash].[name].js',
	chunkFilename:'[hash].[name].js'
	},

	server:{
	path: path.resolve(__dirname, '../assets/prerender'),
	publicPath:'/assets/',
	filename: '[name].js',
	libraryTarget: 'commonjs2'
	},
	};