prismagraphql/prep

Name: prep

Owner: Prisma

Description: Pre-renders your web app (React, Vue, Angular, ...) into static HTML based on your specified routes enabling SEO for single page applications.

Created: 2016-05-07 16:24:02.0

Updated: 2018-05-23 23:54:43.0

Pushed: 2018-05-17 12:03:58.0

Homepage:

Size: 113

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

prep

Pre-renders your web app into static HTML based on your specified routes enabling SEO for single page applications.

NOTE: prep is now based on Chromeless. We'll shortly release an updated version.

Features

• ? Makes your single page app SEO friendly
• ? Improves loading speed up to 400x
• ? Incredibly flexible and easy to use
• ? Works out-of-the-box with any framework (React, Angular, Backbone…). No code-changes needed.

Install

install -g prep

Usage

Just run prep in your terminal or add it to the scripts as part of your build step in your package.json. If you don't provide a target-dir the contents of the source-dir will be overwritten.

age: prep [options] <source-dir> [target-dir]

tions:

-h, --help           output usage information
-c, --config [path]  Config file (Default: prep.js)
-p, --port [port]    Phantom server port (Default: 45678)

In order to configure the routes which you'd like to pre-render you need to specifiy them in a Javascript config file with the following schema. If you don't provide a config file, prep will just pre-render the / route.

t defaultConfig = {
utes: ['/'],
meout: 1000,
mensions: {
width: 1440,
height: 900,

tps: false,
stname: 'http://localhost',
eragent: 'Prep',
nify: false,
ncurrency: 4,
ditionalSitemapUrls: [],

• routes specifies the list of routes that the renderer should pass. (Default: ['/'])
• timeout is the timeout for how long the renderer should wait for network requests. (Default: 1000)
• dimensions the page dimensions in pixels that the renderer should use to render the site. (Default: 1440 x 900)
• https prep uses https if true otherwise http
• hostname is used to show the correct urls in the generated sitemap that is stored in [target-dir]/sitemap.xml
• useragent is set a navigator.userAgent
• minify is a boolean or a html-minifier configuration object.
• concurrency controls how many routes are pre-rendered in parallel. (Default: 4)
• additionalSitemapUrls is a list of URLs to include as well to the generated sitemap.xml. (Default: [])

Example prep.js

There are three different ways to configure prep. Which one you pick depends on your use case.

1. Javascript Object

The probably easiest way is to export a simple Javascript object.

rts.default = {
utes: [
'/',
'/world'

2. Synchronous Function

You can also return a function that returns the config for prep.

rts.default = () => {
turn {
routes: [
  '/',
  '/world'
]

3. Asynchronous Function (Promise)

Furthermore you can also return a Promise or use ES7 features such as async & await (Babel pre-compile step needed).

rt default async () => {
nst routes = await getRoutesAsync()
turn { routes }

How it works

The concept behind prep is very simple. prep starts a temporary local webserver and opens your provided routes via PhantomJS. Each route will be exported as a static HTML file. The resulting folder structure is the same as the structure of your routes.

Known Issues

• If you want to use Object.assign() in your code, please add a polyfill like phantomjs-polyfill-object-assign, because prep uses PhantomJS, which doesn't support Object.assign() yet.

Help & Community

Join our Slack community if you run into issues or have questions. We love talking to you!