npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

prep

v1.6.2

Published

Server-side rendering tool for your web app. Prerenders your app into static HTML files and supports routing.

Downloads

17

Readme

prep npm version CircleCI

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. 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

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.

  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.

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 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.

exports.default = {
  routes: [
    '/',
    '/world'
  ]
}

2. Synchronous Function

You can also return a function that returns the config for prep.

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).

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. 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, because prep uses PhantomJS, which doesn't support Object.assign() yet.

Help & Community Slack Status

Join our Slack community if you run into issues or have questions. We love talking to you!