React Static Generator

Static file generator that can be plugged into any react project.
It is a lightweight solution for single page apps like blogs, landing pages or mobile web apps.

React Static Generator is great for small projects with 1-10 pages. For larger apps like e-commerce I would still recommend to use Universal Rendering.

This project is heavily inspired by React Snapshot and Webpack Static Site Generator Plugin.

Benefits

• static content is SEO friendly
• better User Experience
• no need for Express server
• can be hosted on CDN like netlify or surge

How it works?

• Say you have a landing page with 2 routes: "/" and "/page1".
• You then build your project for production using webpack as usual.
• Once your code is minified and exported to dist folder you trigger yarn build && react-static.
• React-static will spin a new node server with jsdom browser.
• It will then look up your package.json config for the list of routes that you want to prerender.
• Lastly, it will open each page with user-agent: Node and make the react-static to use ReactDOMServer.renderToStaticMarkup instead of ReactDOMServer.render.
• Each page is then saved to it's corresponding folder:
  "/" -> index.html
  "/page1" -> page1/index.html

After that you have a dist folder ready to be deployed to netlify or surge.sh and when you visit /page1 directly in your browser you should see prerendered html content.

Usage

• yarn add react-static-generator --dev
• add config to your package.json:

"static": {
  "paths": ["/", "/page1"], 
  "outputPath": "build"
},

• open your package.json and change "scripts" from

- "build": "react-scripts build"
+ "build": "react-scripts build && react-static"

• Change your usage of react-dom:

- import ReactDOM from 'react-dom';
+ import { render } from 'react-static-generator';

- ReactDOM.render(
+ render(
    <App/>,
    document.getElementById('root')
  );

Configuration

"paths" - either an array of paths, i.e. ["/", "/page1"] or a path to a JSON file i.e. custom.json (defaults to ["/"])
"port" - you might specify port if you run into conflicts on your machine (defaults to "2999")
"publicPath" - a virtual path in the url, i.e. "/static" (defaults to "/")
"outputPath": - a path to your output folder, i.e. "build","dist"(defaults to "dist")

Try it yourself

• cd example
• yarn install
• yarn build
• serve build folder with http-server

See example's source code.

Create-react-app demo

https://magician-brian-21017.netlify.com

The Alternatives

This should work for simple cases. For less simple cases, go with:

• React Snapshot if you want snapshot to crawl your links automatically.
• Webpack Static Site Generator Plugin - requires webpack config
• Gatsby or Phenomic if you're doing something bigger or more structured. Phenomic has service worker support & minimal bundles and all kinds of things, Gatsby is getting that stuff too.
• Universal Rendering for large apps

License

MIT