# react-static-generator

> Static file generator that can be plugged into any react project. A lightweight solution for single page apps like blogs, landing pages or mobile apps rendered in react-native webview. It prerenders the content to be SEO friendly and to load faster fo

Latest version **0.1.2** (published 2017-05-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-static-generator
pnpm add react-static-generator
yarn add react-static-generator
bun add react-static-generator
```

Provides the command `react-static`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2017-05-05 |
| First published | 2017-05-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kris Zima |
| Maintainers | kzima |
| Keywords | react, react-static, react-static-generator, create-react-app, snapshot, static-site-generator, jsdom |

## Links

- npm: https://www.npmjs.com/package/react-static-generator
- Homepage: https://github.com/kzima/react-static
- npm.io page: https://npm.io/package/react-static-generator

## Dependencies (6)

- [jsdom](https://npm.io/package/jsdom.md) ^9.4.5
- [react](https://npm.io/package/react.md) ^15.3.0
- [mkdirp](https://npm.io/package/mkdirp.md) ^0.5.1
- [express](https://npm.io/package/express.md) ^4.15.2
- [react-dom](https://npm.io/package/react-dom.md) ^15.3.0
- [express-history-api-fallback](https://npm.io/package/express-history-api-fallback.md) ^2.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2017-05-05
- 0.1.1 — 2017-05-05
- 0.1.0 — 2017-05-05
- 0.0.1 — 2017-05-05

## README

# React Static Generator

Static file generator that can be plugged into any react project. 
A lightweight solution for single page apps like blogs, landing pages or mobile apps rendered in react-native webview. 
It prerenders the content to be SEO friendly and to load faster for the user. 

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](https://github.com/geelen/react-snapshot) and [Webpack Static Site Generator Plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin).

# 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
```diff
- "build": "react-scripts build"
+ "build": "react-scripts build && react-static"
```

- Change your usage of `react-dom`:
```diff
- 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

[run example app](https://github.com/kzima/react-static/tree/master/example)
- `yarn install`
- `yarn build`
- serve build folder with `http-server`

## Create-react-app demo

[https://magician-brian-21017.netlify.com](https://magician-brian-21017.netlify.com)


## The Alternatives

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

- [React Snapshot](https://github.com/geelen/react-snapshot) if you want snapshot to crawl your links automatically.
- [Webpack Static Site Generator Plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin) - requires webpack config
- [Gatsby](https://github.com/gatsbyjs/gatsby) or [Phenomic](https://phenomic.io/) 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](http://redux.js.org/docs/recipes/ServerRendering.html) for large apps

## License

MIT

---
_Source: https://npm.io/package/react-static-generator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._