2.6.7 • Public • Published

    Mock Server


    build npm node version code style: prettier

    A widget for mocking back-end api when development, it will generate mock data by local file configuration, and start a node server. Then just forward the client-side request to that server.


    mock-server-local requires node v8.x.x or higher.

    Global install

    npm install -g mock-server-local

    Local install within project

    npm install mock-server-local --save-dev


    Usage: mock [options]
    Mock your apis with a node server
      -v, --version      output the version number
      -p, --port [port]  port server should listen on, defalut 8888, +1 when port is used
      -d, --dir [dir]    dir path of mock data, default "."
      -h, --help         output usage information

    Attention: When the port is specified (-p/--port), if the specified port is already occupied, it will return error and fail to start server. It will perform port availability checks and dynamically determine ports only when start with the default port.

    Start mock server

    Setup a new folder to store the mock data configuration. Suppose the api that need to be mock is, and the should simulate three behaviors.

      1. Login succeeds, return user information and login status
      2. Login failed, return the cause of the error
      3. It takes too long, causing the frontend request to time out

    Then the mock file configuration directory structure should look like this:

    |- mock
        |- api
          |- login
            |- login success
              |- data.js # define res data
            |- login fail
              |- data.js
            |- it takes too long
              |- data.js
              |- http.js # define res http header, status code, time cost
    mock -p 8888 -d ./mock # ./mock is the dir wherr you place the mock api data
    you can access mock server: # local ip
    you can access mock server view: # local ip

    And then visit in browser. Check the data you want to respond to api.

    //mock/ success/data.js
    module.exports = {
      code: '0',
      msg: 'ok',
      data: {
        username: 'ahui'

    Mock server panel

    You can directly request$mock-api? to verify that the mock data is properly configured.

    Verify mock server

    Project Settings

    After starting the mock server, we need to proxy the project's request to our mock server.

    Suppose our mock server is, and the mock api is*.


    See create-react-app#docs for details

    // src/setupProxy.js
    const proxy = require('http-proxy-middleware');
    module.exports = function(app) {
      const options = {
        target: '', // mock server
        headers: {
          host: '' // here to fill in the host of the specific mock api
      app.use(proxy('/api', options));

    vue-cli 3.x

    // vue.config.js
    // ...
    devServer: {
      proxy: {
        '/api': {
          target: '',
          headers: {
            host: '' // not work
          onProxyReq: function(proxyReq, req, res) {
            proxyReq.setHeader('host', '');
    // ...

    vue webpack template (vue-cli 2.x)

    // config/index.js
    proxyTable: {
      '/api': {
        target: '',
        headers: {
          host: ''


    The proxy function of webpack.devServer is http-proxy-middleware.

    Its configuration are no different from the above three, because the above three are also using webpack.devServer.

    Proxy Tools

    If your project does not depend on webpack (or other module bundler tools), and not using http-proxy-middleware too.

    Also can forward request using a proxy tool, such as whistle. #* requests will be forwarded to the mock server # Local server for server front-end resource during development

    More documentation


    Recommend to install mock-server-local as a devDependency within project.

    cd xxx_project
    npm install mock-server-local --save-dev

    Create a mock directory in the project directory to place the mock api configuration.

    |- xxx_project
      |- mock
      |- package.json

    Then use npm script to start the mock server

    // package.json
      "scripts": {
        "mock": "mock -p 8888 -d ./mock"
    npm run mock

    Place the mock api in project, it will be easy to maintain mock api by members via CVS.

    And the newcomer can also better understand the logic/abnormal process through the mock api.


    git clone
    cd mock-server && npm install
    cd fe && npm install
    npm run dev # cwd: /path/to/mock-server


    • pac support
    • ws support
    • run as daemon process
    • request record
    • ...


    npm i mock-server-local

    DownloadsWeekly Downloads






    Unpacked Size

    5.7 MB

    Total Files


    Last publish


    • funkylover