# static-react-render-webpack-plugin
> Render static sites with `React` and `Webpack`.
Latest version **0.6.1** (published 2017-05-15) · MIT license · 0 weekly downloads
## Install
```sh
npm install static-react-render-webpack-plugin
pnpm add static-react-render-webpack-plugin
yarn add static-react-render-webpack-plugin
bun add static-react-render-webpack-plugin
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.6.1 |
| Published | 2017-05-15 |
| First published | 2016-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | jameslnewell |
## Links
- npm: https://www.npmjs.com/package/static-react-render-webpack-plugin
- Repository: https://github.com/jameslnewell/static-react-render-webpack-plugin
- Homepage: https://github.com/jameslnewell/static-react-render-webpack-plugin#readme
- Issues: https://github.com/jameslnewell/static-react-render-webpack-plugin/issues
- npm.io page: https://npm.io/package/static-react-render-webpack-plugin
## Dependencies (1)
- [eval](https://npm.io/package/eval.md) ^0.1.1
## Recent versions
- 0.6.1 (latest) — 2017-05-15
- 0.6.0 — 2017-03-27
- 0.5.0 — 2017-01-24
- 0.4.0 — 2017-01-18
- 0.3.3 — 2016-12-30
- 0.3.2 — 2016-12-20
- 0.3.1 — 2016-12-20
- 0.3.0 — 2016-12-19
- 0.2.2 — 2016-10-31
- 0.2.1 — 2016-10-31
- 0.2.0 — 2016-10-31
- 0.1.0 — 2016-10-31
- 0.0.1 — 2016-10-29
## README
# static-react-render-webpack-plugin
Render static sites with `React` and `Webpack`.
## Installation
npm install --save-dev static-react-render-webpack-plugin
## Usage
`webpack.config.js`
```js
const path = require('path');
const StaticReactRenderWebpackPlugin = require('static-react-render-webpack-plugin');
module.exports = {
context: path.join(__dirname, 'src'),
entry: {
layout: './src/layout/index.jsx',
productList: './src/pages/product-list/index.jsx',
productPage: './src/pages/product-page/index.jsx'
},
output: {
path: path.join(__dirname, 'dest'),
publicPath: '/',
libraryTarget: 'commonjs' /* required so the plugin can evaluate your components */
},
target: 'node', /* required so the plugin can evaluate your components on node */
/* ...configure loaders, resolvers, etc... */
plugins: [
new StaticReactRenderWebpackPlugin({
layout: 'layout',
pages: [
'productList',
'productPage'
]
})
]
};
```
`./src/fetchProducts.js`
```js
import fetch from 'node-fetch';
export default () => fetch('http://example.com/products.json')
.then(response => response.json())
;
```
`./src/layout/index.jsx` - wraps pages with a common header and footer
```js
export default ({children}) => (
{children}
);
```
`./src/pages/product-list/index.jsx` - creates a single HTML file listing all products
```js
import fetchProducts from '../../fetchProducts';
export default class ProductList extends React.Component {
static getPath = ({product}) => `products/${product.slug}/index.html`;
static getProps = () => fetchProducts()
.then(products => ({products}))
;
render() {
const {products} = this.props;
return (
);
}
}
```
`./src/pages/product-page/index.jsx` - creates multiple HTML files describing each individual product
```js
import fetchProducts from '../../fetchProducts';
export default class ProductPage extends React.Component {
static getPath = ({product}) => `products/${product.slug}/index.html`;
static getProps = () => fetchProducts()
.then(products => products.map(product => ({product})))
;
render() {
const {product} = this.props;
return (
{product.name}
{product.price}
);
}
}
```
## Options
##### layout
The name of the layout chunk.
> Required. A `string`.
##### pages
The names of the page chunks.
> Required. An `array` of `string`s.
##### getLayoutProps
A function modifying the props passed to the layout component.
> Optional. A `function(props, context) : object` where:
- `props` is an `object`
- `context` is an `object` containing:
- `pageChunk`
- `layoutChunk`
- `compilation`
##### getPageProps
A function modifying the props passed to the page component.
> Optional. A `function(props, context) : object` where:
- `props` is an `object`
- `context` is an `object` containing:
- `pageChunk`
- `layoutChunk`
- `compilation`
# Change log
## 0.6.1
- fix: bug where `modifiedProps` weren't being passed through to an array of pages
## 0.6.0
- add: Support `__dirname` and `__filename`.
## 0.5.0
- add: Passing the page props to the layout component (e.g. so in the layout you can render them as JSON and resume rendering
with them on the client). If you are passing a prop named `props` to the layout you won't be able to access the page props.
## 0.4.0
- add: automatically add the HTML doctype to HTML documents beginning with `