Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prisma-archive/prep
Pre-renders your web app (React, Vue, Angular, ...) into static HTML based on your specified routes enabling SEO for single page applications.
https://github.com/prisma-archive/prep
apollographql graphcool prerender react seo server-side-rendering vue
Last synced: 5 days ago
JSON representation
Pre-renders your web app (React, Vue, Angular, ...) into static HTML based on your specified routes enabling SEO for single page applications.
- Host: GitHub
- URL: https://github.com/prisma-archive/prep
- Owner: prisma-archive
- License: mit
- Created: 2016-05-07T16:24:02.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-24T12:51:38.000Z (almost 6 years ago)
- Last Synced: 2024-11-02T17:04:21.796Z (6 days ago)
- Topics: apollographql, graphcool, prerender, react, seo, server-side-rendering, vue
- Language: JavaScript
- Homepage:
- Size: 112 KB
- Stars: 373
- Watchers: 10
- Forks: 27
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - prisma-archive/prep - Pre-renders your web app (React, Vue, Angular, ...) into static HTML based on your specified routes enabling SEO for single page applications. (vue)
README
> `prep` has been deprecated in favor of newer tools like [Gatsby](https://www.gatsbyjs.org/) and [Next.js](https://nextjs.org/)
# prep [](https://badge.fury.io/js/prep)
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](https://github.com/prismagraphql/chromeless). We'll shortly release an updated version.
## Features
* 🔎 Makes your single page app SEO friendly
* 🚀 Improves loading speed up to 400x
* ✨ Incredibly flexible and easy to use
* 📦 Works out-of-the-box with any framework (React, Angular, Backbone...). No code-changes needed.
## Install
```sh
npm install -g prep
```
## Usage
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.
```sh
Usage: prep [options] [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.
```js
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 http
* `hostname` 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](https://github.com/kangax/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: `[]`)
## Example `prep.js`
There are three different ways to configure `prep`. Which one you pick depends on your use case.
### 1. Javascript Object
The probably easiest way is to export a simple Javascript object.
```js
exports.default = {
routes: [
'/',
'/world'
]
}
```
### 2. Synchronous Function
You can also return a function that returns the config for `prep`.
```js
exports.default = () => {
return {
routes: [
'/',
'/world'
]
}
}
```
### 3. Asynchronous Function (Promise)
Furthermore you can also return a `Promise` or use ES7 features such as `async` & `await` (Babel pre-compile step needed).
```js
export default async () => {
const routes = await getRoutesAsync()
return { routes }
}
```
## How it works
The concept behind `prep` is very simple. `prep` starts a temporary local webserver and opens your provided routes via [PhantomJS](http://phantomjs.org/). Each route will be exported as a static HTML file. The resulting folder structure is the same as the structure of your routes.
## Known Issues
- If you want to use `Object.assign()` in your code, please add a polyfill like [phantomjs-polyfill-object-assign](https://github.com/chuckplantain/phantomjs-polyfill-object-assign), because prep uses PhantomJS, which doesn't support `Object.assign()` yet.
## Help & Community [](https://slack.graph.cool)
Join our [Slack community](http://slack.graph.cool/) if you run into issues or have questions. We love talking to you!
