{"id":16374817,"url":"https://github.com/jameslnewell/static-react-render-webpack-plugin","last_synced_at":"2026-05-04T12:40:35.903Z","repository":{"id":57370118,"uuid":"72284643","full_name":"jameslnewell/static-react-render-webpack-plugin","owner":"jameslnewell","description":"Render static sites with React and Webpack.","archived":false,"fork":false,"pushed_at":"2017-05-15T13:16:58.000Z","size":20,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-01T20:48:30.767Z","etag":null,"topics":["plugin","react","render","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jameslnewell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-29T12:53:19.000Z","updated_at":"2017-03-21T10:59:16.000Z","dependencies_parsed_at":"2022-09-26T16:41:05.405Z","dependency_job_id":null,"html_url":"https://github.com/jameslnewell/static-react-render-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstatic-react-render-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstatic-react-render-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstatic-react-render-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstatic-react-render-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jameslnewell","download_url":"https://codeload.github.com/jameslnewell/static-react-render-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239946871,"owners_count":19723014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["plugin","react","render","webpack"],"created_at":"2024-10-11T03:18:31.449Z","updated_at":"2026-03-26T16:30:15.728Z","avatar_url":"https://github.com/jameslnewell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# static-react-render-webpack-plugin\n\nRender static sites with `React` and `Webpack`.\n\n## Installation\n\n    npm install --save-dev static-react-render-webpack-plugin\n\n## Usage\n\n`webpack.config.js`\n```js\nconst path = require('path');\nconst StaticReactRenderWebpackPlugin = require('static-react-render-webpack-plugin');\n\nmodule.exports = {\n  \n  context: path.join(__dirname, 'src'),\n\n  entry: {\n    layout: './src/layout/index.jsx',\n    productList: './src/pages/product-list/index.jsx',\n    productPage: './src/pages/product-page/index.jsx'\n  },\n  \n  output: {\n    path: path.join(__dirname, 'dest'),\n    publicPath: '/',\n    libraryTarget: 'commonjs' /* required so the plugin can evaluate your components */\n  },\n    \n  target: 'node', /* required so the plugin can evaluate your components on node */\n  \n  /* ...configure loaders, resolvers, etc... */\n  \n  plugins: [\n    new StaticReactRenderWebpackPlugin({\n      layout: 'layout',\n      pages: [\n        'productList',\n        'productPage'\n      ]\n    })\n  ]\n  \n};\n```\n\n`./src/fetchProducts.js`\n```js\nimport fetch from 'node-fetch';\n\nexport default () =\u003e fetch('http://example.com/products.json')\n  .then(response =\u003e response.json())\n;\n\n```\n\n`./src/layout/index.jsx` - wraps pages with a common header and footer\n```js\nexport default ({children}) =\u003e (\n  \u003chtml\u003e\n    \u003chead\u003e\u003c/head\u003e\n    \u003cbody\u003e{children}\u003c/body\u003e\n  \u003c/html\u003e\n);\n```\n\n`./src/pages/product-list/index.jsx` - creates a single HTML file listing all products\n```js\nimport fetchProducts from '../../fetchProducts';\n\nexport default class ProductList extends React.Component {\n  \n  static getPath = ({product}) =\u003e `products/${product.slug}/index.html`;\n  \n  static getProps = () =\u003e fetchProducts()\n    .then(products =\u003e ({products}))\n  ;\n\n  render() {\n    const {products} = this.props;\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eProducts\u003c/h1\u003e\n        \u003cul\u003e\n          {products.map(product =\u003e (\n            \u003cli\u003e\n              \u003ca href={`products/${product.slug}/`}\u003e{product.name}\u003c/a\u003e\n            \u003c/li\u003e\n          ))}\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    );\n  }\n    \n}\n\n```\n`./src/pages/product-page/index.jsx` - creates multiple HTML files describing each individual product\n```js\nimport fetchProducts from '../../fetchProducts';\n\nexport default class ProductPage extends React.Component {\n  \n  static getPath = ({product}) =\u003e `products/${product.slug}/index.html`;\n  \n  static getProps = () =\u003e fetchProducts()\n    .then(products =\u003e products.map(product =\u003e ({product})))\n  ;\n\n  render() {\n    const {product} = this.props;\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003e{product.name}\u003c/h1\u003e\n        \u003ch2\u003e{product.price}\u003c/h2\u003e\n      \u003c/div\u003e  \n    );\n  }\n    \n}\n\n```\n\n## Options\n\n##### layout\n\nThe name of the layout chunk.\n\n\u003e Required. A `string`.\n\n##### pages\n\nThe names of the page chunks.\n\n\u003e Required. An `array` of `string`s.\n\n##### getLayoutProps\n\nA function modifying the props passed to the layout component.\n\n\u003e Optional. A `function(props, context) : object` where:\n- `props` is an `object`\n- `context` is an `object` containing:\n    - `pageChunk`\n    - `layoutChunk`\n    - `compilation`\n    \n##### getPageProps\n\nA function modifying the props passed to the page component.\n\n\u003e Optional. A `function(props, context) : object` where:\n- `props` is an `object`\n- `context` is an `object` containing:\n    - `pageChunk`\n    - `layoutChunk`\n    - `compilation`\n    \n# Change log\n\n## 0.6.1\n\n- fix: bug where `modifiedProps` weren't being passed through to an array of pages\n\n## 0.6.0\n\n- add: Support `__dirname` and `__filename`.\n\n## 0.5.0\n\n- add: Passing the page props to the layout component (e.g. so in the layout you can render them as JSON and resume rendering \nwith 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.\n\n## 0.4.0\n\n- add: automatically add the HTML doctype to HTML documents beginning with `\u003chtml`\n\n## 0.3.3\n\n- fix: support non-transpiled modules\n\n## 0.3.2\n\n- fix: doco\n\n## 0.3.1\n\n- fix: remove unnecessary log\n- fix: report errors\n\n## 0.3.0\n\n- break: moved `.getPath()` and `.getProps()` to the component","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjameslnewell%2Fstatic-react-render-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjameslnewell%2Fstatic-react-render-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjameslnewell%2Fstatic-react-render-webpack-plugin/lists"}