Pre-renders your web app (React, Vue, Angular, ...) into static HTML based on your specified routes enabling SEO for single page applications.
prep
has 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:
prep
is now based on Chromeless. We'll shortly release an updated version.
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.
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: [],
}
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
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: []
)prep.js
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.
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!