-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
58 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
# Generate static pages from single page applications | ||
|
||
Few tool out there allow you to pre-render web applications to static pages either using webpack or fake browser. | ||
|
||
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. | ||
|
||
## Usage | ||
|
||
```js | ||
const render = require('prerender-chrome-headless'); | ||
const fs = require('fs'); | ||
|
||
render('https://google.com').then((html) => { | ||
fs.writeFileSync('/tmp/rendered-page.html', html); | ||
}); | ||
``` | ||
|
||
### Chrome flags | ||
|
||
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 | ||
|
||
```js | ||
render(url, ['--disable-http2']) | ||
``` | ||
|
||
## Continuous integration | ||
|
||
The package works on any machine with Chrome installed. Most CI environments allows you to install external packages. | ||
|
||
### Travis | ||
|
||
Here is what you have to do to get Chrome headless working on Travis | ||
|
||
```yml | ||
# The default at the time of writing this blog post is Ubuntu `precise` | ||
# Chrome addon is only available on trusty+ or OSX | ||
dist: trusty | ||
|
||
# This will install Chrome stable (which already supports headless) | ||
addons: | ||
chrome: stable | ||
|
||
before_install: | ||
# Needed by `chrome-launcher` | ||
- export LIGHTHOUSE_CHROMIUM_PATH=google-chrome-stable | ||
|
||
install: | ||
# Run your build script that fetches a page and writes the output | ||
- node generate_static_page.js | ||
``` | ||
# Related links | ||
* [static-site-generator-webpack-plugin](https://github.com/markdalgleish/static-site-generator-webpack-plugin) webpack plugin that generates static pages from your universal application. | ||
* [react-snapshot](https://github.com/geelen/react-snapshot) runs your React application inside a fake browser, [jsdom](https://github.com/tmpvar/jsdom) | ||
* [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) webpack plugin that uses Phantom.JS. | ||
* [chrome-render](https://github.com/gwuhaolin/chrome-render) render any web page inside chrome headless browser, only works in node 7+. |