presite
CLI app for pre-rendering SPA websites.
Last updated 8 months ago by egoist .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install presite 
SYNC missed versions from official npm registry.

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

<summary>with Create React App</summary>
{
  "scripts": {
-    "build": "react-scripts build"
+    "build": "react-scripts build && presite ./build"
  }
}
<summary>with Vue CLI</summary>
{
  "scripts": {
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build && presite ./dist"
  }
}
<summary>with Poi</summary>
{
  "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

Current Tags

  • 1.0.0                                ...           latest (8 months ago)

10 Versions

  • 1.0.0                                ...           8 months ago
  • 0.2.2                                ...           2 years ago
  • 0.2.1                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.5                                ...           2 years ago
  • 0.1.4                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Maintainers (2)
Downloads
Today 0
This Week 1
This Month 2
Last Day 0
Last Week 0
Last Month 12
Dependencies (12)
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |