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

server-replay

v1.1.0

Published

Replay server responses from a HAR file

Downloads

9

Readme

server-replay

Replay server responses from a .har file.

Useful if…

  • …you want to develop offline and your development server isn't local
  • …your development server is very slow and you want to go faster
  • …you are developing against an API with rate limits

It works by starting a proxy server and serving content from a previously saved .har file overlayed with files from your local system, configurable with mappings.

Installation

npm install -g server-replay

Running

You need to have a .har file, run server-replay, and then set up your browser to use it as a proxy.

A .server-replay.json in the current directory is used by default if no config option is given.

server-replay [options] <.har file>

Options:
  -c, --config  The config file to use
  -p, --port    The port to run the proxy server on  [default: 8080]
  -d, --debug   Turn on debug logging

See the Setup section for details on creating .har file and using the proxy in your browser.

Configuration

The config file is a JSON file (plus // comments) with the following properties:

  • version – currently 1
  • mappings – Maps from URLs to file system paths. It is an array of {match, path} objects. match is a string or regex, and path is a string. path can contain $n references to substitute capture groups from match.
  • replacements – Replaces strings in the body of textual content. It is array of {match, replacement} objects. match is a string, regex or variable, and replacement is a string or variable. replacement can contain $n references to substitute capture groups from match.

Full example:

{
    "version": 1,
    "mappings": [
        {
            "match": {"regex": ".*\\/static\\/(.*)"},
            "path": "./public/$1"
        }
    ],
    "replacements": [
        // For JSONP requests where callback name is randomly generated
        {
            "match": {"var": "entry.request.parsedUrl.query.callback"},
            "replace": {"var": "request.parsedUrl.query.callback"}
        },
        // Proxy only works over http
        {"match": "https", "replace": "http"}
    ]
}

Types

The types mentioned above take the following forms:

  • string – a plain string. Example: "something".
  • regex – an object with a regex property, and an optional flags property. If you don't provide the flags property, unlike JavaScript, the regex has the global flag set. Example: {"regex": "user\\/([a-z]+)", "flags": "ig"}
  • variable – an object with a var property which contains a path to a value. See below for the available variables. Example: {"var": "request.parsedUrl.query.q"}

Variables

  • request – the Node request object with the addition of a parsedUrl property, containing the parsed url and query.
  • entry – the HAR entry that is being used to respond to this request. It also has a parsedUrl property, and an indexedHeaders property which maps each header name to it's value(s).

Setup

Getting a .har file

The easiest way is with the Chrome DevTools. In the Network panel disable the cache, refresh the page and interact with the page to generate the network requests that you want to capture. Then right click and select "Save as HAR with Content".

Creating a .har file

Note: Extensions such as AdBlock and Ghostery interfere with the recorded responses. Be aware of this and, if necessary, disable them before loading the page.

Browser proxy configuration

Chrome

Launch with the --proxy-server argument:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --proxy-server=127.0.0.1:8080

Firefox

Preferences > Advanced > Network > Settings… > Manual proxy configuration

Firefox proxy settings

License

Copyright 2015 Adobe Systems Incorporated

This software is licensed under the Apache License, Version 2.0 (see LICENSE file).