erasmuswill/presite

Prerender your website using Puppeteer.

presite

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