The quickest way to generate the static pages of your awesome react app before deploying its in the cloud.
npm install --save react-static-site-generator
Take care to guard every usage of window/document variables in your code and export renderByServer to be used by node.
import React from 'react'
import ReactDOM from 'react-dom'
import { Router, browserHistory } from 'react-router'
import ReactStaticSiteGenerator from 'react-static-site-generator'
import routes from './routes'
import Template from './components/Template'
// client render
if (typeof document !== "undefined") {
ReactDOM.render(
<Router
history={browserHistory}
routes={routes}
/>,
document.getElementById('root')
)
}
// server render
export const renderByServer = path =>
<ReactStaticSiteGenerator
path={path}
routes={routes}
template={Template}
/>The component print the Helmet variables params.head and the rendered <Router /> component via params.body.
import React from 'react'
const Template = (params) => (
<html>
<head>
{params.head.title.toComponent()}
{params.head.meta.toComponent()}
<meta charSet="utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />
<link rel="stylesheet" href="/assets/css/build.css" media="all" />
</head>
<body>
<div
id="root"
dangerouslySetInnerHTML={{ __html: params.body }}
/>
<script src="/assets/js/build.js" />
</body>
</html>
)
export default TemplateTo make the renderByServer function accessible, you need to configure output.libraryTarget property with umd and add the plugin like below:
{
plugins: [
new ReactStaticSiteGenerator()
]
}