mock-config-server

🎉 Mock Config Server

tool that easily and quickly imitates server operation, create full fake api in few steps

Install

Install with npm or yarn

$ npm i mock-config-server --save --dev
# or
$ yarn add mock-config-server --dev

🦉 Philosophy

🎉 Mock Config Server it is a tool that, easily, quickly simulates the work of a server. The main difference from solutions such as json-server and mock-service-worker is the ease of filling in data and flexible emulation of any and usual cases. Our goal is to create a simple and flexible system for users, with the help of which they can create, test, and support their products.

Features

• TypeScript support out of the box - full typed package
• Full Rest Api support - using simple configs of a certain format, you can easily simulate the operation of servers
• CORS setup - turn on and off CORS, fully customizable when CORS is turned on
• Support for any kind of static - server can return any type of static file if needed. Images, HTML, CSS, JSON, etc

Usage

Install 🎉 Mock Config Server with npm or yarn

$ npm i mock-config-server --save --dev
# or
$ yarn add mock-config-server --dev

Create a mock-server.config.js file with server configuration

/** @type {import('mock-config-server').Mock.ServerConfig} */
const mockServerConfig = {
  configs: [
    {
      path: '/user',
      method: 'get',
      routes: [{ data: { emoji: '🦁', name: 'Nursultan' } }]
    }
  ]
};

export default mockServerConfig;

Start 🎉 Mock Config Server

$ npx mock-config-server

# 🎉 Mock Config Server is running at http://localhost:31299

🎭 Parameters for mock-server.config.(js|ts)

• configs {Array} configs for mock requests, read
• staticPath? {StaticPath} entity for working with static files, read
• interceptors? {Interceptors} functions to change request or response parameters, read
• cors? {Cors} CORS settings object (default: CORS is turn off), read
• port? {number} server port (default: 31299)
• baseUrl? {string} part of the url that will be substituted at the beginning of the request url (default: '/')

Configs

Configs are the fundamental part of the mock server. These configs are easy to fill and maintain. Config entities is an object with which you can emulate various application behaviors. You can specify headers | query | params | body to define what contract data you need to get. Using this mechanism, you can easily simulate the operation of the server and emulate various cases

request config

• path {string | RegExp} request path
• method {GET | POST | DELETE | PUT | PATCH} rest api method
• routes {RouteConfig} request routes
• interceptors? {Interceptors} functions to change request or response parameters, read

route config

• data {any} mock data of request
• entities? Object<headers | query | params | body> object that helps in data retrieval
• interceptors? {Interceptors} functions to change request or response parameters, read

entities

interface Entities {
  headers?: { [string]: string | number };
  query?: { [string]: string | number };
  params?: { [string]: string | number };
  body?: any;
}

Example

/** @type {import('mock-config-server').MockServerConfig} */
const mockServerConfig = {
  configs: [
    {
      path: '/user',
      method: 'get',
      routes: [
        {
          entities: {
            headers: { 'name-header': 'Nursultan' }
          },
          data: { emoji: '🦁', name: 'Nursultan' }
        },
        {
          entities: {
            headers: { 'name-header': 'Dmitriy' }
          },
          data: { emoji: '☄', name: 'Dmitriy' }
        }
      ]
    }
  ]
};

module.exports = mockServerConfig;

Now you can make a request with an additional header and get the desired result

fetch('http://localhost:31299/user', {
  headers: { 'name-header': 'Nursultan' }
})
  .then((response) => response.json())
  .then((data) => console.log(data)); // {  emoji: '🦁', name: 'Nursultan' }

Static Path

Entity for connecting statics to the server, like HTML, JSON, PNG, etc.

• string path to your static files
• Object<{prefix, path}
  • prefix {string} path prefix for request
  • path {string} path to your static files
• Array<string | Object<{prefix, path}>>

Cors

Object with settings for CORS. You can flexibly configure the required origin, methods, headers, credentials, maxAge for the entire server. If you do not specify CORS settings, then it will be disabled.

• origin {string | RegExp | Array<string | RegExp> | Function | Promise } available origins from which requests can be made
• methods? {Array<GET | POST | DELETE | PUT | PATCH>} available methods (default: *)
• headers? {Array} available methods (default: *)
• credentials? {boolean} param tells browsers whether to expose the response to the frontend JavaScript code (default: true)
• maxAge? {number} how long the results can be cached (default: 3600)

Interceptors

Functions to change request or response parameters

• request? (params) => void
• response? (data, params) => any

Request

• params
  • request request object

Response

• data {any} mock data of request
• params
  • request request object
  • response response object
  • setDelay (delay) => Promise
    • delay {number} seconds of delay time
  • setStatusCode (statusCode) => void
    • statusCode {number} status code for response

✨ Contributors

☄️ debabin

👹 MiaInturi

🐘 RiceWithMeat