Skip to content
Prerender your website using Puppeteer.
Branch: master
Clone or download
Latest commit c404e43 Nov 15, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin use joycon Nov 15, 2018
example fix lint Jan 12, 2018
.gitattributes init Jul 25, 2017
.gitignore init Jul 25, 2017
.prettierrc allow to fetch routes asynchronously Nov 15, 2018
LICENSE init Jul 25, 2017
circle.yml upadte taki Jan 12, 2018
package-lock.json Release v1.0.0 Nov 15, 2018
package.json Release v1.0.0 Nov 15, 2018


NPM version NPM downloads CircleCI donate

Why (not) prerender?

  • It works for every single-page website
  • It requires no modification on your app code
  • It does not suite large website that heavily depends on async data, use SSR instead.


npm i -g presite

# China mirror for downloading chromium
npm config set puppeteer_download_host=
npm i -g presite


presite ./path/to/your/spa

Then the generated website can be found at .presite folder.


with Create React App
  "scripts": {
-    "build": "react-scripts build"
+    "build": "react-scripts build && presite ./build"
with Vue CLI
  "scripts": {
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build && presite ./dist"
with Poi
  "scripts": {
-    "build": "poi build"
+    "build": "poi build && presite ./dist"

By default it only prerenders path: /, you can configure routes option for more, see below:

Configure in presite.config.js

Note: You can also configuration it in presite.config.json or the presite key in package.json.

Set routes that needs prerender

module.exports = {
  routes: ['/', '/about']

If you want to fetch routes asynchronously, use async/await:

module.exports = {
  async routes() {
    const routes = await fetchRoutesFromSomeWhere()
    return routes


Wait specific ms or dom element to appear:

module.exports = {
  wait: 3000
  // Or wait for an element to appear
  // wait: '#comments'

Maunally set ready state

Instead of using wait you can manually tell when the app is ready:

module.exports = {
  manually: true

Then you can call window.snapshot in your app when its contents are ready:

window.snapshot && window.snapshot()

Source directory

module.exports = {
  baseDir: './path/to/your/spa'

Output directory

By default it outputs to .presite folder in current directory.

module.exports = {
  outDir: '.presite'

CLI options

Run presite --help.


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D


presite © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

Website · GitHub @egoist · Twitter @_egoistlily

You can’t perform that action at this time.