Simple React Prerenderer

The Simple React Prerenderer is designed to simply prerender existing react apps, without having to configure much.

Quick Start

Install the package

yarn:

yarn add simple-react-prerender --dev

npm:

npm install simple-react-prerender --save-dev

then use it in a self written script:

constprerenderer=require('simple-react-prerender')constMyAppToPrerender=require('./src/myAppToPrerender')constjsDomConfig={url: 'https://example.org/',referrer: 'https://example.org/',contentType: 'text/html',}// use prerenderer.mockBrowser, if you are NOT providing the app via a file path.prerenderer.mockBrowser(jsDomConfig)prerenderer({// optional: the path to the file where the app shall be prerendered// if provided, simple-react-prerender will write the prerendered app there// if not provided, simple-react-prerender will return the prerendered stringhtml: '/path/to/index.html',// mandatory: the app to prerender. This can be either a file path, or the required app itselfapp: '/path/to/App/index.js',// app: MyAppToPrerender,// optional: the props for the appprops: {}// optional: the config of jsdom - useful if you are using ReactRouter// if using ReactRouter, check https://reacttraining.com/react-router/web/guides/server-renderingjsDom: jsDomConfig,// optional: the babel config - will be used with babel-register// can be a JSON string or an objectbabel: undefined,// optional: dry run - no file will be changeddry: false,// optional: silent mode - don't print anything on the consolesilent: false,})

Usage with Redux

You should also read this: http://redux.js.org/docs/recipes/ServerRendering.html

Provide a component, which wraps the react-reduxProvider component. This file will be used by simple-react-prerender, to prerender your app:

importReactfrom'react'import{Provider}from'react-redux'importAppRouterfrom'./components/appRouter'constProviderApp=({store})=><Providerstore={store}><AppRouter/></Provider>exportdefaultProviderApp

Furthermore, you will need a prerender script:

constprerenderer=require('simple-react-prerender')// if your store initializer needs babelrequire('babel-register')({plugins: ['transform-es2015-modules-commonjs','syntax-object-rest-spread','transform-object-rest-spread',],})// provide simple window mock if you use the redux dev-toolswindow={}// create the storeconst{initStore}=require('../src/redux/init')conststore=initStore()prerenderer({html: '/path/to/index.html',app: '/path/to/ProviderApp.js',// pass the store to the provider appprops: {store},})

finally, run the prerender script:

node scripts/prerender.js