![](\"https://i.imgur.com/0PwlfVk.png\")
{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
![](\"https://i.imgur.com/yWGxseM.png\")
![](\"https://i.imgur.com/XN8evEM.png\")
![](\"https://i.imgur.com/o1AWdyd.png\")
![](\"https://i.imgur.com/RtuijYA.png\")
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.6","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-bUI+iAJHefVm4SND7TMnhV3xJENOhuTRuE2Wwma2ofnQuXFzL15FwIC5vDdDl6Xsjvv+YsQP02nW2bMRGjSiOA==","shasum":"0c802919b444bb176568ad5b8dcf983373cb509f","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.6.tgz","fileCount":11,"unpackedSize":23964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+GKECRA9TVsSAnZWagAAavUP/RQYdW1eoeQiYpvLD6wk\n3hspcLlIwInfsUx72ntXufl/EdF8KchMZTlRvh2VV+bQBzxZxxFPtQXPexY3\nLC6DJPr68owghhCMxl+HncpPTtl1cNHgnYyrBKY1JzuKJwDfHwQ2C0ts6jtj\nyoVBNeJtDsV2mPL9CAcIAk1VSujbVSRAUNJmHP//FIs4Qi5G5vau7jWz5UtI\nJdIT8VBVaxdHJ0uLsPa+UeVHgsP0RtCVUF9GnbvKqMHCLHcRqy0ARuAlrUfa\nSOclrbHz4w2juakl/4h7wDlB4aY3zTUzPAV3DjDuN8G1FV1S6/nrlmZWMiDe\nD1PIbQRAgP6KmypbYIzodXaTxpDvESOrROfA4KjX5feqrUWQOB4a3egBXRHd\nNOJZ9nK1bKBtq9iAB63E714MJPb6dzfvaKancFzTjNCbDAEBb6RT3mPZATVa\niCgRMPsCXszrumKb4/UnexHV1gm/ZPm0mmHg8i4UhN78zupL3ImQ2ICA2Ld+\nrzECPoWUWc2GYe//8zP2LIxfk2oDBl4uvYipWtuZE6uUBJzmZgtXCk82f082\nfZxUGoWRdihoh1BXfPc8b/bw690DakOhPS2oUk9JXPneuNEc5E6x6Zn1UQz7\nd4csr63CQx4WEScIvgj2NWzoRBAJoCBqQNUxsy3m/gidVlDLABz5f9uu9JB+\np+p/\r\n=4wGy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOEt0wsqh6fJ62+qwLU3nhTEOD2sQ4nKsh2j8sJrLH5gIgYjIi+oaqHd097PtC18pE2VJepZ/c7oMjBMjeX2R/Ju0="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.6_1576559236413_0.28894236618685976"},"_hasShrinkwrap":false},"0.19.0-alpha.7":{"name":"@react-ssr/static","version":"0.19.0-alpha.7","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"delay":"^4.3.0","got":"^10.0.4"},"devDependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/preset-typescript":"^7.7.4","@react-ssr/core":"^0.18.3","@rollup/plugin-node-resolve":"^6.0.0","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/node":"^12.12.18","@types/webpack":"^4.41.0","cross-env":"^6.0.3","express":"^4.17.1","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3","webpack":"^4.41.3"},"peerDependencies":{"@react-ssr/core":"^0.*","express":"^4"},"gitHead":"25cca467d3ef3424d743cb6f6f2ef5a4e8e25f2f","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.7","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-SQRRu0ovJkQRDBGJ4xG52uylB2wPHvISmMnaMBhcWij9uiprbms8wL5kLttMNDduGdtsrM5P+vlU91CcSgtX8A==","shasum":"9d1c15ba44af93d2ae14b40d1569c759cd513259","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.7.tgz","fileCount":11,"unpackedSize":24062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+GUwCRA9TVsSAnZWagAAZ9gP/3h/Hf0FoCWPcQsvGlW1\nSgeZX1MxFaIYnqYISRQrl46LPppaqjwML63OTK5yFb24s5Wm7/U/c5shGtum\nIp9c44+HjqY1v+bRhcArItNXiclYPOzXYdL9u6h3SyBeeshSvVUCnBT3y/5K\nWL9YHNbudtpYCX6T70AJOIkrXoHfejkhMSjAiiI3VJMyh701KsbxWJ8NCueq\nqxfJOQKIGIXSy69KoWKcGKdRC6jVgs/J7UtYkXoF8TQ3XiAe8TkJeshOFuNt\n+cQHwc6++Tkz6OSqB3EJCAOBlLN1EmJFEs12QT5aRpGfBf/Xv6F2fZyFfIxu\nHfbf9KybB0R4vM2Kmp84WoJzHVrPEsPmBwPQrVVWny0UnpVoziS44PgjMIvz\nDW4UdVNl7iYYcV+33+fPCvMIu5kdxQ+0i/VkzfjmFj+xqy6p825+Va0MCvSd\nmSmiM9H24UC7X6Q3BepownYBdeedla2l+EdyAQuMnA6gwMspg59KJD+jMeu9\nHiFMeOYoIc64t56f9AGf6nEfabJZwftIxAwROpqIFswTdIWjlHLwJQk3xfhD\nLwvjFAyyNZsTKlCd0D2FxWnl6jFU38WHHtjHX1pvDdTCOGT3kSxzMOAsyCZh\n4kb4O39bc66/3Cuuex2/jMA3mha+Qb1F5n2F4lfjY8IkGG2PuIEeEuQkD4x1\nYUn3\r\n=++rJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFdYMkrRbfJj/9Ujb343QK5CQKH5WWCpB9EAZJmr4spRAiEA2NDgMbm9OhuhFviOT9HNaaOAyapM9tpG/LePKeG7/KE="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.7_1576559919858_0.363405905678019"},"_hasShrinkwrap":false},"0.19.0-alpha.8":{"name":"@react-ssr/static","version":"0.19.0-alpha.8","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"delay":"^4.3.0","got":"^10.0.4"},"devDependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/preset-typescript":"^7.7.4","@react-ssr/core":"^0.18.3","@rollup/plugin-node-resolve":"^6.0.0","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/node":"^12.12.18","@types/webpack":"^4.41.0","cross-env":"^6.0.3","express":"^4.17.1","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3","webpack":"^4.41.3"},"peerDependencies":{"@react-ssr/core":"^0.*","express":"^4"},"gitHead":"6e9f4787e2aabbb6c14a9949e67ea5c8a8af454d","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.8","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-N8RE33QC3Z7KBfgaDA26T+knw3FREQeb64DK3m3K1mD1fvUyb1kXq6rLeFsJus+GVwu/sXWrZ7+o2JRCxqKBCA==","shasum":"6a7c4df3a5cd618e7d24ff0587fad7d7d998d398","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.8.tgz","fileCount":11,"unpackedSize":24037,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+GW5CRA9TVsSAnZWagAALwYQAJhXEltYstQuaUmUJfD1\namy+hyUMuQhtrcl5aNa/axuBJ+j4VRkY9/EtUSOP0yMZnjGUMgn0MoB35PYQ\nCwjiIJCYjjG1L73yZWXUW8khapvUYecjs1HsigReMczeRm2aAUAhYJ5q5mjU\n28jPgNTqCIDwaBRetYa3Jpv5r9tNk5qRrsiu6VD/0nmXG/afAg0gzJbH/iCQ\nBk4mi2h/KIqdgG/6veuCNWuru0ZfjhOkerwQ+bVSaShS2PKHdaL0TwSCvTU5\nt7azbSeqzEomOescWj278flhWEKgmCYjzKQY7SA+KBFVY0BXeiaqbEKdnG1E\nCr/3DgSEl6DIaIhs7BavERx2ikcNEiSl0Z2ofVTR3jHF9m7AtiPIBBDXp0Au\nf8YukLB/MzV0FbK05Bl0bwpbbukaUQzIZlkb8Xx7PgnS5YM79vt1FEVS/XzS\nhazuNMngat4i1bapy0R3kQLWaldjkpRJevC3Ze1/gexwlgEAFvB0m/YrCp4G\nC+a8kcNEgR8yxecu/JLnJUlLy5+f4WmBoGeEYSfBxhmr+vqS/VwbuGeXBS4C\nLKA/rZbqIGwCLOQuhgxmnCbkvFJgj8MpE3a9SGAkhaACSUcXM7mJCwgdZlEm\nA1i34bRUY3fdRNsBxQJx4RA+1Lartr+ctcsaz3FGhsk6lVMNREG3xPd2/05c\n/n5T\r\n=AInN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEhSkVMuLWsCOfeP1dqlSVgEVleX0oOTlPDk6CvQisj4AiBm3sDapPEWYC5utrIuCbRfUzjJznW05hhYLoN9DxdR8w=="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.8_1576560057366_0.7551136862564298"},"_hasShrinkwrap":false},"0.19.0-alpha.9":{"name":"@react-ssr/static","version":"0.19.0-alpha.9","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"delay":"^4.3.0","got":"^10.0.4"},"devDependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/preset-typescript":"^7.7.4","@react-ssr/core":"^0.18.3","@rollup/plugin-node-resolve":"^6.0.0","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/node":"^12.12.18","@types/webpack":"^4.41.0","cross-env":"^6.0.3","express":"^4.17.1","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3","webpack":"^4.41.3"},"peerDependencies":{"@react-ssr/core":"^0.*","express":"^4"},"gitHead":"58cfbfbdfef382fc3360ee7450fea5ca16e3a808","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.9","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-4HbO+CAaQXHYOdrYVtuHRGztY5u/RkmT1ZWgjETtCFY/8KMqY5tJ68/JtYrcujIhCSGc1LIfgOxVFyTuhvo26A==","shasum":"6a26ad176fb81bfb300290817233e7248af77f36","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.9.tgz","fileCount":11,"unpackedSize":24094,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+GYtCRA9TVsSAnZWagAARe0P/iOMbexr3D0aEv+b7+rf\nmO+xC0BVPeOWzRqt673E0vfnV91s/AAXUio9Q5iE9TDzCbr4SbV1yQIcucPh\nAqoRD/YOQ/chLRTl2Q/pY5c1FlZWElv8ej95ISkkFMEbSqFIfThNXLbHD0R1\nh4+XfiQPtl4ljePtlGfCmLCqI268Lc9OJ8dchubSBYmIAEzhLFXQ/h0WWUGD\neA00Xfgj7T6HcgeoJg1qIAqYIrz80TV9AcMv+Y1Gr5aw1DrhzS8A0WRtYOEt\nMuKUOc0kOjyP204ZwmUsPAZ7dkkrFA1myBoQoQnXp5FxdHSFYgJwh/V7NWKU\nkwwEjdHJy52/u22lxHjTd9bFfg+CpQdEnJr9fC9PN7lPX3a2POGV/vjAGDt+\nH0dhANhGtLH8+NrgnEnPauhNkExxPLeQX2XxBU0QDPKgcjgZws8dWFO3VRwF\nQcegS/8BMTW0a+QZGqRzxOXLkbB05wAro8eBUi/Ag3B2JS1plKHc3Bw4bv0h\nB118b1/WICmAKGOwrKLm2DP9UGksZZ/tyx6Ha3+qf4Rihr0RoNGLUTR1Cjkw\ntJcif3f5XJiM4O0LqkPFFROSkxNLqnHeK+i7sw8z6nqKtfFjNu0VFbOdtgG8\niNysSKlZI/uDpMUh0hkoffA2MP1CtpSjga8RCaeqIiSrmsrwZNnMU/X+R/Ui\nraMR\r\n=nr9y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1WwY5z8z0GV82v0KOF0dTmfXkD7TfrBrdDN9aouCocAIhAPjqiylG6p878n6LHqskznlRcAi3aN3NrTU/ytXbUTQD"}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.9_1576560173329_0.5822655348704866"},"_hasShrinkwrap":false},"0.19.0-alpha.10":{"name":"@react-ssr/static","version":"0.19.0-alpha.10","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"delay":"^4.3.0","got":"^10.0.4"},"devDependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/preset-typescript":"^7.7.4","@react-ssr/core":"^0.18.3","@rollup/plugin-node-resolve":"^6.0.0","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/node":"^12.12.18","@types/webpack":"^4.41.0","cross-env":"^6.0.3","express":"^4.17.1","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3","webpack":"^4.41.3"},"peerDependencies":{"@react-ssr/core":"^0.*","express":"^4"},"gitHead":"5b0ff5e4f05a52a9f52953799e200932e59fcfbf","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.10","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-SeZQoff/6VwTQ9rNO2TpS1VmTU4B4kNv2shZ6GPdFPw0/KnNRDoUYyjFG0S1ryHX1JFo23Bz7Z5f0CH1fjahzg==","shasum":"d5ae86aa7d920f1dda7d4a5298a39bdcd4c373b0","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.10.tgz","fileCount":11,"unpackedSize":24095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+GZ7CRA9TVsSAnZWagAAAR0P/A7vI6Zc63cLpTanaRrh\nBbYY7hhwK+Wa4DDVu5XEgUCJo72yiTIVc1v2moTreXSMGStq3QxF8yL05wrr\nI66AfwJYqUZuL3j7InRMYmePiycZIdFT2v3gMG4hyooT6BVS7NKMI1sdp0ZH\nE3liDw8NV4gYDs5DMDBimLaG8OAdxKVBw+jNY6/Lxabo6wiFeQdWyaB7iHTM\nk3axuTW9ZDoBqlhDEvaf6QA+A9hEjTHT5wPyQgAdZ+XA6Ux6VhqkLNR7WCk2\nkEptlPhyZoEN6lomu4twFo3N2m+7J9weDezReW8vkHeSmcpiOI4xrCUJ4iJb\nmaKQf3iLrjCCsEIBHhsZOzOa/3ArvMF8I38kUKyZ+tL3j93vxfz0ocXtl7OL\noCj2uSBfIn7GASKTxV++TGfQVfB7UhPkG2I6o+ErAf547xbmTe5XEHPOfrXH\nB0+uq8zTRK+BCc0KnThlzBUcPik4H2PHC0eNHfQAZckkV+9fh2LTh0Qw6Y6B\nnQcRSce7X6Q0fNa7sG5K3Aj5YpFC3PKp0dq2fekPgJtRYFrmdj3YVpzhWS51\nMAz7gVw8lssA781f6qjgHUeCh4Nzzvwqv2oRa5VYk6yb40dOJw5EgDNipbKI\nsERE9ByrfOa7e6NM8qemjUed40X0nksiKnuAyi9yW+vBLa3ey1WozaDXOgWC\nnxfm\r\n=qHjC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiejAO0To6BZ4eUaaf2P0i33tO8qPG/TlwXTDcpGvCdQIhAOSYrjR6Y1v/5oR/j/DIAfVD0pntwCQ2qHEDSWfRiDtR"}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.10_1576560251244_0.6759136777726276"},"_hasShrinkwrap":false},"0.19.0-alpha.11":{"name":"@react-ssr/static","version":"0.19.0-alpha.11","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"delay":"^4.3.0","got":"^10.0.4"},"devDependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/preset-typescript":"^7.7.4","@react-ssr/core":"^0.18.3","@rollup/plugin-node-resolve":"^6.0.0","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/node":"^12.12.18","@types/webpack":"^4.41.0","cross-env":"^6.0.3","express":"^4.17.1","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3","webpack":"^4.41.3"},"peerDependencies":{"@react-ssr/core":"^0.*","express":"^4"},"gitHead":"2f332309b5fd992bb4cdf41410685d9836b4ff2f","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.11","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-bk/egOHAJc1g7c1psKDrGTqvbbeNWtcOpJfXY6AF9NwV0MpLpwQ4qoEkoWEGMEUiuwvkPnoZji6zaLFdO2jH8Q==","shasum":"8e8c343eecd633b85acedad7d3b3aeb74433a1be","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.11.tgz","fileCount":11,"unpackedSize":24168,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+GeFCRA9TVsSAnZWagAAYZMQAJY6I4m76g7GKzZ99IzH\nofK21fyej9KcqSIjH9C8nsKuSF2v3QPwrRFdaABrwNFkE6GDqy+CTjFjLr00\nB1Iuukmt0O5BuIdnWuQN+nRBY6XvcrEMbYZ9PoWrKp6OAiT7zixYL3uXg2vA\n1x49+qfifhIgeUu2zGDVeb7gp/hU80VK7R5DF0oYAGPj9T+YSBaGL/z573cN\nae/1qZOfQQnxUumV8HGnWsWq+XviSiQ83nXSsogI3nZwg1R44gOyqL2fGjht\n3t/b3tpYHJym0YdYrCNTSXuOvTWIQxQBPyWm1CS9ZlELSv3dfH9d9O8vke28\n+qkuFN7e1um93ZE7tb/R13Qx+mvgu/BSfM7Bf7FAIqeSzgpstOiz3kgmMaPl\n4MH46iuAVTafvm8G8U0uRcX56fBZAextFmQVfjJT2VytjAtHh7AUf2mv4Uj2\nVHRH/flxOP3gqt8o4VkUrBG5BowugMmJn3/maTTEq7KZW9ybSqneH/065CyX\nCgzZyzyiLfmlJbVGQ5yG/EfZOFCHi+KDHPStJpKvzNTVSngIRcDYXMREmf5v\nG+kUifyN5YiweHYEbNSc4CrSEtuPc7e/EpASjj3iiWt0HK9QDl+uzkoPdZI5\nZvj3CH5c1//t9iMcecUVVMzE/tZQabcxDf6wGketb9HdGokYuRGYPkH43jTg\nbdxQ\r\n=+7sh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCa6IYPbA5EPFD1yRdKGjng/FEMAvXxBV45t0DniChdDQIgM0+hYrcoeDM2IqeUQelJdXUCoClEo7ErxhijY/wYXrU="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.11_1576560516836_0.035631754667986515"},"_hasShrinkwrap":false},"0.19.0-alpha.12":{"name":"@react-ssr/static","version":"0.19.0-alpha.12","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"delay":"^4.3.0","got":"^10.0.4"},"devDependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/preset-typescript":"^7.7.4","@react-ssr/core":"^0.18.3","@rollup/plugin-node-resolve":"^6.0.0","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/node":"^12.12.18","@types/webpack":"^4.41.0","cross-env":"^6.0.3","express":"^4.17.1","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3","webpack":"^4.41.3"},"peerDependencies":{"@react-ssr/core":"^0.*","express":"^4"},"gitHead":"53677dd8723e7a5953ec39787c06ad4b5628b476","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.12","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-9IA/gtxl7AgZZvbVbExpap8zXodhTiI2ZdtRDxcC14oUVBFMdAqwLmzi3fEksXq2cRZbvEnMStCcgL9ji0d9/A==","shasum":"937891af43ac935de40e4640ee4edfa6f94d7512","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.12.tgz","fileCount":11,"unpackedSize":24327,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+GjlCRA9TVsSAnZWagAAfHgP/ipJdLVgMWUoH29zXYWz\nA/qLkN5FyccZDntVVHBdntmmVL9eCkY6QyFltKyIF7gUpK/JylnZhWTRTMY+\nRl6Cr7xiyngKILcsk/kVgUVZohkcp3y9j7Qv9nV2q6YkmOhXffzjaMVRIQAh\nvEp/nubRwQV2/NA4AdeVaOWe/N2znReQV+MzjKKVqgS4lO0DuUlyMEdXtYM/\nim38uA37F6AqtocqF2bqPOMi94Ng/bcXfI67UlV3OgJM8xg+mA/6ozjRL7JV\nBetUXK87QnqAMi8e9Lz+eqCCfT7C4mlgFhnLnswwk/bqIWVorz8CfsHyiOLO\nbFOANPHpmWXy0qLxdi0tIuasuyoAhnQv+jCVrFYZy4HNgt26lotpBkknU7/N\nErpn2ntsRK6MItULimTjauMzrAkWcx1Bp6L851ynvAQ5OZiBnGV8SVGnV4wF\nAGR/tkhwiVrTCz90/MKxMH7xha3ncplhJGNgsgqCsdxYp/4eBC0hE2cXsr4z\nNR/6IOHZnKohnxVJ+k4O0QZmnc4igIHPo/NKXe7gefKrjxwpFkX/olrT4uos\nOrs3S0GZBOO7Q/4ojm2E5swqQG0oAVlD/TOkwajEc7jddXorZ3qWg6MZfNIA\nUzBQOH5tSeDB6ZvmWwOe/dDJAy+3cHRAcBvQ2dyDMtVgnjQl5Vlojuq0sjvT\nIZDT\r\n=03gf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBbL0ISR7em4nYgfp9T54WXLBWS/a5A7sNB1OxImndMgIgXqBfqmjUmZPB5Kb+IMRs2OYD+grmUFNxQ/LAWl63moI="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.12_1576560868744_0.6640613227792596"},"_hasShrinkwrap":false},"0.19.0-alpha.13":{"name":"@react-ssr/static","version":"0.19.0-alpha.13","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"delay":"^4.3.0","got":"^10.0.4"},"devDependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/preset-typescript":"^7.7.4","@react-ssr/core":"^0.18.3","@rollup/plugin-node-resolve":"^6.0.0","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/node":"^12.12.18","@types/webpack":"^4.41.0","cross-env":"^6.0.3","express":"^4.17.1","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3","webpack":"^4.41.3"},"peerDependencies":{"@react-ssr/core":"^0.*","express":"^4"},"gitHead":"dd98da7d39348e2f61851f4095f7033e955234f3","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.13","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-WFaaLtg69WTKabWvAKYR0+zbIe3NIVTuQogQN+sJSJdXRWQceY+Fogit1rHde8ADHvYhSYLu+gbVUDDYCqB5MQ==","shasum":"d91375ac9a890e27658b204639275a6dca82c496","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.13.tgz","fileCount":11,"unpackedSize":24303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+GlGCRA9TVsSAnZWagAAjkgP/36gDjMeSQJdvcBo0f8C\nmHU6xiWAqsUoeaDREo940tYE61pVzcR4E/7IikvOnZdfLGuF3c07XX7G8a9P\nAafa3+VaSnMWVC6GriaRLK9atRrkI5HfRpC8uXdqZGlLwUFdeP/LEBH11cTz\nfU1VdbggS2AMmF3bBBwe2qk0WvJwAVV0JHhXlRm4xz5B54Zjk6vURCGyE6PC\nRLfO4tDs7ZVQDXYKbQZfz7lJBI0Thk+BXHMCDubY03arv7B74KEPDk0Qy3qX\nWhUYkyJJnmy2djBcPAd5o8QXVdHmuETrWUut+1z8BKZZ7kM19YtacZ9Udfo2\nlLkCyUqleZqy1XzKuAkYhWj8pNzVOV6F9Dn4SXPhT5eyMo6ZO4l3dbS5fcyP\nk1kgUlGIlWpz1QQZPoBmaqZpEEwuoy79dREd4R4VoBT5ahl9bkFfuMgc0KD6\n+Uo/rtCsxwUqobVm233jY4vdKmUk5hkAH3iVjcRnVzaJsWDm9Sn7zThQebcD\nERet5XoHuZ5x8SY2cyefH4H51VSKKmz43SJM/F4WLLItSKxUxO8fz9U2mr14\nir57dm5l7AGGteWH2rxKqHzPOZOeo/Vuyfxj1SD94nPI4GZBK3W+k6mqY1+r\ncjPkXKM7Gi3J7ACq/26lVVPXBK0bQ5xQJNpP2i+3N/0RHMEIhhb5wqFXI13u\n+At7\r\n=peKF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEjsGZQEm8835jJ/QEcwq3RuEgbKcQDMARITet/QsS9wAiBSaz65iXuzYSc6g5D+MB6Fkcc+VDho/H6eWBetZ/Qb2A=="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.13_1576560966151_0.44163842083304616"},"_hasShrinkwrap":false},"0.19.0-alpha.14":{"name":"@react-ssr/static","version":"0.19.0-alpha.14","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"delay":"^4.3.0","got":"^10.0.4"},"devDependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/preset-typescript":"^7.7.4","@react-ssr/core":"^0.18.3","@rollup/plugin-node-resolve":"^6.0.0","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/node":"^12.12.18","@types/webpack":"^4.41.0","cross-env":"^6.0.3","express":"^4.17.1","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3","webpack":"^4.41.3"},"peerDependencies":{"@react-ssr/core":"^0.*","express":"^4"},"gitHead":"39ec9a1bcc414d88ac058e3a5fbbef79f09a894f","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.14","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-ot+NZojR4Y5KLbtcTHuqePaqms4SPrbY2Rn3e+6Iha1aS2NROoEZ4i4lUK8/9GDJcm+VG9qpMOkuH1R8XmjXKg==","shasum":"ff35e9b8004254815b9598050d764d0a430a194e","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.14.tgz","fileCount":11,"unpackedSize":24414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+GodCRA9TVsSAnZWagAAP0IP/3gMG9PvOi6GI6yAwm5n\npCaa2z6QuEhHbQ7WtL00cg9HGhtKjR+Z4ns6QZdeGEuDiDKKWXtXHRQfkAhl\nWJ2S7vqWHn9fAwKEqfvIy3JqROHRKsss8trvxpave1AD3frrPGtQrKSnYqZJ\n/Ql3Uck6GepwBq+3sHqxQ+mByamPb4+KIMXe3EGl0xJ2yw5KRvUSCYKrbpUf\nekg2O5jelTPFY7q6hv0l1ZpLwugTLJXdQtBO+lP238Hg6xTegZePPxplD0yA\n86ZQuyqsA0iH8epMYdRDofCiiK5qYoLFeLryJGTs4UqLUHFr8I8e75mme4ss\nIqqm1dAB16O/wVUx9fwdYSlR9R+kzckbW4qx8+FLc4NmqsZ2eoDAxCKsI0y/\ncV66049kiuoCWUSD6DsqOHomIcpYSWGRgQsWTkBSfBCm5JUNBQdKJhAl9ARS\n6VMLO+2r5sdlwDZcBt+dR4bkJ/3+xfkJcxfq0hti8HuvtTeheP+TYJT9RtPy\nrbIK2miraPz39AaSBlqNcd9tH4ADUtGj5m4JJSHafolTQmJa3VKD4G1aCLb6\nZn3cm6GVk4OxdxU9a8ptMSr5YU3SK9jZIkBftRbUZ9JG/py/azVe0ayCB3Za\nn3GvUi82F465w4979VvfZVMxI7z3Dozn7+16WkCLiacJfr/j5mVrKIZZVvvL\nPiJw\r\n=P5ji\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEL8MVnu6sHVlKxx/pbq+UUkmVmfmAAiGKeFXYd4c1mOAiEAwo1fXWxX/d6nmbttfCdTMKR4MON56+Khm1Par65ukUs="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.14_1576561181395_0.3358794499914177"},"_hasShrinkwrap":false},"0.19.0-alpha.15":{"name":"@react-ssr/static","version":"0.19.0-alpha.15","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"delay":"^4.3.0","got":"^10.0.4"},"devDependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/preset-typescript":"^7.7.4","@react-ssr/core":"^0.18.3","@rollup/plugin-node-resolve":"^6.0.0","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/node":"^12.12.18","@types/webpack":"^4.41.0","cross-env":"^6.0.3","express":"^4.17.1","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3","webpack":"^4.41.3"},"peerDependencies":{"@react-ssr/core":"^0.*","express":"^4"},"gitHead":"7fd53564e2610957c05b50efe06911f20724d556","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.15","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-BXpKm/RvQslk9+NbXiil8JR2Oyh1rJpKehqUVXv5TJPPQ21pEAvdSozzt0QWdRbHzentUozdRkjXInwktKgvjw==","shasum":"2d2c33644899aaff426dc06ab28b3898d6750c94","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.15.tgz","fileCount":11,"unpackedSize":24633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+GvBCRA9TVsSAnZWagAAw+gP/it1xGzdDZJDk89xVemG\nzSAobyfZefr+d6dfceezZo48qbHculd/C72VLPQapATWaegZ+NrCZj+7AEve\nLnroG6aDHP+F03GHwIYukhJ9vFB61bXc3wuG4ZsnyRITw9lGaO2C8WNpaAzX\nNNlCYC9zqd/HqkkxyOpLS1wwVAph0NrgY1GpIrTkhwWukwUSOtqhY4n6cq6c\nmLWsFOP/dmdimGsP+g8qYRTqNnl9tFM/MoRhzNoMv6EI3YnXU1l1/r3p2ur6\nHqrwsAfxb7QJSbbXiV0TU+H8srE5keGVGEY240lE1i+9kJ0YHLAg3ScC7RZb\nufC+wsXqhLidgnKY0IH9IISnN+/v8xDj1F2xT1Oxeq4wCOe9Bcs90CJlBPcf\n/OmXT/YqTpDOPKp1XaQ0/J3ibd/z/ErcHCxPtjzM6F26nr3d/oEsrISCyg9Z\nq6t+7/Z5MOdjtXf0UgzFOSBmkV3xKcu1wiNHr6vLhXb5oDDnfuLbwapT+EeR\nIe1dlcWpe18dPITSmGIX6PwZcOBejhbR0kc2xm56lbzg4ZaG9DN4dfvYI94e\nhEbYrH9OM8PYtjfU9dy4QK8zwvOCFMsFWXIEPAhI9CxF37eENtXNJzC5fUbL\nQX96rFq1460DlAuu0bB2S3uVm+JZ7MEGTbQpHN7ZClhkSMrJ6S/iyg1VCX50\nigOO\r\n=jlZp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEoTtMPWB2tZX+bbZqvDpkrU/wzXvflNH5RANHZ9rq4YAiEA2WqiEPTwqeXBZO8JtATfcsf6GX5RR83uZfIgmv86ipk="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.15_1576561600500_0.8567155818664425"},"_hasShrinkwrap":false},"0.19.0-alpha.16":{"name":"@react-ssr/static","version":"0.19.0-alpha.16","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"delay":"^4.3.0","got":"^10.0.4"},"devDependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/preset-typescript":"^7.7.4","@react-ssr/core":"^0.18.3","@rollup/plugin-node-resolve":"^6.0.0","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/node":"^12.12.18","@types/webpack":"^4.41.0","cross-env":"^6.0.3","express":"^4.17.1","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3","webpack":"^4.41.3"},"peerDependencies":{"@react-ssr/core":"^0.*","express":"^4"},"gitHead":"a005cac6839f340ce5b295aed20300c854aeaaa2","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.16","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-M3Yy33gF8Bov9AKklS35CZt1OXjpTqj4t6fPqGyEV215D/0s6L32aFliRZ+8fTw5UBXSu9iUtmX6nC18ajnhGw==","shasum":"9434c5d8aae126f675bd9015296f71eb517cec31","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.16.tgz","fileCount":11,"unpackedSize":24654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+GxGCRA9TVsSAnZWagAAungQAIEvBAgLdBLd/3wyIXWa\n10/7UNi91ceZ+8JyMsZPtTd/UAztSszoRaEsqJkEYmj3S8iYPuBj0I3TY4CD\numbjxg7Qg5auJSnWe3on2ccfw1MuS0ZRI8k1BZ5Qmhf5Ys52znOKmH7jyp0J\nuFbKQ/5R+9gfmBOdJ8ZJcxs57CClHxgzDNDaDpMNg2TD1p1I7D6Ry/arqBvK\n6cvN4+JZwSc6l/nuVdpAPbDw5Lr+va1+Va+2lbzlO9aDJzZIuGHZFVFUbyCY\nSZdB0awYHdSdN+P677LWGAVumBfNkJFrpTufi7JEn2KhFx7srqFQD1PydADx\ndFrkyAfm0kW5lMfhmf1TFG8olXHpSPN+3zW2o51BidQnE6tH/zcnVD35vvB1\nlZDVcxksSKqVzVTeaBhvSiIBAor1YN1N7YgCsvv0MRGiTSIqTfYDOtLUhvuW\nRSmIDk4UkLQ2eC11YZTviuBdERFMpY31W7nfan4L5Sq5uZYZIBOPTy9Uhpir\npDkIGxue1W/+GlCX670i5U7ta57SOMzLF3yttgVqR9EVbD98loFYiZ2th5gl\nAxWci3lBe9rkbzrNNenMSkJykgoIZ2KAPJq8e0Q0VDd7qn3gbchyv+JPhR8d\nqBdmMM1WLtz3x8YaMBHNNPt9EK9hpqJ6EvlfPGi2MZO4hpRxTgqj8GR+Cgo3\nqlWi\r\n=8LYS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFIVU2tg+tXRY5rNg28zoe1xSABkTReGrvkehAruIk0SAiB7IVuO6cO+q8FARWAcGIeeOrVCMFLkL1k1KaB5dlVSKQ=="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.16_1576561733860_0.15693220695057786"},"_hasShrinkwrap":false},"0.19.0-alpha.17":{"name":"@react-ssr/static","version":"0.19.0-alpha.17","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"delay":"^4.3.0","got":"^10.0.4"},"devDependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/preset-typescript":"^7.7.4","@react-ssr/core":"^0.18.3","@rollup/plugin-node-resolve":"^6.0.0","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/node":"^12.12.18","@types/webpack":"^4.41.0","cross-env":"^6.0.3","express":"^4.17.1","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3","webpack":"^4.41.3"},"peerDependencies":{"@react-ssr/core":"^0.*","express":"^4"},"gitHead":"a2091cb8753672b9e50a80c182e5075a14af5759","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.17","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-nz+LEMzbowmXf01mbyA18tOT+NJRw7wJ6JP52arNTbJ2F8Ph694llY1RCBzl7fTRGJpTABwwk9mhtX11PeTEaA==","shasum":"e38d52b13f687bb026f49e0e354ae3e0adae1e9b","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.17.tgz","fileCount":11,"unpackedSize":24685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+GzVCRA9TVsSAnZWagAARvwP/0wKzj9f/shv0p5/ufpM\nLGP8K+KIQBculy0okxNK0xa1PkM21A/l0VrNI+bQHdvfX7U8i+GziJzDHVsw\nHsaVweqMdKV0cnAVupY4kupNNouRa727ND27jdTBnwFJTkr+6mTTZK+pA3VR\n46F7WWkAFcQzPYFS2oopt0dk4NbJYCaq9MoA7Jn2T5DvgyH/Q2aB2+GyKyCt\nOdPWbCTy9zsj3fZCp4eKDm8GszuVTWiCrn0tp5AFl01yKJTs1yUnjLz7J4Pw\n6ECtN+0k1k2epBltF+A5inwNpwGI1CLpRG7wZ+ZqXr85MykBaCnU4JyizMmX\n4Szs5LZf4LL5/MJgnCtmqFHW0nhs+nBZVnYXfPiRoVNTkpvBG53WHpZtx8uC\nEOQOpMMXckHZtBOarehVop9f9fbytyKr+ZXJT7VnD/nSHSZCumKTow7pRyoE\nY4uu/YxrktmZFLWTBbfhr8L/kGLr+NLCaw57RcuhUnge2zIs6hAk3l3mQYcf\npmSZeZqQRtOnf2w+NQUSUprpDKvyWzO/7EHPZwLMgvePJFnbU6JKZcytOe+T\nI97QMJo39VZB7gsPfT6EIPhJe+u3EdkSZ/ONljVJzE1S6Uxvnl8qZfQ9L/UK\n3U7gVbI03qpI3yBO1AnrFKSat/OtW5Og0uT2GJPfngan8eNlc4TgQ4UIV0PX\nRgKG\r\n=h1tr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4KZaVmKUOSpmM4lo6wG67B38PaJg0H49ditIoHgPJ/AiEAv/udmRHRhS7tOw3IrBkXqy4Aso9uhVWON4gHTkH/F4g="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.17_1576561877030_0.0057848191769309665"},"_hasShrinkwrap":false},"0.19.0-alpha.18":{"name":"@react-ssr/static","version":"0.19.0-alpha.18","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"delay":"^4.3.0","got":"^10.0.4"},"devDependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/preset-typescript":"^7.7.4","@react-ssr/core":"^0.18.3","@rollup/plugin-node-resolve":"^6.0.0","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/node":"^12.12.18","@types/webpack":"^4.41.0","cross-env":"^6.0.3","express":"^4.17.1","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3","webpack":"^4.41.3"},"peerDependencies":{"@react-ssr/core":"^0.*","express":"^4"},"gitHead":"b7d3056453c252e1b8b1d7c79726c0bddd289c54","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.18","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-vIaFb2zjkZM8ftdFIDfqNtczA0FfnJZR9KNm45YDTnyd84AQ4OBsMnAZRkvN3zp4m4iGKHrWVCXtb+PJITc5AA==","shasum":"c18481a3746ce8b4ca07c504091efc27f6da2eb4","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.18.tgz","fileCount":11,"unpackedSize":24685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+HCiCRA9TVsSAnZWagAA1OgP/ikMCG3KISboC1KIJy6M\nKt0WB7rqCU9fXCtZP1EGX1aYbcETBowsLG0ndCnmbxb/rVuA6c+dpO/qFS66\nj4Wzh3MkniyL9YkvMPPn/amB9EJI9rIHklehCc9bQuyqdoC0mPXfmfyugdpJ\nk0wygqhl5beXaZgTZhTRicpHDdR5de17S5GMaENhIKKSVChtbXoo9oflQ3nR\nSHXU20/1dzT+XRT9f2tJ7OWFAd09U49AoQYWhPojm3Xnvo0hGf7JLjeWG4oU\nCsNzn1+ZdJcsrDswrZgFfZSjN9D0vme/qX7pY3mrUx5u1RWxkR7LRt1wiews\n/Tho0MrGUPXiX0wqSFXV+Zv6dAv1fJk3Kl4g6BFIyS/rzNPWaJ+57fEVk+Ao\nEi9NaRp6mPb4KAWRH3cMlSJM86HnS/euBrgw7N30yP6pK3usCWu8tUAeziC9\nom4N/JUR5PKUH/IP1lniG8UW6Px3a0QsuxdERDcpzA6l10cxdPNr4g+ZF3o8\noIwBEqUaDvOmqGcdhv9u10lKVY6z1C5Z9veTF9cZXsrTkK44A1YX6tLxfEoF\nCYDHcmD7+ua7OBIaqEL8/5hDf09JmaW5AmgnDO/vLo6SYo+Gr/GxiJxIVMSk\nhbxXehKBa/UK8yUDSFNKKgni7X13YtDB8TtUjncgFNr1Jlyw8YwuYI7S+m1/\nL/Wm\r\n=70ZA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC1o3boaZhWPjRMRmoXDm7toI5U1aYocQr9TdAckPP+mAiAUBAQScYLzYNnUpeODb9r8ckFOtgfvMavyyXltgMLnaw=="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.18_1576562850135_0.015995295409990673"},"_hasShrinkwrap":false},"0.19.0-alpha.20":{"name":"@react-ssr/static","version":"0.19.0-alpha.20","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"9193c875a522b4c0c083746df1a1f7f92d913b66","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.20","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-Z+C1GHWhhn76gBn2SwLNmr7W/+db8Up8/RrmFkCIN6Yjp/Dkju1gjRGuoA6a50GL6Ryhnj6TQXT3BQM5eOVIbg==","shasum":"ef017837f63a7c2cf5977ecf3f5d6be5d1928245","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.20.tgz","fileCount":43,"unpackedSize":326635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+JQaCRA9TVsSAnZWagAAANwQAIxrKMjF1yRPqwbpJ5jN\nfm7xN7cAYtBh8qV3Hs3Sjtty2sVf7lcu5qpgjz6maRXF3JExuOTGwvovxZuI\nEpAvsp5guhHdMsmm9wh1a1vT6O/Mcfq3SV0RAdasoN9qGX7Jp7AfSLUDG6hd\nAqfnxUyIEU9V7BwwKzP6J24bfJRvienHTgnccWi5YRA7hCcKz9m+e5rg9qaP\n/N22DAYsuQRSBEa3cKLbbiHvd0n0aXTloZWkjJLkZLhQU6byC3/N36BNChz8\nXqUt+hzqmpRqzeLJrSIFSebpdPpBgiXMC5xu9DALwxfciHBewVmRkmHeMT3n\npwSkpQCs5XOX0Jgq9cd62Hg5kBJoUOHMN6+/vfsXenGX6uG4MtvGZ8tvnYmN\ncSy49QX0GmrlqI+Mdoh2bPmxoO3harP6BHClPzaDmX6x6hxM84u/Off9KYSV\nm7S/nmrwQJKhXXuNQq0tVn+Fmnn58fXc0DWeRmZVAgOKAI89RAGw8sXw10fR\nXTWmwU/T3G56U/m5KnoGTIGzzlfL1OLsP3dHU0A1tq8+knGxOl7awCmF0hyf\nQXhaSPMhM9bYO1K4EhuQOv9iKnPpWLu3RdeAdiPQC+YZpPu5gqN9Y6amsdlf\nd6feLRo19mt3RAKdsjHOaNNNc7oqfGmQ45Ms8Li/D1NY08A9f7knLsoHWfMN\n8euM\r\n=4aqe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEMfRbn8eFSCl8IMB0u9T5BjQ3yVA/fU1gIbQ0B6d56AiEAg8RPzud8qL3y35kJEvnfmM7gLvARlr2Ypu7OKwR0WeQ="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.20_1576571930024_0.44100647999051446"},"_hasShrinkwrap":false},"0.19.0-alpha.21":{"name":"@react-ssr/static","version":"0.19.0-alpha.21","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"bed76d4f9df9d93f081981a47a8f083bbab490bb","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.21","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-4SWpbScMjEObJloM6uP2TZi49Lo/gQe66WU9sSO5Gs4Dv+ToBkGP3NSI6H1JzmZQVpf1I07lPo8TChEE14J5AQ==","shasum":"3392f7656a38815bc3331716bc7c79d847832a2b","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.21.tgz","fileCount":31,"unpackedSize":261080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+JUFCRA9TVsSAnZWagAAQdMQAJRsxWX+i4yvn0AMTP80\nbssTj7txU+ZfoCNsDscYFyY87XrNa8+Zi7FJTR7/K/PDMeTx8qiEwTigjKhJ\n7v/MzwS3smP/508U9RXS501ebc2LO26r2vL51maCTOfbGPuDMac/5xWMfT0C\nbU2KxjJ+Gz3/Zy73qASFHaiJlE4+yxfbW2CS80rfGcyjhFI0CFCwxdvwliE4\nMbO+vw7Rqfai3ucPdq3pOc9s+EFI7Oj0deiBTAT7yc7LaPf0LrrosbdwNRzp\nbmKAbB+Bbg0pcv25TlLVdaWZi4CSrdElFoamBjiVKvzLoV0C60Z7Y9slhN2y\ndfHGzAoSNlC3PGyBSLBHKcbIBOJxrRAlLCXwXZUJf/mlJ+XhonrcqYmEIJ9M\nwGUHKKENS+LMEPqw75pHplDYMNNZTdpL/TVyMgAOZo1KT/vXE+dLjOEz571k\n0x0LK/PkrZo4QSBosGKW6sYfKxwYtbQZD03xMcpbEn9Jg3xKj+FfUaWfUZbv\nmt4tGRjVLvOP6yuobflQJoIEbxV8ZSa4ESymg13LgWQORmI1T71KbcOQomkZ\n1tkLTHNZFNkLQusuaIvlG/NUtPSAxm8VeY2LSC+atq7YYGYwqVddLi1zkc1Y\n0DCF72JYna8C9S+P0T/4x9K8kCsZQb/ig8UE/xLoVWZC3JHfR2Y9dHM5/55j\n+1CN\r\n=IlD7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAbFUrDKALv9HVxchJJzDKp9NdBDct9ej9z6ND5LSLqGAiEAiMQFatS3MQsmQwMuK5sZmQIhfirdnTSZ8/YrmN1I1eE="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.21_1576572165432_0.14615166833458626"},"_hasShrinkwrap":false},"0.19.0-alpha.22":{"name":"@react-ssr/static","version":"0.19.0-alpha.22","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"71199b034fb2626627d51d552f77a395ca57b5f7","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.22","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-5ulySEAKMLZ63J6Ycual29d1E7Kp8aDJMNrFH55H1GYxXl7krinaA0L4SpjqtqCedNSkUDp3FmtPncC4DtW8RQ==","shasum":"6b7a09c3878f0bd81b4f6695c56b6939919a82dc","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.22.tgz","fileCount":43,"unpackedSize":328260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+JYXCRA9TVsSAnZWagAAkNIQAJEdwhrg0uvmvMLqtmSI\nnoqF5d6LGwUf3ZwgIKRmJwvmss9m7L1lt/4SqDA4CaPe01d4bQPUMZDEhMFy\nmdskQf8CTZsJeNFPWBqWeOPR/G6KUYzfnZudWs2ROAJi8dofA569a53Clhqg\nWDxdKmco0FD2sIZN/VPYq/iJMm4SzxY5aqInJlp0utuWNdAuPBl2PlMDpW9V\nlOS8Vr14zl13m/g88edaX3nDNjJ4Lh60/JcckqC6OkiZUkWYowtJD5Uznafm\nCt+qBO/tP4EUlKz+X6d4SBnYvOLthIFravUAnahFsceENX+b8k7nkesOyl9Q\nLT5V2XnnN1GUCA4mI239Wrmb5jAOhZB64WyRBf3femMipiy7wLmTDIfEIwI+\neLsO0csdqd4ybS9byJJNUni7HIw3d8xwxpe54qqKto2J4iSU1W/VPQRQpOa9\n7ae653lw/o1i6p2twEp11hC71sppLgxqwjR5H3YvQ1afW5rkUzxjwDtbekN/\nfFlz/aQaZm/9GqUGgul1ZfD5WS77CUZlAgQFoWfHOfwVH+9Hf9Q9TVqi6jfX\n5+OyvKR4olMO27hsNVjvLGygAPl6MrJDGilBch32M2G3wo5GFStLhmdTQZ1u\nRawVZ+a+dShrkVbMCCjfrr+u6nQxcqlkDl6u9Z0gbA05zsGDBEDbzkX4Qysu\n+tJF\r\n=jq27\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRn5ha64ak72aZeVDwgOtM7EZhI8Efh6Z8evzEs+yx4AIhAJTxaC+wNQ5F1TBFbV95l96kQmKeNZTXbnXFRva3S/Dh"}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.22_1576572438801_0.5896752449276454"},"_hasShrinkwrap":false},"0.19.0-alpha.23":{"name":"@react-ssr/static","version":"0.19.0-alpha.23","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"92e2e99efa0f08d807abb66e15f91422a6ff7d15","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.23","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-jiE0tOol/3NrqiAeAZUcnQDaAxf6JZDJUMjvl1sqmlXKRyDTjFtaM32A1dyrKWPrGgCeiRXO7mH0hni7VcG/5g==","shasum":"5f3de5d13044cf92925a1ba42995f49a4a69773d","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.23.tgz","fileCount":43,"unpackedSize":329095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+KPVCRA9TVsSAnZWagAAqNEQAJNWIuE6Qfop65t64h/F\nexYL+1ceClO++tMBE0qSp8UgPy3GxO80OGdrBi6JcMtL+pXCsgV6Blkw2I6d\nXZQFgDw4EIhXcS96IwNNlwSFh9sUHZNeB5Fuj9myiZu0smbLW6HGTgfy+A09\n/oid0ey0b24+zlGevTS0D354tVENIDcOdUtE2eTEqS72yP9iPtAqoO4Tg7Gq\n4LOA2sPK0NiB9qgymI6elEsGU/GT5DIEYdlGgpNSwitjKvuOghL65VaeTs5H\nLzs6k/De55Rb+Fe70vqnc/6fqBgfdWCzjDsATaN8ZAKss9Gwxc1aHnDsdHvd\nO3P3hl4FPuFwegu2pAVD7Y0inN9iv9BoA0U0m3gM6pZJWSOGy6V9HBwuABIO\nwJ1lh9Krt2Y6vh1PehwCkjuchdc7jvk7Fq+lZQX+9Yd5u0s7DGSM75MFpKJB\nfNi4GF5MX5EG/ILJHxZjkK1EQDfJlRj3cX2GD1R1UXsUh891iAoh4yhb0dZf\nC3Jy9HN/GWhJt8hvOA09xCbQv1WCiktkaSbmKy7NycIKqA02V66CljGGpJY5\ncR01F+wB89VTYjDcekYfK4gBnbFcT/Dw/QM7kHUur+9qQITbiC+nuvv0optf\nJ7VHuOhvVSskGu5tUtirBpF2qzLDuL22p4G3eNJ5ery2cd4IbPoeg3rr1dGP\nFp4V\r\n=JLf2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMui8EOpJmRALxOHNQAG0cmbvYrevlb/QVeFGyT21LCAiBycPGJDxtZdMvCZ+a5c78fx4IYTycc9WMwIT64EFjOlQ=="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.23_1576575957056_0.7657807233261957"},"_hasShrinkwrap":false},"0.19.0-alpha.25":{"name":"@react-ssr/static","version":"0.19.0-alpha.25","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"23d260c7ac8dec6e7acf6070fc4aafdd79c931f4","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.25","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-94O05hnnjugKsUsywNcprgSAWotT2sLn1F4mzrdW7oQDgo9opBKVv55tbxPIZANX9g7XiEpCEheAZKmOAWwuug==","shasum":"90df022a16ded76a72c3a10cba6f583640625012","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.25.tgz","fileCount":43,"unpackedSize":329462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+KgCCRA9TVsSAnZWagAA+AMP/1fJe6uk4gTpJAwTUolB\neJ8HvpFJqIV09xK7Ka1jyPoD94c3tLqGMQ5wHD+Vfn2+I9G/wj/7xxV8PRtb\n3lSb8Berj/LNp4cKoc8xOwhMv+GUPPc5HHnC2dV8qTQxYe/uiauh7epH7cWU\nfXknfiuwKdjqELpU23nZAQZWBjNK4rdGEj5//t2SbM1OA3CoLJkgKLqIw9Jk\nhc3xYHc9vCKvk6q3oVOr1kxIfDvrw/OYe9sYmO0HOOufu9yUahKrbVz1tUuc\n28C86UnSJtA0FaacQ5E3zxXvTKtvqpvgOCndIsDXed4GBDibDHw+lfq/DbkF\n8SxEG/dYsm5WEzftuFuKc5XevsbAIm1LYIDfXr+5uImXl/wbkkwYd2qTNC0K\nLWTW8EANQiOjZuHpsBtntpHdTpwi4VpYvvZDgIGR/jZZ4IYSRS/VrUZv7kvN\nOGjA6ZNGsxCDMzDKUERBx2BbZgZ2c1CuI3wO0luyhOVOsOCrfoSsZDkloGRd\nfKtnKxafLaceNV2kHdS8gi5gbamVojjgYR9eHhZDXjA6MqCWDGeTk5tl3VUq\npJiNhku1ktHN7C7cN6RMTKBDowLHWn9kOlq20XFWsu221FFv21g7vSBuN18q\nUl4b6hN3mjfUOq4D92Nuz41u4DL/tTggbTGLsstNMUj4ESOwnYkfeaN2jkV6\nMUFO\r\n=036e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCraQV9es20tpAa6CVoTIIorhD/aic+8B4kyK4A20FH2wIhALqZfvrJ/4dpeEt2FWOzHD3NdNX4gvd8uq5DknAaIP4p"}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.25_1576577025938_0.5321729073661059"},"_hasShrinkwrap":false},"0.19.0-alpha.26":{"name":"@react-ssr/static","version":"0.19.0-alpha.26","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"7a8775cc9eb445d842d699dd413c2d83079a9899","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.26","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-kFUS0Y04WMgzoCrbLqHr5onu7pwAPYdPp/azZcpnlZRVDLCE0sY7kNoYfmLJdXracVMVI4sXljNRpOzv6EvrGw==","shasum":"aca16615630199cc464ca96ef792ee2cd1edb0bc","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.26.tgz","fileCount":43,"unpackedSize":329433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+Kh8CRA9TVsSAnZWagAAbDcQAJzaEsPH0rr65QK+K2rr\nwZlo6O4OKgAmvL5EWwX6u/9OWSFt74jy8z6fTYbuAKDUmezBZi0OGJtxshi6\nC6ej30Vyq0fZLHkSCmVq2YUHPuvfoT5yKJWfNwuC9xmxCJTWfO13z7GkcyeI\nvVfVv8o8+cJBXDzpBpLQkpYAVPd5/2L1tG/c9+H0EzVtWJTNfn0VA7EhEqq4\niYUmkSc9SpPTszTlN+0ibOVgRFfsMPiBeps59zC5Sz6JvCd7PHrk1CQCN2/U\noSQbmEhqOEMQneZWsxt3DREsCXLq4r2bHk0+KwsX9avYbzRYL8hlz3HPLNWz\ndiuCuI2NP+TiKfPPAgTBIuJYEZqHrOQHUXamjNqyF9UQCBeCAtvuAJXcikYm\nAkGD/hrLD03wY6NGN9phQC20KHS4Emrmqxluh3pvGXNcaBvaqRUudJAKOiZP\nh+O4jGuxT4vr+MPRuBRo1mp9CUL8bSc3RlycF0HYrgSajr2xvuNkqaK1vnKI\nk/UHUbpbMmL1SNIOvHYfRsFW/WJr9GKX7oZPggkc6BZzdfJ0PVhnhsbfTUP5\n5W5HpzU+ZT6dYmKZEMxFRlAYSx3JqNUTty0kjn4OzhjwNmOkOiRBUK6nuj4f\nVY2jwoNxesDoFPhaadj46I/Irpa8MOxHrk3ZmlbMgnPW7R7CrJAF+we8qhTs\nzvTk\r\n=ogBZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFJ3rRZAtmo6jOWG840quAWjYjrNOFIeL29jBSbh4TTAiEAvHfdtiP1cprXYXYM4+SFa6GRIXHgRZnydNFQsWpNxNw="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.26_1576577147854_0.3219651366386318"},"_hasShrinkwrap":false},"0.19.0-alpha.27":{"name":"@react-ssr/static","version":"0.19.0-alpha.27","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"99dfb12f5c8262141533a086c17e94fd00d7938f","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.27","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-Y+VQDnAUUFVoGg+0J9C98gs9sHZGTDiIq7bFzASk0o6M3hFgaCVW4p1oWUxlZaKU/fDHMBexWKfKlXxLDztDfw==","shasum":"600929e85213f62c2e40cada105384389437666d","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.27.tgz","fileCount":43,"unpackedSize":329346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+KiiCRA9TVsSAnZWagAAxrsP/1uRSfnu0HMP2f46g0Ix\njvbchaOD1Iu4NnNxPGId1cU6iIH658FqjKrEHL2+2HDMYOXtt6aMkWJCJQbl\nL+ey3DBaGKGqEwjcxSH5Fh6s4JoezjyxWZL0yMIpqWb+3+14W5aIi1m2AyFM\nbOTbPA8t39IdU4OYTtdQX1abDMdaPzQ33Wf+n7XEJvWITJBsveiuw/lWr0sn\nEl9R4pRB14I9ydSmkb4VoVw+v9bMkW3W3oWr5fHl7fyEERKG1lMyR2pBdohY\nTRN/qRTlUy/ug8v30utM8HGklY84epK/W8RXzC4WycECi/oW6ssq81LSvtUO\nsqLd5QUtlqGAHChh/zGV4EBMUvSFReNacGI0/qmAyU3m3sPCxRcPY2g17Of3\no2P+9OwRUyiLFuG57+tWh7co4bAPFzv0Zsa94H5T6/5SBwQ9B3sx8LLBeJX8\nQJtkZbxdTdkHrBIdZr5/FYQELaKoqAJ8TmWn6qPJCdjrFv4GMWJOjnQ04IK+\nRn+Av457x0PGijA/jbmbEaRgqrGAnSxyI3oEBB5062OwnXKABa1eHdrFJfWP\neR/Ggg0r+DUpwG6oZK/aabGrlgzdxoTqIX+5nlThrXZM/s4z1m0JKiz/jlES\n5mq9dvapWOcaHC2bEpVKMJCu63JG95gSygqoTJ/WzMAyiTqZ7HXGy5MFCdKo\nroRv\r\n=IS3Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTbLXC/Io2pAEFT7zwzuC55Qoy88BIMejGoAwxUZmDqAIhAMavl+K+7TpkSbK+rMsWcQWNajIIsZ4Q0n4k7QBP3e7L"}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.27_1576577185894_0.9159462891213317"},"_hasShrinkwrap":false},"0.19.0-alpha.28":{"name":"@react-ssr/static","version":"0.19.0-alpha.28","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"be1f3d45b58fc5cc44a8c7bdad67d15043578f81","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.28","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-2hTXDz8BZpZ3FeiK4AZyF2wrZX2aeP8pXdf7aK4CR3D1FPYBRzjDzvqTbU8uSvYid/tjAvq2EeLihsAc4IKSmA==","shasum":"2eebb8e178315080cc40a9c136eaa8a9a6f17c9b","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.28.tgz","fileCount":43,"unpackedSize":329365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+KmuCRA9TVsSAnZWagAAFRgP/2kSHBTUr0yhfojJnJf2\nwHdRdOnt0GGdg6nYqOFUVvXtJKcFtGLXyMARIu6yJHIhuIAeIcrfEHF8ygiJ\n+jvDiVC068PgwFd21lbHyMmSE0ltKrT+y7HnxzptULXehheDs8oVcWqE/3pL\nNyz2923VcS24DuIK68DLOvHENLh8Hqe2F2K9+wyUX0r2wKEI1OEVb8GPMcti\nwl2GYaE9SB7ZV/eSrlf7pNYIlBWAGfb5iOkVsD8qdRDSxalA4+mirq3I3WEN\npLi+/kvebMdB10NtzRFA+HiclB3EWQY9+4pdye12V3EQeE+2xr7flCgk30EW\nx/JMXcf+OcgH0MciEQ7l6DU5O0BO7+IgCo1acnG5ujDvYevtQFan+heA++i5\nDplJS2W+oba1qvpoO5kWGG7pwcmKQp2YRzBFlhH6Ll9nozVOB68ec7uH8ID3\nORuZy2wvgx1DmbdzLEnySYQyR1dyeEhxgvuI2PtHYG1j4Ns56RmJn0BFTQbB\nMv9oMh/M5YzxXn+QBkZJdUKYVh5lMomw17crTPGMk1aDkyqRtgDwhmKIKzkN\n4vzz9ADer00jXHO+kTphn9VubNX9uhRyZcN4rzrBmncg9cvQGLGQhDlswU8Z\nBQ5HIJ6Ei8hmgTrdTh70EvP2WiMfFAuhScxBjNTD782CPoUAatrLKQ4NKpyG\nu2QX\r\n=TySS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaTNl/osSTxN/G39H/hwyrSnSzkMHY6c64tok9MBLWPAIgYhx08S81/VF4l4IdnmCtsNdOGbqK0zXl0yUNX6FY3sU="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.28_1576577453745_0.10744345270640876"},"_hasShrinkwrap":false},"0.19.0-alpha.29":{"name":"@react-ssr/static","version":"0.19.0-alpha.29","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"828b3a01a9f8bf1152ddda1d05e5a126f4035bfd","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.29","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-pa0MDdZOGYUVS9IhfgiRpjANriVgeO2taQGxD1xevMpKGmTVImPq4luSRphqRDfJnH96055vFRTK4GmEmhcVTw==","shasum":"bbfab7091ac2ecf465ba1e7d644a8facef8d6f66","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.29.tgz","fileCount":43,"unpackedSize":329348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+KpgCRA9TVsSAnZWagAAkVsP/0tguA3Up/8n+ZVggscG\nurbDBwVeb5OFMwy4CB7gSTZsRLcKJmslDxACcok1mWzbG74A2Bxwow8Mg6z0\ngP6UJRknU3PPWqBWFKYATppwY3e/aHPxcPlzD1pUSV9A/KWKZHAaU8duVDY8\nCiw0FenJK4stZet495+sr7r4Ync0kYzKabrJIQ582XIqwVKPCJNqiGw3jCOM\nIUep2eOP2WL+EbEDmxg8qoLQvE4CY8QvA5DC71sPEU5NZcbnhP0NknmKyBcK\nDyZvX6w+BNZsQfNRTWpiHdgodXam/7U7B0DzO2JjOepr1r213g9+YinGSfQE\nJNVsy2Yp1WxSu4uwzMjs0co1v32ouKAeDiOdW6mX2WSY6lOkmL/vPLZvlqFO\nrRc7h6zK/ekcEmqcikyjz5bSqWYM8CTtaMshA+bC7dPKidsHCLdC8Etwwxll\nUW+ThHWHiYheNuLLBR5izpWUTy534EHumtiHZZ1ZKEa/0jvO3BARKrw/Uc4q\nm3aqgCDrDw692Rcts96ZS0eTFDJwitz7/BR6AB0X5NKCwIqRoPaZHE98xJbv\nTHMw1cJI4bvmmSUlH/ooO/9kVUI7CRpRCNfYDCoTIrJxk8nX0ZTXtXAYu799\nKsPp08+nd77LgdufhArqyNPZ8ktvp5QbdJ+Ia/QqYPv1IbVvTjdTzX5Odm2T\nO9nY\r\n=NKEY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIhs1xWqmXH2rgbbF03eIZcRmUVVu92yRMHLs+uMPWNQIgafSXeQExH5dJ7xhO0iohHRBYEt06IBLb74VIw6JAZ9A="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.29_1576577632390_0.1741784914993627"},"_hasShrinkwrap":false},"0.19.0-alpha.30":{"name":"@react-ssr/static","version":"0.19.0-alpha.30","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"259fb20c8e11252c2c38b298df8572b25ac8b20d","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.30","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-00sBjPVOWGzxbb+RoAWK6Ze21LEryYpX6eqV4OMR52/xzSxxX5BqzY3iRXbo8NlQ6FEKiN3/IE3g+xjcdLwJSQ==","shasum":"56bdd537fa347bff8ce8ee33a0c3338ac5ae56b0","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.30.tgz","fileCount":43,"unpackedSize":329410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+KsgCRA9TVsSAnZWagAAXN4QAIVa8s2rE84Zfl6W8bPV\njB1UGAG8XPj2W1ME5g1PsONYRvLiSlwsHSoqeLUL5eD8sCmsAHbOeG0N8EVc\nSaz2aiSt46MnZcqKFkhXGpGgkYcmpR+hNmqvYesmJxljxHuSXK/+oqIFlKpe\n7NlgY+85dH9r4lZ7PGY7iveYHIpftUqoGCcNpzkpZVB6iQ4/Im9ZK0ksfGZv\nJFZ/6UEwkYYMS+17jvc/bMMGkFMjukrOr97cotC9Ujn2VZw8mjNXCDrOLkNn\nyTheuSsNvA2rMiH/cXzmlMHjudYhttzIWKPhfhqKBUHN1l8rVUGl8KTgdC14\nQjqSAyMQWBz2huK85cAE9X9SvjXqcb3QwN8emHjWl+Ih6O21xhgx5c0TL3Nk\nQE09H7q/uvQLptZiqr/LCccslG4c11eTY0yplI8YDyMPqqLFtjXfItxTL3pJ\ne4qrSDDjOpsQBy1QXvFIAFGF0pWsm4+1Q4C6hikkZZErimC8bYKMaOByBmvc\nzs7d7RZjXPY/0NgVopxAhoK6bWCzjvxYZzxq/ad8as4/EpeiBG5XEe2KCr9o\nRvutpGURJ3i6wq0OOEeOtYWUZoD8WXJFhMyLHseWc3f4zRbZ6WuadGHyKQRE\nAqsUyI2KbvyDxDXIFS6BjxYbRmESsz03bbfw4n7v3pPyy4ga4KHY2rDOIaJ2\n1YXv\r\n=mzGO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUgLFi3L20Gg3+wMttCOVMhml7MNvoCOX3ikuFByXIzAiBEbpCtAhkc5ASCyQDCeifnpw06sJEhhpGbdghl3GZ46A=="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.30_1576577824406_0.3301337092677814"},"_hasShrinkwrap":false},"0.19.0-alpha.31":{"name":"@react-ssr/static","version":"0.19.0-alpha.31","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"c3eb83a41b958f51928e1b0173cc5a177e32d814","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.31","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-su5q7bjCqZchYGa1aXnJqrDPLhzF1tmtKO0eyU6R2/MLP2MFAIL+hG4f6+LmsZfF6/XN+thmxkHGhk9XOUTwkw==","shasum":"0cbcb32745a74cea94f2939c7fbaa909c13cb5d9","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.31.tgz","fileCount":43,"unpackedSize":329455,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+KwWCRA9TVsSAnZWagAAnWcP/R6Mmw3SfTpM36wQ+QJU\na5QagekkPFPfccRFPiLAitTOFt/3llp3FsRU+JzVM7gBRkNSSfmOa/zRUicf\na9jAHHUSnXiD2bxfL1IM+brIoaznKwqnvn4y+9x0JiTMUP9/WJCc3TnSSe1E\n0AIHqDYa32kRIHTgnhX/zgI/bAQPPsThV+sS6bVKfD+0zCW6bXKiU730fjA+\nkp6pqUHXcb0DhWhpMjUosgGEKj+w3jtT4W/cqosj3+Q9zyQoQiCZs85ZtoR0\nYatcBUEfIz8RMpyofdYyGgcS7C2d7RLMSgzTZh8kc3iLctorGduFsM+JRH2u\nP/j9oTkEmASm+BfbaNySdAwmPcv8Lt80ecJ/Io/1Yx4h58/pCL31CloO54tP\nkuLthfzMPrqIg4ID64yBtjorCiMPYTqk+YlK6HpPKzz3QdNfrtz4DdQhzTNF\nTCLLDU83zTZTybYeZAsHrZtMfc8KZlruQpRO0JDVg77ffyFsflVzWjejZsyA\nerM2K4MJenQ3t95u6+kIidKLkwfY32jiN4pIRUloExWIJ/QSDnEW246XmloK\nri4CH1JW0Ro1a/FMUw4Jnc5Uph1bWG1OA3zWLuFKzC0QCNBD93Rf63LGwmqB\nV1+hXr/Xz79MEV+b5jXxwoWmMjxJfvfX6Z++ANuSW4XkQjF42mOs885U3RsK\nxYXz\r\n=fQqn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIADl3J1eMM67lh1ZYajKW4uPR1OGWPbwlehpcBeg78/kAiAWzLg3tAgvTKryilK3Ex1SUuXF7+msAkhQsc51tqi6cw=="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.31_1576578069700_0.742758534045254"},"_hasShrinkwrap":false},"0.19.0-alpha.32":{"name":"@react-ssr/static","version":"0.19.0-alpha.32","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"0393fa612ccb090ea2f997abb8f0bf4b2e600943","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.32","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-/0FXWaRItuAGHS7VZkON7FdWYVBlp6QfJnts9F/zGqKmim2Hq3NjCvlkb363dfVZS13033EDJZ0+ByE3oCJvQg==","shasum":"534dae88f57af1842c617d4784204bee789a2cc8","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.32.tgz","fileCount":43,"unpackedSize":329473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+Kz/CRA9TVsSAnZWagAAHEoQAJul5Sg3jb+Vp/MROmkO\n/r6XeFh5mMDG0BvLbA/HaBYOO1l7Qa2QbjIBrog3muRON6O+HIkIk9aN/c9r\nsP1f/KzBseDeHVfEcA7e2yehWqPQiRm8VBwoGk05aXP+Q+eIPkxUTyDFKY9U\nyNY4WsgS/hbWIGko68FlASi1iWMjzEDL0oU621dhxk+DTczRyRpQNOVPAkp+\nSbYzOvCDUzByCXTPKu64s6uI37aVrQB/5BbjomrbmEvgRw5NzKoauStcxWe7\ntBZdvdRVmF/J+DLxY6ZV4oySzq3JEKytOXtt13GP5YyNZrHlDterHzs/xth0\nNLBlMav0KmSHwXkhCkk3Q2bui7MXA14PtRJmHiQo0YyvbUOris0Wzxeo1vc2\njxGvNaJbY3HRMTT/IkjStFRdHaxWCzfCBCRIHFCG6MF47+GpBPfTKUo8KCFu\nj3Ui1ViumSgZH/gduNuDUyGV1AXakz/VQjcL0glhnunLtLjGHS1o9mBlnkCp\nAQqk6mMQJAqTOWAqp3gGASnh84gQMA1Y63pNJMEcr6eVK0HdcEn+kbyWCE3g\nMD26NGRisiwEteNMJ/uzXGqmay0/tHhn5dN7pWCTM2l6EBdtTH97Tpw4SO5z\nKqAanwvr5Al7AXW/cnIYsgXThlhYHTxHG4DHUQghpfuH4gajGH7A4ojPD/7l\no4+7\r\n=i9fT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXBbL3lB4dG2zyxwfuijXqhmDqxR7yOloxVxX/pT3LBAiAJOw/NqSNYby6Gt51rXm2shfuSalZpLRiToh0jKWiCAw=="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.32_1576578302649_0.602488912246675"},"_hasShrinkwrap":false},"0.19.0-alpha.33":{"name":"@react-ssr/static","version":"0.19.0-alpha.33","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"2f73a2ab58a6a7788904f1366670a39151d91a81","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.33","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-/6jEMP/qVdqazJ0z3cCUZ5bo8rLjLxAgKN81ywZitSa5w8lhZV8yL5y3O2q8oixvw/qtR7z/9lHK3NbQRHO9zA==","shasum":"d55691cddec66126bab7c66f448bc42cd459ce1d","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.33.tgz","fileCount":43,"unpackedSize":329477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+K5GCRA9TVsSAnZWagAA8/AP/jt91KcCCZ1hiIEk28gu\nL71Kfl+gVH9h8wtGqb+aCLVZodYV0PxIUaRon3g4neQcCw1+epb4YngL+2Bu\n9I2ktrxBtmnV/TO+jyCC+39kUNMJlkmb9ZrH962BhL91D3OJhwozD/Q7beDn\n3pYCKIuTvaTtSIL9y4dsDhs8NFxGcB4WxsjB716591OxV1iwNrBF8ip/nc9z\nUGiE30XO8cEzp0tjJGqxRcCLHaCwDK8EVLl3G4JqpA7VWtsA4OwAe8WEBLua\nMwko8mHuDJoHQgUflQCOUv5tFVKq7rXorl3Xn000qkNYWx/4J/BUxMw36zRG\nOXWBizlN64D5fjmhRUoT5gwG57KuVRPkzAoogVB90IMWQgBeGdjHTVT55Jrq\n+cmNpejtkrdYB6jz0pdIq+8oWNGfKmbGuJAtl9LDUkktd4I5Cef44JA4eAo8\nzZQq6chnM/GUi1YVlriint1gG/C4e8Om8O9g6S8PoLD15ubmKRgiBSPpXSJA\nNA0ToepF4ROS6Qbrv3ouzorlmB+ealJQyUt8WuCfqqoSLKArDxDcSEZ2KpZa\nIR96yQNy4Qo9VHy/442nmO1mM2KaFuQaZohmRlLMrORvhFFowurafmR79FmV\nOgPXaCIlJ+oWYvCOtEVGsIn49JJVOK9lc+TGjjExT5Rizt1wULP6xUgkYsVJ\nmgd4\r\n=OMR/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDvNAzma/TyWm9vPoPUzEKOxJIF5zXAZSTkX2uQkg8AUAiARrFh42qXfTqx4K7SrNQ1l8bDWKS8n2VXGHff7o1qfIw=="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.33_1576578629826_0.5002907841135422"},"_hasShrinkwrap":false},"0.19.0-alpha.34":{"name":"@react-ssr/static","version":"0.19.0-alpha.34","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"dc96d45b15d9dd4cb6accf0a1abaaa551cf62742","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.34","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-3+9rFlLrhredJ/+4kT1s0S7+IsEIa6F9G5Eq25B/f2VV4Zly/UH4AfHrb050yiJh8Gco9DF09wqNDIS7IcYJuA==","shasum":"e898119cd69dd02a7baf5ef95d31e02c135ff95c","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.34.tgz","fileCount":43,"unpackedSize":329433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+K7qCRA9TVsSAnZWagAAY84P/1vxChwArnOISPhwegiQ\nhXxU8diG+tJCKC8U8C2gw+GBcY9fr6kcM08D607yLZSsDaAWnCIKWgafizJu\n7MTAERhuiRz+G+Vg6x93vGpOtIiMnBAC5IDELmKN1pep02iN5Gnpj/VJMkrB\ngiUZZ91PKSPOiDj4Rvp7KSFX7/l2iNJXQGx/qzg7W2ddnfKUgRbS8DzAxwv0\n+PooUR8gThIJdcfLGs/CCirvPvdnStLqKL9C78j/3hUwHG5FRcKeAKXHqeKM\nTRvN+ZOYSQs1VH9vo50XoOYWqPUkSIC2q1VizDxyyPazZEsDNOkE5GW1Tuyq\nRrW18cQKHW1YUibPFktteNXjAvw3pD1xKEvHnOfV0qu7tJToM0BCb6Z2oOT0\nXcKBMjmYsv2mCsD6p+bemHX79BjmVSAm+RkKDe4hK5PmlETjWTmixFQRIfJM\njpRHADp0gWVdW3T6aic//s2dMCtrw/fMqTqfddaNC4ktWg6GjuF3mKRVDWzG\n+RYQbpZQdMmzyLWbMi0eZu9JETV4q73D7KRlV54Gs/aerb2nH53vcpEpo77T\n73peiNMX1LiYxzE7kGuo018BDtOQP2f52pO6/f/eFXpZljD2lUSO2KtjXNUD\n153RZONcwSoIOflAenc/nBgerUPYm9kfADia/6r0Ia5yHLX57Unbk/zQUuPL\nXNbv\r\n=9/3u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8yCmUPi9bsdGYMDrxMwmZb4rORS9xwDbD26aqRcCAkAIhAL4NBAFeAbjljcIO3aohEWdZc4FpHKdkpHQiNlDhzYV6"}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.34_1576578793660_0.5287870593242263"},"_hasShrinkwrap":false},"0.19.0-alpha.35":{"name":"@react-ssr/static","version":"0.19.0-alpha.35","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"f65903e4aae6c5bc0fa8f4ac48ee8566d0060edb","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.35","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-bqWtoxOlDLLktiCQ+STqL772oFxBBMJPwO6onkTfYCOfZj+Y/keXzXuTBKRBRBZ5mYpWrKN2r6Z7h+mRaiAl0w==","shasum":"e70b47da8afac3902019c7aeb1f2b3284b5d35fb","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.35.tgz","fileCount":43,"unpackedSize":329638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+LoECRA9TVsSAnZWagAAzk4P/iCmMwpooKUX+kQJ35rH\n1nFXaI+hC6WTuSlxxzmHSEfClXlzGHcodLO+SjnDcUoJyjJddgrMFid4kY5x\nJevbhgoy5DO+5heRdsuL6XxOt3MOg1BdsN6fR1109F7mwyveqDxG6kfo8f0X\nLH7FxZcBNWGBr4910PVzkFy4wO48qGP3VHKddBfXaPh+6l450Yh6UfNVcYZ5\nTVG3OfjN2c71D9W9RzO8ZNg6SdcLAthwFvFtd3tl0khzbwF4XCVzIA6c78jk\n2Tzj4UiYHcyJLLdZ2Zu9+FSQNKGRh1JwQOjyAaijqH54TK1hfjZT+JFIcSTp\n52BiDgwak/DP7zW8ioUNgJVbnNxtpgIrh6dEHrD2UTEA7rAbt4ApOFl8m1xq\n9AhF+sFRVvZJByiFhE+zVsnX7348zLOc+1sB9JKuJRSZCtQydU1HYPBOchui\nldnmZpPO6HsL6pazA2qMOg/+kFUl8z4t2JTLCX5AxqOT4GDX/hQlj46vKfC1\nuP9kti+vQiij8dDhunJQJ7ol2DdZYqlLDVKrnGHHQGvPyzkzbHKz8oKpq/IJ\ndjCoEUFBHO4IsDGSTh+SzxiPowqqHQAWmkCD3hXRpkPi+/GBN76uZJ4+w+U6\nYYIazMESIAVU3V9ThXR8u9PEEyA7rUxv7AXnfTwdIf8NxwRZlspYzjYdlc0O\n3LOR\r\n=xRE6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe36iBEAWTNaUMUce1PbzL2b50Bh2M2afek7gkrnD+nwIgdnjGR3S/qPeMB9p7ZE+mC/95HlQ4qDDIb8aPypjbQgE="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.35_1576581636174_0.738267800878111"},"_hasShrinkwrap":false},"0.19.0-alpha.36":{"name":"@react-ssr/static","version":"0.19.0-alpha.36","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"946c5fce830a420de29d032fbea722b7d5bc7f14","readme":"## Overview\n\n- SSR (Server Side Rendering) as a view template engine\n- Dynamic\n - `props`\n - Passing the server data to the client `props`\n - Suitable for dynamic routes like blogging\n - `Head` component\n- HMR when `process.env.NODE_ENV !== 'production'`\n\n## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/core @react-ssr/express express react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"start\": \"node server.js\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`./.babelrc`**\n\n```json\n{\n \"presets\": [\n \"@react-ssr/express/babel\"\n ]\n}\n```\n\n**`./server.js`**\n\n```js\nconst express = require('express');\nconst register = require('@react-ssr/express/register');\n\nconst app = express();\n\n(async () => {\n // register `.jsx` or `.tsx` as a view template engine\n await register(app);\n\n app.get('/', (req, res) => {\n const message = 'Hello World!';\n res.render('index', { message });\n });\n\n app.listen(3000, () => {\n console.log('> Ready on http://localhost:3000');\n });\n})();\n```\n\n**`./views/index.jsx`**\n\n```jsx\nexport default function Index({ message }) {\n return{message}
;\n}\n```\n\nFinally, just run `npm start` and go to `http://localhost:3000`, and you'll see `Hello World!`.\n\n## Configuration (`ssr.config.js`)\n\nHere is the default `ssr.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: '.ssr',\n viewsDir: 'views',\n staticViews: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `ssr.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `ssr.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `ssr.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `ssr.config.js#distDir`\n\nThe place where `react-ssr` generates **production** results. (default: `.ssr`)\n\nIf we use TypeScript or any other library which must be compiled, the config below may be useful:\n\n```js\nmodule.exports = {\n // dist folder should be ignored by `.gitignore`\n distDir: 'dist/.ssr',\n};\n```\n\n### `ssr.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\nA function `res.render('xxx')` will render `views/xxx.jsx` or `views/xxx.tsx`.\n\nA working example is here: [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n\n### `ssr.config.js#staticViews`\n\nIf specified, `react-ssr` generates html cache when production:\n\n```js\nmodule.exports = {\n staticViews: [\n 'auth/login',\n 'auth/register',\n 'about',\n ],\n};\n```\n\n### `ssr.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**./views/_document.jsx**\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/express';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**./views/index.jsx**\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/express';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
{message}
;\n}\n```\n\n## Examples\n\n- [examples/basic-blogging](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-blogging)\n- [examples/basic-dynamic-head](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-dynamic-head)\n- [examples/basic-hmr-css](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-css)\n- [examples/basic-hmr-scss](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-hmr-scss)\n- [examples/basic-jsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx)\n- [examples/basic-nestjs](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs)\n- [examples/basic-nestjs-nodemon](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-nestjs-nodemon)\n- [examples/basic-tsx](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx)\n- [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n- [examples/custom-views](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-views)\n- [examples/with-jsx-antd](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-antd)\n- [examples/with-jsx-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-bulma)\n- [examples/with-jsx-emotion](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-emotion)\n- [examples/with-jsx-material-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-material-ui)\n- [examples/with-jsx-semantic-ui](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-semantic-ui)\n- [examples/with-jsx-styled-components](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-styled-components)\n\n## Starters\n\n- [react-ssr-jsx-starter](https://github.com/saltyshiomix/react-ssr-jsx-starter)\n- [react-ssr-tsx-starter](https://github.com/saltyshiomix/react-ssr-tsx-starter)\n- [react-ssr-nestjs-starter](https://github.com/saltyshiomix/react-ssr-nestjs-starter)\n\n## Articles\n\n[Introducing an Alternative to NEXT.js](https://dev.to/saltyshiomix/introducing-an-alternative-to-next-js-12ph)\n\n[[Express] React as a View Template Engine?](https://dev.to/saltyshiomix/express-react-as-a-view-template-engine-h37)\n\n## Related\n\n[reactjs/express-react-views](https://github.com/reactjs/express-react-views)\n","readmeFilename":"README.md","_id":"@react-ssr/static@0.19.0-alpha.36","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-eBjwxZp3UV9uXOPHQ+8QEORDICh/4YReTrfqgK/fpjGcp5so5BmLD9Oghhsqf3gl4AT/6SWqZKqQnx7nfBeWwg==","shasum":"c6d1342475a93b6189e87d34444c0381555fbf11","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0-alpha.36.tgz","fileCount":43,"unpackedSize":329632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+LrOCRA9TVsSAnZWagAA0wgP/3PWhX+TxaocIjgjm8Lk\nrXlDu0oJfJNfVscJEZsQiiIRLZOE/v+D4jMn10f8/n+SZMeiaEKqnanLstAo\nshzccXavPa+YcMzKuLyLEB/VxJiBfdPcfnd6IvFR81yX04M1+FAPI72J8Clr\nrXEbB1fs8h7WwCb/QNfKUkxJEbKQH3UNsmmkwTUhYftfNiUWQbYRgfA7yA6k\nat4aspRyNd3ovPaRE4zEUSrb2BJg9a2/ZStBW22jJl+rf2+4WQ05klRYIIwq\nGIOMdtU8AN7iMzSsUai8Z86ykBvl/bYfy3xIXnZcjjTxU6+QPLoZqmBn1cPF\nwiUy/40JqNsWyvQ5NaabRUv7ji28JV6UQOyzUM+ubTAVg9OUdj30YdQNimVV\nsBb+L6fBuxVmKSpX/yUc2Tsaw7zy3BaerJ+WCjFZq93cMz1EKskqtKGNfSot\ndnQTX6HabCDv5jcImxP6XfSQeqFiJPWqkCnGMULnF2uy+qKaUEYn9p9hvA/s\n7RYwA6UcvIW1SlQfpg003mG2C2yB72EL3gnLAqapLx/3C4X0Vv5udHCiBITL\nhs0ROmSBXaxwT/kQevnNE5rdxKrAGhvCCCSl4Vt1keqo0AU/SaDm2oFVvtUg\ng7FNgWngy/fRBes6cJ+JhoOdpRaR6b7lwD2jouKpJFYt1P8x+dg72TtGlIcb\nXlLQ\r\n=E4hp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDE3OuQO3sgzyOcPGIrBeEtDbL6TZRySyX92v6vtH4mjgIgeFVnCtmuK2GwFKXgtKLbngSBt8+tZ7LAsimTo7qz9p0="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0-alpha.36_1576581838005_0.0741974897266382"},"_hasShrinkwrap":false},"0.19.0":{"name":"@react-ssr/static","version":"0.19.0","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.3.2","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.0","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.0","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"41fdc1f6aa9964a82b228f83d11e8a50f50774a6","_id":"@react-ssr/static@0.19.0","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.19.0/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-VtMAd2InmyJbzEzEv12Agxk8fLvwFBba03ahBG4Buk7rqD7z05Zjxi9XpHpcdL/joUe7Zma5kWDeolNDHXN1Jw==","shasum":"4010f2527d21ccd7c13c77625e99ffbd477f1ca4","tarball":"https://registry.npmjs.org/@react-ssr/static/-/static-0.19.0.tgz","fileCount":43,"unpackedSize":328337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+MnBCRA9TVsSAnZWagAAtwsP/jsvFng3Cd17ucvitXLs\nORE014CTOyEQY4D4O5Xv3TafTtFiGKGzxAvrJnTrR92E2YQw/WA+Ww2xxzBf\nRV4YR6F3bEZ5lL4MyLwXDvbGwnwBIFVqLD+l8Iu52pkSSgal7VvZgFwxFUel\nRdImOijG+8rt3G0duaqKB3k90BgJ7hZOdQz3JX7meaDUKxkwTEn6IFPHNUTJ\nCnUy2MNlHLzVlAeS7VWNDlg8mZdM9XdYlmu0qTjLA6WtzpTAWdVBX4glZfpy\nCVzcioLxfOxS/A9GydK3z35q1i9eStl3VUHweggG1g2kyYcKZWG8eN6J4mFR\njI0EIzi7SnuWduEWSve/v66olAi62crtWatWtT38i8PgIO37rc+DpsmwpAnN\nFOTs9e+QOecZY+9BIFoF56YDR3kA0/2NHWJaq53XkrSIqzuheg6QsEqwEW8Q\nQE6TEYqGfZoBxcYwZyQtIUC+rwkH4eOJBmKtAfm7k8GvMBOnUd3f+qKFLQAX\nIqUdRaLap4vqJ4Qbi1pHugXalHmZCpiPP7D/9BoR19tEbCMzQGt74va3/lQb\nfSypw30pfcE2OdblSX6R2QlVFWF5SLpeopCSEWFqHeluL/XIjnl9NKtz8kM+\nf6dSppwmxEVuG43vLh48AJASftAEiImoWtuSi9xGY7CnejFLhAKj5eyuAznH\nda7/\r\n=i2cY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICS9oA0JR53dl6INSAWjfts/z7pymKHSb/usgmzVmNP+AiEAsjfbwugXKZtIm6MYb/EmGJI8ys9Hxe93NEcf0HX/+SY="}]},"maintainers":[{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"}],"_npmUser":{"name":"saltyshiomix","email":"shiono.yoshihide@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/static_0.19.0_1576585665042_0.41874731768967544"},"_hasShrinkwrap":false,"deprecated":"Deprecated: please use NEXT.js (https://github.com/zeit/next.js) or express-react-views (https://github.com/reactjs/express-react-views)"},"0.19.1-alpha.4":{"name":"@react-ssr/static","version":"0.19.1-alpha.4","description":"Yet another React static site generator","repository":{"type":"git","url":"git+ssh://git@github.com/saltyshiomix/react-ssr.git"},"author":{"name":"Yoshihide Shiono","email":"shiono.yoshihide@gmail.com"},"license":"MIT","homepage":"https://github.com/saltyshiomix/react-ssr/tree/master/packages/static/README.md","keywords":["react","static","static-site-generator","server-side-rendering","ssr","view-engine","view-template-engine"],"bugs":{"url":"https://github.com/saltyshiomix/react-ssr/issues","email":"shiono.yoshihide@gmail.com"},"publishConfig":{"access":"public"},"main":"index.js","bin":{"static":"dist/static.js"},"scripts":{"build":"rimraf dist && rollup -c","prepublishOnly":"cross-env NODE_ENV=production npm run build"},"dependencies":{"@babel/core":"^7.7.5","@babel/plugin-proposal-class-properties":"^7.7.4","@babel/plugin-proposal-object-rest-spread":"^7.7.4","@babel/plugin-syntax-dynamic-import":"^7.7.4","@babel/plugin-transform-runtime":"^7.7.6","@babel/preset-env":"^7.7.6","@babel/preset-react":"^7.7.4","@babel/preset-typescript":"^7.7.4","@babel/register":"^7.7.4","@babel/runtime":"^7.7.6","@babel/runtime-corejs3":"^7.7.6","babel-loader":"^8.0.6","babel-plugin-css-modules-transform":"^1.6.2","babel-plugin-react-require":"^3.1.1","babel-plugin-transform-react-remove-prop-types":"^0.4.24","cheerio":"^1.0.0-rc.3","cross-spawn":"^7.0.1","css-loader":"^3.4.0","express":"^4.17.1","fs-extra":"^8.1.0","got":"^10.0.4","lodash.escaperegexp":"^4.1.2","lz-string":"^1.4.4","memory-fs":"^0.5.0","mini-css-extract-plugin":"^0.8.2","node-sass":"^4.13.0","optimize-css-assets-webpack-plugin":"^5.0.3","recursive-readdir":"^2.2.2","sass-loader":"^8.0.0","slash":"^3.0.0","terser-webpack-plugin":"^2.3.1","unionfs":"^4.2.0","urlsafe-base64":"^1.0.0","webpack":"^4.41.3","webpack-dev-server":"^3.9.0","webpack-merge":"^4.2.2"},"devDependencies":{"@rollup/plugin-node-resolve":"^6.0.0","@types/cheerio":"^0.22.15","@types/cross-spawn":"^6.0.1","@types/express":"^4.17.2","@types/fs-extra":"^8.0.1","@types/lz-string":"^1.3.33","@types/memory-fs":"^0.3.2","@types/mini-css-extract-plugin":"^0.8.0","@types/node":"^12.12.18","@types/optimize-css-assets-webpack-plugin":"^5.0.1","@types/react":"^16.9.16","@types/react-dom":"^16.9.4","@types/recursive-readdir":"^2.2.0","@types/terser-webpack-plugin":"^2.2.0","@types/urlsafe-base64":"^1.0.28","@types/webpack":"^4.41.0","@types/webpack-dev-server":"^3.9.0","@types/webpack-merge":"^4.1.5","cross-env":"^6.0.3","react":"^16.12.0","react-dom":"^16.12.0","rimraf":"^3.0.0","rollup":"^1.27.13","rollup-plugin-auto-external":"^2.0.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-terser":"^5.1.3","typescript":"^3.7.3"},"peerDependencies":{"react":"^16","react-dom":"^16"},"gitHead":"069663a17e44cfc95a0991378585bd6ffa774752","readme":"## Usage\n\nInstall it:\n\n```bash\n$ npm install --save @react-ssr/static react react-dom\n```\n\nAnd add a script to your package.json like this:\n\n```json\n{\n \"scripts\": {\n \"dev\": \"static\",\n \"build\": \"static build\"\n }\n}\n```\n\nThen, populate files below inside your project:\n\n**`.babelrc`**:\n\n```json\n{\n \"presets\": [\n \"@react-ssr/static/babel\"\n ]\n}\n```\n\n**`static.config.js`**:\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n },\n};\n```\n\n**`views/index.jsx`**:\n\n```jsx\nexport default function Index() {\n returnHello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n### `static.config.js#port`\n\nThe port of the development server.\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/profile': 'profile',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n### `static.config.js#port`\n\nThe port of the development server.\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/profile': 'profile',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n### `static.config.js#port`\n\nThe port of the development server.\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/profile': 'profile',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello Layout!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component **anyware**:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n
Hello Static Site
;\n}\n```\n\nFinally,\n\n- run `npm run dev` and you'll see `Hello Static Site` in your browser.\n- run `npm run build` and you'll see the static files in the dist directory.\n\nA working examples are here:\n\n- [examples/basic-jsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-jsx-static)\n- [examples/basic-tsx-static](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-tsx-static)\n- [examples/with-jsx-static-bulma](https://github.com/saltyshiomix/react-ssr/tree/master/examples/with-jsx-static-bulma)\n\n## Configuration (`static.config.js`)\n\nHere is the default `static.config.js`, which is used by `react-ssr` when there are no valid values:\n\n```js\nmodule.exports = {\n id: 'default',\n distDir: 'dist',\n viewsDir: 'views',\n port: 3000,\n routes: {},\n publicPaths: [],\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n return config;\n },\n};\n```\n\n### `static.config.js#id`\n\nThe id of **UI framework**. (default: `default`)\n\nIt can be ignored only when the project does not use any UI frameworks.\n\nSupported UI frameworks are:\n\n- [x] default (the id `default` doesn't need to be specified in `static.config.js`)\n - [x] [bulma](https://bulma.io)\n - [x] [semantic-ui](https://react.semantic-ui.com)\n - [x] Or any other **non** CSS-in-JS UI frameworks\n- [x] [emotion](https://emotion.sh)\n- [x] [styled-components](https://www.styled-components.com)\n- [x] [material-ui](https://material-ui.com)\n- [x] [antd](https://ant.design)\n- [ ] and more...\n\nFor example, if we want to use `emotion`, `static.config.js` is like this:\n\n```js\nmodule.exports = {\n id: 'emotion',\n};\n```\n\n### `static.config.js#distDir`\n\nThe place where `react-ssr` generates static files. (default: `dist`)\n\n```js\nmodule.exports = {\n distDir: 'out',\n};\n```\n\n### `static.config.js#viewsDir`\n\nThe place where we put views. (default: `views`)\n\n```js\nmodule.exports = {\n viewsDir: 'pages',\n};\n```\n\n### `static.config.js#port`\n\nThe port of the development server. (default: `3000`)\n\n```js\nmodule.exports = {\n port: 4000,\n};\n```\n\n### `static.config.js#routes`\n\nThe key is the route, and the value is the path from the views directory.\n\n```js\nmodule.exports = {\n routes: {\n '/': 'index',\n '/login': 'auth/login',\n },\n};\n```\n\n### `static.config.js#publicPaths`\n\nThe place where we put static files like images.\n\n```js\nmodule.exports = {\n publicPaths: [\n 'public',\n ],\n};\n```\n\n### `static.config.js#webpack()`\n\n```js\nmodule.exports = {\n webpack: (config /* webpack.Configuration */, env /* 'development' | 'production' */) => {\n // we can override default webpack config here\n return config;\n },\n};\n```\n\n## Custom Document\n\nJust put `_document.jsx` or `_document.tsx` into the views root:\n\n**`views/_document.jsx`**:\n\n```jsx\nimport React from 'react';\nimport {\n Document,\n Head,\n Main,\n} from '@react-ssr/static';\n\nexport default class extends Document {\n render() {\n return (\n \n \nHello World!
;\n};\n\nexport default Index;\n```\n\nA working example is here: [examples/basic-custom-document](https://github.com/saltyshiomix/react-ssr/tree/master/examples/basic-custom-document)\n\n## Dynamic `Head`\n\nWe can use the `Head` component in any pages:\n\n**`views/index.jsx`**:\n\n```jsx\nimport React from 'react';\nimport { Head } from '@react-ssr/static';\n\nconst Index = (props) => {\n return (\nOf course, SSR Ready!
\n