Main purposes of this pet-project was to make simple mock server with UI configuration, to work with Express and Node. But it can be used in development if:

• you have contracts but not working api
• want to test your app and don't want to make all steps to reproduce api-response

• Getting Started
  • With the CLI
  • With NPM Scripts
• Usage
  • Configuration
    • Defining response
      • Example
    • Saving mocks
• Development
• Next steps

First, install the module:

npm i panda-mock-server --save-dev 

There are two ways of start the app:

npx panda-mock-server start [mock_port] [settings_port]

NPM package.json scripts are the way to run locally installed binaries. Simply define a script as such:

{
  "scripts": {
    "mock_server": "panda-mock-server start"
  }
}

And run the following in your terminal/console:

npm run mock_server

In case of success you can find the messages about ports in console.

After server had been started you can specify http://localhost:[mock_port] as api-url for your web-app and track requests or configure responses on http://localhost:[settings_port].

The server supports only JSON http requests.

You can define different responses for different paths and methods.

A response can be static or use fields from your request, the following fields are available:

• body - request body (empty object for GET request)
• path - request path
• method - request method (supports GET, POST, PUT, DELETE and PATCH)
• query - object containing request query

To define response you have to fill mocks form in the settings app, specify path, method, response template and variables. A variable contains of name ( string values in template, can be nested) and path to value in request object (null will be returned if path cannot be resolved). Variables can be set as object with keys - variable names and values - paths.

Suppose we create POST mock for path / mock with this template:

{
  "greeting": "$greet_var",
  "name": "$name_var",
  "request": "$req_var"
}

and following variables:

{
  "$req_var": [],
  "$name_var": ["query", "name"],
  "$greet_var": ["body","greeting"]
}

Now by this request

fetch("http://localhost:8002/?name=world", {
"body": "{\"greeting\":\"hello\"}",
"method": "POST",
})

we will get following result

{
  greeting: "hello"
  name: "world"
  request: {
    body: {greeting: "hello"},
    method: "POST",
    query: { name: "world" },
    path: "/",
  }
}

Server stores all mocks in memory, so you can save current mocks state using files dialog.

To start server and client in development mode or make some fixes

• Download source code and install dependencies
• Configure ports using .env file

  npm i

• Start dev-server with isolated client

  npm run dev:client

• Start dev-server with hot reload

  npm run dev:server