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 for a more accurate pre-rendering in an actual browser.
As of version 2.0.0
this package internally uses puppeteer.
const render = require('prerender-chrome-headless');
const fs = require('fs');
render('https://google.com').then((html) => {
fs.writeFileSync('/tmp/rendered-page.html', html);
});
By default this package runs chrome with --disable-gpu
and --headless
you can pass additional flags calling
render(url, ['--disable-http2'])
render(url, {
delayLaunch: 0, // milliseconds
delayPageLoad: 0, // milliseconds
chromeFlags: [], // list of flags
puppeteerOptions: {}, // puppeteer launch options
onPageError() {} // callback
});
The second parameter of render
function can either be an array of chrome flags or an object with
delayLaunch
Wait to launch Chrome browser, in case you need more time to set up the serverdelayPageLoad
Wait after the page load event for your JS to runchromeFlags
List of chrome flagspuppeteerOptions
Options for puppeteer launch as documented at puppeteer. Note, you can specify chromeFlags here as well but if you specified chromeFlags then that takes precedence overargs
defined inpuppeteerOptions
.onPageError
Function called when an uncaught exception happens within the page. You can use this function for instance to fail your build if error happens during the generation of the page
The package works on any machine with Chrome installed. Most CI environments allows you to install external packages.
Here is what you have to do to get Chrome headless working on Travis
# 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
script:
# Run your build script that fetches a page and writes the output
- node generate_static_page.js
- static-site-generator-webpack-plugin webpack plugin that generates static pages from your universal application.
- react-snapshot runs your React application inside a fake browser, jsdom
- prerender-spa-plugin webpack plugin that uses Phantom.JS.
- chrome-render render any web page inside chrome headless browser, only works in node 7+.