https://github.com/jameslnewell/static-react-render-webpack-plugin
Render static sites with React and Webpack.
https://github.com/jameslnewell/static-react-render-webpack-plugin
plugin react render webpack
Last synced: 2 months ago
JSON representation
Render static sites with React and Webpack.
- Host: GitHub
- URL: https://github.com/jameslnewell/static-react-render-webpack-plugin
- Owner: jameslnewell
- Created: 2016-10-29T12:53:19.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-15T13:16:58.000Z (about 9 years ago)
- Last Synced: 2025-02-01T20:48:30.767Z (over 1 year ago)
- Topics: plugin, react, render, webpack
- Language: JavaScript
- Homepage:
- Size: 19.5 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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 `