https://github.com/alexseitsinger/react-ssr-frontend
A webpack compiler and provider for rendering and serving server-side react.
https://github.com/alexseitsinger/react-ssr-frontend
react server-side-rendering
Last synced: about 1 month ago
JSON representation
A webpack compiler and provider for rendering and serving server-side react.
- Host: GitHub
- URL: https://github.com/alexseitsinger/react-ssr-frontend
- Owner: alexseitsinger
- License: bsd-2-clause
- Created: 2018-11-24T12:47:14.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:02:18.000Z (over 2 years ago)
- Last Synced: 2025-04-07T18:02:32.396Z (about 1 month ago)
- Topics: react, server-side-rendering
- Language: JavaScript
- Homepage:
- Size: 3.42 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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)](https://github.com/alexseitsinger/react-ssr-backend)
## Installation
```
yarn add @alexseitsinger/react-ssr
```
## Modules
#### browserBundle
The entry point for the client-side bundle.
```javascript
import { browserBundle } from "@alexseitsinger/react-ssr"
export const store = browserBundle({
App,
createStore,
render: (PreparedApp, { store, browserHistory }) => {
hydrate(, document.getElementById("app"))
}),
})
```
#### serverBundle
The entry point for a server-side bundle.
```javascript
import { serverBundle } from "@alexseitsinger/react-ssr"
export default serverBundle({
App,
createStore,
render: (PreparedApp, { store, serverHistory, url }) => {
const html = renderToString()
const state = store.getState()
return {
html,
state,
}
},
})
```
## Scripts
The script to start the compilation (development only) and provider servers.
```bash
yarn react-server [--address ...]
```
#### 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