A small and simple package to prerender React Apps
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
.gitmodules
README.md
index.js
package.json
yarn.lock

README.md

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:

const prerenderer = require('simple-react-prerender')
const MyAppToPrerender = require('./src/myAppToPrerender')

const jsDomConfig = {
    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 string
    html: '/path/to/index.html',

    // mandatory: the app to prerender. This can be either a file path, or the required app itself
    app: '/path/to/App/index.js',
    // app: MyAppToPrerender,

    // optional: the props for the app
    props: {}

    // optional: the config of jsdom - useful if you are using ReactRouter
    // if using ReactRouter, check https://reacttraining.com/react-router/web/guides/server-rendering
    jsDom: jsDomConfig,

    // optional: the babel config - will be used with babel-register
    // can be a JSON string or an object
    babel: undefined,

    // optional: dry run - no file will be changed
    dry: false,

    // optional: silent mode - don't print anything on the console
    silent: false,
})

Usage with Redux

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

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

import React from 'react'
import {Provider} from 'react-redux'
import AppRouter from './components/appRouter'

const ProviderApp = ({store}) => <Provider store={store}><AppRouter/></Provider>

export default ProviderApp

Furthermore, you will need a prerender script:

const prerenderer = require('simple-react-prerender')

// if your store initializer needs babel
require('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-tools
window = {}

// create the store
const {initStore} = require('../src/redux/init')
const store = initStore()

prerenderer({
    html: '/path/to/index.html',
    app: '/path/to/ProviderApp.js',
    // pass the store to the provider app
    props: {store},
})

finally, run the prerender script:

node scripts/prerender.js