React-SSR (Frontend)

A webpack compiler and provider for render and serving server-side react. Expected to be used in combination with React-SSR (Backend)

Installation

yarn add @alexseitsinger/react-ssr

Modules

browserBundle

The entry point for the client-side bundle.

import { browserBundle } from "@alexseitsinger/react-ssr"

export const store = browserBundle({
  App,
  createStore,
  render: (PreparedApp, { store, browserHistory }) => {
    hydrate(<PreparedApp />, document.getElementById("app"))
  }),
})

serverBundle

The entry point for a server-side bundle.

import { serverBundle } from "@alexseitsinger/react-ssr"

export default serverBundle({
  App,
  createStore,
  render: (PreparedApp, { store, serverHistory, url }) => {
    const html = renderToString(<PreparedApp />)
    const state = store.getState()
    return {
      html,
      state,
    }
  },
})

Scripts

The script to start the compilation (development only) and provider servers.

yarn react-server [--address <value> ...]

Options

Name | Description | Default | Required --- | --- | --- | --- address | The address the servers should listen on. | 0.0.0.0 | yes compilerPort | The port the compiler server should use. | 8081 | no providerPort | The port the provider server should ue. | 8082 | no browserConfig | The path to the browser-side webpack config. | undefined | yes serverConfig | The path to the server-side webpack config | undefined | yes renderURL | The endpoint that provides server-side renders. | /render | no reducerDirs | Extra paths to reducer directories within the app. | undefined | no appPath | The base path to use when finding default state files. | undefined | yes defaultStateURL | The url to use for retrieving default state. | /defaultState | no defaultStateFileName | The file name to look for which contains the default state. | defaultState.json | no browserStatsURL | The url to use for retrieving the current browser bundle's webpack stats. | /browserStats | no browserStatsPath | The path to prepend to the browser stats file. | undefined | yes browserStatsFileName | The name of the browser stats file. | stats.json | no secretKeyValue | The secret key value to match against when receiving requests. | undefined | no secretKeyHeaderName | The name of the header that will contain the secret key. | secret-key | no serverBundlePath | The path to find the server bundle. | undefined | yes serverBundleName | The name of the server bundle. | server.js | no allowedFiles | Names of files that are allowed to be read. | webpack.json | no ignoredFiles | Names of files that are never allowed to be read. | undefined | no