prerender-tool

• Prerender util that generates html content ready to cache where you want ( redis / files / whatever).
• And can also create/maintain a sitemap.xml

This packages is build on top of

• puppeteer

It offers you a solid tool to crate a bin task using the power of js

1. Install
2. Usage
3. Full Examples:
   • Prerender in redis
   • Prerender in file system

Install

npm install prerender-tool

With your own chromium (optional):

add the two following files to your project:

├── ...
├── .npmrc
├── .env
├── ...

in .npmrc

puppeteer_skip_chromium_download=true

in .env

PUPPETEER_EXECUTABLE_PATH='/path/to/your/own/bin/chrome'

then later in the constructor add executablePath in the browserOpts options:

...
const prerender = await PrerenderTool.create({
	browserOpts:{
		executablePath: process.env.PUPPETEER_EXECUTABLE_PATH
	}
})
...

Usage

render in redis

const
{ PrerenderTool } = require('prerender-tool'),
run = async () =>
{
	//the class
	const prerender = await PrerenderTool.create()

	// parse urls
	await prerender.parse([
		{key:'index.html', url:'https://ginduvallon.ch'},
		{key:'/a-propos.html', url:'https://ginduvallon.ch/a-propos'},
	])

	// and go sleep
	await prerender.destroy()
}

// run code!
run()

create sitemap.xml:

await prerender.buildSitemap(__dirname+'/../../sitemap.xml')

cache as files:

const prerender = await PrerenderTool.create({
	cache: new FileEngine({prefix: __dirname+'/../tmp/'}) // we pass a file cache engine
})

//import FileEngine first: { PrerenderTool, FileEngine } = require('prerender-tool')

configure nginx

pass options for npm-redis:

const prerender = await PrerenderTool.create({
	prefix: 'prerender:',
	duration: 3600, // 0 means forever default is 3600
	createOptions: {} // directly pass to redis client see doc
})

create provide urls then parse:

await prerender.setParseList([{key:'', url:'https://dev.ginduvallon.ch'}])
await prerender.parse()

do both in one:

await prerender.parse([{key:'', url:'https://dev.ginduvallon.ch'}])

provide a good sitemap and customise your urls + pass chrome options

await prerender.parse([

	// here default sitmap record will apply
	{key:'/a-propos.html', url:'https://ginduvallon.ch/a-propos'},

	// here extra fields form sitemap key will apply additionally
	{
		// min required
		key:'index.html',
		url:'https://dev.ginduvallon.ch',

		// site map
		// see https://www.npmjs.com/package/xmlbuilder for syntax and https://www.sitemaps.org/protocol.html
		sitemap:
		{
			priority:
			{
				'#text':1
			},
			changefreq:
			{
				'#text':'monthly'
			},
			lastmod:
			{
				'#text':moment().format('YYYY-MM-DD')
			}
		}

		// parser options => chrome options
		// see https://github.com/GoogleChrome/puppeteer/blob/v1.15.0/docs/api.md#pagegotourl-options
		opts:
		{
			waitUntil: 'networkidle2'
		},
	}
])

await prerender.buildSitemap(__dirname+'/../../sitemap.xml')

Full Examples

Redis & Nginx

Install

npm i prerender-tool

Directory Structure

├── bin
|  └── prerender.js (your bin goes here)
├── dist (or build)
├── node_modules
├── src
├── README.md
├── package.json
└── .gitignore

bin/prerender.js

#!/usr/bin/env node
const
{ PrerenderTool} = require('prerender-tool'),
moment = require('moment'),
run = async () =>
{

  const prerender = await PrerenderTool.create({
    cacheOpts:
    {
      createOptions:
      {
        host: 'redis01.aws.3xw'
      },
      prefix: 'dev.ginduvallon.ch:',
      duration: 60 * 60 * 24 * 10
    }
  })
  await prerender.parse([
    {key:'/', url:'https://dev.ginduvallon.ch'},
    {key:'/a-propos', url:'https://dev.ginduvallon.ch/a-propos',opts: {waitUntil: 'networkidle0'}}, // see https://github.com/puppeteer/puppeteer/blob/v1.15.0/docs/api.md#pagegotourl-options for types of waits
    {key:'/contact',url:'https://dev.ginduvallon.ch/contact'},
  ])

  await prerender.buildSitemap(__dirname+'/../dist/sitemap.xml') // or build...

  await prerender.destroy()

  process.exit(0)
}

