prep - GitLite

KO | EN

gitlite — search

#javascript #python #react #golang #rust #macos #java #windows #awesome #cli #kubernetes #vue #pytorch #open-source

prep

(★ 371)

Pre-renders your web app (React, Vue, Angular, ...) into static HTML based on your specified routes enabling SEO for single page applications.

File Explorer

Download Latest Version (.zip)

- Dockerfile
- entrypoint.sh
- - .babelrc
  - .eslintrc
  - package.json
  - prep.js
  - webpack.config.js
- index.js
- cert.pem
- key.pem
.babelrc
.gitignore
circle.yml
LICENSE
package.json
README.md
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/prisma-archive/prep

Downloads the entire project code from GitHub to your computer.

cd prep

Moves into the project folder you just downloaded.

2. Official Install Script

Easy Recommended

Prerequisites

Node.js Node.js must be installed to use npm.

npm install -g prep

Installs the package published on the npm registry globally — no need to clone the source.

✅ After installing, open a new terminal and run the program's version command (e.g. --version) to confirm it worked.

Pulled directly from this repo's README.

3. Docker

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Docker Desktop Needed to build and run containers. Install it and keep it running in the background.

docker build -f docker/Dockerfile -t prep .

Builds a runnable image based on the Dockerfile.

docker run -p 8080:80 prep

Runs the built image as an actual container.

✅ Run docker compose ps to check the containers are Up. If the README mentions a port, open http://localhost:PORT in your browser.

4. Node.js

Easy

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install -g prep

Installs the package published on the npm registry globally — no need to clone the source.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

> `prep` has been deprecated in favor of newer tools like [Gatsby](https://www.gatsbyjs.org/) and [Next.js](https://nextjs.org/)

# prep [![npm version](https://badge.fury.io/js/prep.svg)](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] <source-dir> [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 [![Slack Status](https://slack.graph.cool/badge.svg)](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!

<p align="center"><a href="https://oss.prisma.io"><img src="https://imgur.com/IMU2ERq.png" alt="Prisma" height="170px"></a></p>