Generating Layout Markup

In notebook:
Building Modern Web Apps
Created at:
2016-02-02
Updated:
2016-02-02
Tags:
libraries JavaScript React Webpack
Take this further: render the layout for everything else

So any other page would at least have the layout markup (not empty page)
  // ****     webpack.config.js       ****
require('babel/register')

var getConfig = require('hjs-webpack')
var React = require('react')
var PublicPage = require('./src/pages/public') 
// ++++ 2. require the layout 
var Layout = require('./src/layout') 

module.exports = getConfig({
    in: 'src/app/js',
    out: 'public'.
    clearBeforBuild: true,
    html: function (context) {
        const publicPage = React.renderToString(React.createElement(PublicPage))
        // ++++ 1. prerender layouts
        const layoutPage = React.renderToString(React.createElement(Layout, {me:{}}))
        return {
            'index.html': context.defaultTemplate({html: publicPage}),
            // ++++ 3. pass the rendered layout
            '200.html': context.defaultTemplate({html: Layout})
        }
    }
})
Note about the ​context​ object: it includes all references to asset files (js, css, img). Is the html file will import all css, js, whatever files and just puts the rendered html in the ​body​. 

We might need some data at ++++ 1. point (even an empty object ) like ​{me:{}}​ 
Good solution for the "white page of death". 

You can even add a ​db.query(...)​ and pre-generate the whole site. 

You can even pre-generate the JSON.

Talks about the google developers who are very performance focused: the barrier can be too high for new developers. 
Another point:
The javascript is cached while they're on a static page e.g. the about page