Server-side rendering tool for your web app. Prerenders your app into static HTML files and supports routing.
npm install prepPre-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.
* 🔎 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.
``sh`
npm install -g prep
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.
`sh
Usage: prep [options]
Options:
-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.
`js`
const defaultConfig = {
routes: ['/'],
timeout: 1000,
dimensions: {
width: 1440,
height: 900,
},
https: false,
hostname: 'http://localhost',
useragent: 'Prep',
minify: false,
concurrency: 4,
additionalSitemapUrls: [],
}
* 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 httphostname
* is used to show the correct urls in the generated sitemap that is stored in [target-dir]/sitemap.xml
* is set a navigator.userAgent
* 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: [])
There are three different ways to configure prep. Which one you pick depends on your use case.
The probably easiest way is to export a simple Javascript object.
`js`
exports.default = {
routes: [
'/',
'/world'
]
}
You can also return a function that returns the config for prep.
`js`
exports.default = () => {
return {
routes: [
'/',
'/world'
]
}
}
Furthermore you can also return a Promise or use ES7 features such as async & await (Babel pre-compile step needed).
`js`
export default async () => {
const routes = await getRoutesAsync()
return { routes }
}
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.
- 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.
Join our Slack community if you run into issues or have questions. We love talking to you!
