Skip to content
Prerender your website using Puppeteer.
Branch: master
Clone or download
Latest commit c404e43 Nov 15, 2018
Permalink
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
lib
.editorconfig
.gitattributes init Jul 25, 2017
.gitignore init Jul 25, 2017
.prettierrc allow to fetch routes asynchronously Nov 15, 2018
LICENSE init Jul 25, 2017
README.md
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

README.md

presite

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.

Install

npm i -g presite

# China mirror for downloading chromium
npm config set puppeteer_download_host=https://storage.googleapis.com.cnpmjs.org
npm i -g presite

Usage

presite ./path/to/your/spa

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

Examples

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

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.

Contributing

  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

Author

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.