|
| 1 | +# Generate static pages from single page applications |
| 2 | + |
| 3 | +Few tool out there allow you to pre-render web applications to static pages either using webpack or fake browser. |
| 4 | + |
| 5 | +This package uses [headless chrome](https://developers.google.com/web/updates/2017/04/headless-chrome) for a more accurate pre-rendering in an actual browser. |
| 6 | + |
| 7 | +## Usage |
| 8 | + |
| 9 | +```js |
| 10 | +const render = require('prerender-chrome-headless'); |
| 11 | +const fs = require('fs'); |
| 12 | + |
| 13 | +render('https://google.com').then((html) => { |
| 14 | + fs.writeFileSync('/tmp/rendered-page.html', html); |
| 15 | +}); |
| 16 | +``` |
| 17 | + |
| 18 | +### Chrome flags |
| 19 | + |
| 20 | +By default this package runs chrome with `--disable-gpu` and `--headless` you can pass additional [flags](http://peter.sh/experiments/chromium-command-line-switches/) calling |
| 21 | + |
| 22 | +```js |
| 23 | +render(url, ['--disable-http2']) |
| 24 | +``` |
| 25 | + |
| 26 | +## Continuous integration |
| 27 | + |
| 28 | +The package works on any machine with Chrome installed. Most CI environments allows you to install external packages. |
| 29 | + |
| 30 | +### Travis |
| 31 | + |
| 32 | +Here is what you have to do to get Chrome headless working on Travis |
| 33 | + |
| 34 | +```yml |
| 35 | +# The default at the time of writing this blog post is Ubuntu `precise` |
| 36 | +# Chrome addon is only available on trusty+ or OSX |
| 37 | +dist: trusty |
| 38 | + |
| 39 | +# This will install Chrome stable (which already supports headless) |
| 40 | +addons: |
| 41 | + chrome: stable |
| 42 | + |
| 43 | +before_install: |
| 44 | + # Needed by `chrome-launcher` |
| 45 | + - export LIGHTHOUSE_CHROMIUM_PATH=google-chrome-stable |
| 46 | + |
| 47 | +install: |
| 48 | + # Run your build script that fetches a page and writes the output |
| 49 | + - node generate_static_page.js |
| 50 | +``` |
| 51 | +
|
| 52 | +
|
| 53 | +# Related links |
| 54 | +
|
| 55 | +* [static-site-generator-webpack-plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin) webpack plugin that generates static pages from your universal application. |
| 56 | +* [react-snapshot](https://github.com/geelen/react-snapshot) runs your React application inside a fake browser, [jsdom](https://github.com/tmpvar/jsdom) |
| 57 | +* [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) webpack plugin that uses Phantom.JS. |
| 58 | +* [chrome-render](https://github.com/gwuhaolin/chrome-render) render any web page inside chrome headless browser, only works in node 7+. |
0 commit comments