run()

Build

bin/prerender.js

Nginx

redis with:

• ngx_redis
• ngx_headers_more

server {
	listen 443;
	server_name example.com;

	ssl on;
	ssl_certificate /etc/nginx/ssl/global_self_signed/global.crt;
	ssl_certificate_key /etc/nginx/ssl/global_self_signed/global.key;

	#logs off
	access_log off;
	log_not_found off;

	# root directive should be global
	root /data01/sites/example.com/dev/example.com/dist;
	index index.html;

	# such as .htaccess, .htpasswd, .DS_Store (Mac).
	location ~ /\. {
		deny all;
	}

	# Media: images, icons, video, audio, HTC
	location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|otf|ttf|eot|woff|woff2|svgz|mp4|ogg|ogv|webm|webp|htc)$ {
		expires 1M;
		access_log off;
		add_header Vary Accept-Encoding;
		add_header Cache-Control "public";
		try_files $uri @rewrites;
	}

	## All static files will be served directly.
	location ~* ^.+\.(?:css|cur|js|xml)$ {
		expires 1M;
		access_log off;
		add_header Vary Accept-Encoding;
		add_header Cache-Control "public";
		try_files $uri @rewrites;
	}

	## All other files
	location / {
		try_files $uri @prerender;
	}

	location @prerender {

		set $prerender 0;

		if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|bufferbot|quora link preview|showyoubot|outbrain|pinterest/0.|developers.google.com/+/web/snippet|www.google.com/webmasters/tools/richsnippets|slackbot|vkShare|W3C_Validator|redditbot|Applebot|WhatsApp|flipboard|tumblr|bitlybot|SkypeUriPreview|nuzzel|Discordbot|Google Page Speed|Qwantify") {
			set $prerender 1;
		}
		if ($args ~ "_escaped_fragment_") {
			set $prerender 1;
		}
		if ($http_user_agent ~ "Prerender") {
			set $prerender 0;
		}
		if ($uri ~ "\.(php|json|js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff)") {
			set $prerender 0;
		}

		# set redis settings  "$host:"
		set $redis_key  "$host:$request_uri";
		if ($args) {
			set $redis_key  "$host:$request_uri?$args";
		}

		if ($prerender = 1) {

			# response header
			set $custom_response_header "text/html; charset=UTF-8";

			redis_pass redis01.aws.3xw:6379;
			error_page 404 405 502 504 = @fallback;
			more_set_headers "Content-Type: $custom_response_header";
		}

		try_files $uri $uri/ @rewrites;
	}

	#try vue
	location @rewrites {
		rewrite ^(.+)$ /index.html last;
	}
}

File System & Nginx

Install

npm i prerender-tool

Directory Structure

├── bin
|  └── prerender.js (your bin goes here)
├── prerender (folder for your prerendered files)
├── dist (or build)
├── node_modules
├── src
├── README.md
├── package.json
└── .gitignore

bin/prerender.js

#!/usr/bin/env node
const
{ PrerenderTool, FileEngine } = require('prerender-tool'),
moment = require('moment'),
run = async () =>
{

  const prerender = await PrerenderTool.create({
    cache: new FileEngine({prefix: __dirname+'/../prerender/'})
  })
  await prerender.parse([
    {key:'/index.html', url:'https://dev.ginduvallon.ch'},
    {key:'/a-propos.html', url:'https://dev.ginduvallon.ch/a-propos',opts: {waitUntil: 'networkidle0'}}, // see https://github.com/puppeteer/puppeteer/blob/v1.15.0/docs/api.md#pagegotourl-options for types of waits
    {key:'/contact.html',url:'https://dev.ginduvallon.ch/contact'},
  ])

  await prerender.buildSitemap(__dirname+'/../dist/sitemap.xml') // or build...

  await prerender.destroy()

  process.exit(0)
}

run()

Build

bin/prerender.js

Nginx

TODO

Have fun 👌