prephas been deprecated in favor of newer tools like Gatsby and Next.js
Pre-renders your web app into static HTML based on your specified routes enabling SEO for single page applications.
NOTE:
prepis 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.
npm install -g prepJust 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.
Usage: prep [options] <source-dir> [target-dir]
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.
const defaultConfig = {
routes: ['/'],
timeout: 1000,
dimensions: {
width: 1440,
height: 900,
},
https: false,
hostname: 'http://localhost',
useragent: 'Prep',
minify: false,
concurrency: 4,
additionalSitemapUrls: [],
}routesspecifies the list of routes that the renderer should pass. (Default:['/'])timeoutis the timeout for how long the renderer should wait for network requests. (Default:1000)dimensionsthe page dimensions in pixels that the renderer should use to render the site. (Default:1440x900)httpsprep uses https if true otherwise httphostnameis used to show the correct urls in the generated sitemap that is stored in[target-dir]/sitemap.xmluseragentis set anavigator.userAgentminifyis a boolean or a html-minifier configuration object.concurrencycontrols how many routes are pre-rendered in parallel. (Default:4)additionalSitemapUrlsis a list of URLs to include as well to the generatedsitemap.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.
exports.default = {
routes: [
'/',
'/world'
]
}You can also return a function that returns the config for prep.
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).
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 supportObject.assign()yet.
Join our Slack community if you run into issues or have questions. We love talking to you!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent