hot-mock-middleware

A express middleware that creates mock server. Your can specify a directory, the files under the directory are mock files that export interface definitions，support for real-time refresh based on 'require' dynamic analysis.

Installation

1$ npm install --save-dev hot-mock-middleware

Quick start

1. Create a directory mock-server, then create the file app.js, the content is：

1const express = require('express');
2const path = require('path');
3const mockMiddleware = require('hot-mock-middleware');
4
5const app = express();
6// Use middleware to create mock server
7app.use(
8    mockMiddleware(path.resolve(__dirname, 'mock'))
9);
10
11app.listen(3000, () => console.log('Example app listening on port 3000!'));

2. Create a mock directory under mock-server and create users.js as follows:

1// mock/users.js
2
3module.exports = {
4  // supported values are Object and Array
5  'GET /api/users': { users: [1, 2] },
6
7  // GET can be omitted
8  '/api/users/1': { id: 1 },
9
10  // support for custom functions, APIs refer to express@4
11  'POST /api/users/create': (req, res) => { res.end('OK'); },
12};

3. Install dependent modules and start app:

1$ npm i -S express hot-mock-middleware
2$ node app.js

The you can then access the http://localhost:3000/api/users to view API documents.
You can create more js files in the mock directory, the mock server will automatically grab contents, also you can modify these files, ths api data will refresh real-time without restarting app.

Using with Webpack

To use with webpack projects, simply add a setup options to your webpack-dev-server options.
Change your config file webpack.config.js:

1const path = require('path');
2const mockMiddleware = require('hot-mock-middleware');
3
4module.exports = {
5    // ...
6
7    devServer: {
8        before(app) {
9            app.use(
10                mockMiddleware(path.resolve(__dirname, 'mock'))
11            );
12        }
13    }
14
15    // ...
16}

Let's add a script to easily run the dev server as well: package.json:

1{
2    "scripts": {
3        "start": "webpack-dev-server --open",
4        "build": "webpack"
5    }
6}

Then you can add some mock files in mock/ directory.

Using with create-react-app

To use with projects that created with create-react-app, create src/setupProxy.js as follows:

1// src/setupProxy.js
2const path = require('path');
3const mockMiddleware = require('hot-mock-middleware');
4
5module.exports = app => {
6    app.use(mockMiddleware(
7        path.resolve(__dirname, '../mock')
8    ));
9}

Then you can add some mock files in mock/ directory.

Demo

• Using with create-react-app
• Using with express
• Using with webpack
• Using with webpack-dev-server Node.js API
• Using with express + webpack-dev-middleware