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

@middlend/mock-server

v0.1.3

Published

For front-end developers who need a quick back-end for mock data.

Downloads

6

Readme

mock-server

For front-end developers who need a quick back-end for mock data.

README: English | 简体中文

Features

  • mock data
  • mock file download
  • Matching by request URL and method
  • Custom Response delay, status and headers
  • Support third-party simulation data lib, like Mock.js and Faker.js

Install

npm install -g @middlend/mock-server

Usage

1. Write mock data in source directory

data/user.js

module.exports = [{
    request: {
        url: '/user/:id'
    },
    response: {
        body: {
            id: 123,
            name: 'Stephen',
            age: 30
        }
    }
}];

2. Start mock server

mock-server ./data

3. Request URL

http://localhost:3000/user/1

CLI

mock-server [options] <source>

Options:
  --config, -c       Path to config file
  --host, -H         Set host                             [default: "localhost"]
  --port, -p         Set port                                    [default: 3000]
  --watch, -w        Watch file(s)                                     [boolean]
  --static, -s       Set static(download) files directory

Config

Data format

You could add any js file or folder to source directory. Nested files are supported and use DFS.

{
    // 'request' is use for matching response data
    request: {
        // 'url' is use for compare request url.
        url: '/xxx/xxx',        // require
        // 'method' is use for compare request method.
        method: 'get',          // optional
        protocol: 'http'        // optional
    },
    // 'response' is use for set response data
    response: {             // require
        // 'delay' is use for delay response time.
        delay: 0,           // default
        // 'status' is use for delay response time.
        status: 200,        // default
        // 'headers' use for set response header. default to below.
        headers: {          // default
            'Content-Type': 'application/json; charset=UTF-8',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
        },
        // 'body' is use for set response body, string, object and array are supported, if type to String and end with '.xxx' means this is a file path and root path is by --static argument, you can change it in default setting with "staticPath" option.
        body: {             // require
            ...
        }
    }
}

Default Settings

You could configure default setting in config file.

mock-server ./data --config=mock.config.js

mock.config.js

var path = require('path');

module.exports = {
    host: 'localhost',          // default
    port: 3000,                 // default
    watch: false,               // default
    // search order with mock data files.
    searchOrder(filenames) {
        return filenames.sort();    // default
    },
    // global response settings
    response: {
        // will merge to your specific response headers.
        headers: {                      // default
            'Content-Type': 'application/json; charset=UTF-8',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
        }
    }
}

Routes

There are three pattern to match request url.

{
    request: {
        // matches /user/stephen and /user/ricky
        url: '/user/:name',
        // matches /files/hello.jpg and /files/world.png
        url: '/files/*.*',  
        // matches /files/hello.jpg and /files/path/to/world.jpg
        url: '/**/*.jpg'
    },
    ...
}

Example

Mock data

GET http://localhost:3000/user/list

module.exports = [{
    request: {
        url: '/user/list',
        method: 'get'
    },
    response: {
        delay: 2000,
        body: [{
            id: 123,
            name: 'Stephen',
            age: 30
        }, {
            id: 124,
            name: 'Ricky',
            age: 20
        }]
    }
}];
mock-server ./data

Mock file download

POST http://localhost:3000/download/sample ./data

module.exports = [{
    request: {
        url: '/download/:filename',
        method: 'get'
    },
    response: {
        delay: 1000,
        headers: {
            'Content-Type': 'text/plain',
            'Content-Disposition': 'attachment;filename=sample.txt;'
        },
        body: '<static>/sample.txt'      // store download file sample.txt to static directory(use --static argument to set).
    }
}];
mock-server ./data --static=./static

Work with Mock.js

npm i mockjs

GET http://localhost:3000/user/list

var Mock = require('mockjs');

module.exports = [{
    request: {
        url: '/user/list',
        method: 'get'
    },
    response: {
        body: Mock.mock({
            'data|20': [{
                id: '@integer(0, 10000)',
                name: '@name',
                email: '@email'
            }]
        }).data
    }
}];

Mock.js API

Work with Faker.js

npm i faker

GET http://localhost:3000/user/123

var faker = require('faker');

module.exports = [{
    request: {
        url: '/user/:id',
        method: 'get'
    },
    response: {
        body: {
            id: faker.random.uuid(),
            name: faker.name.findName(),
            email: faker.internet.email()
        }
    }
}];

Faker.js API