api-mocker-middleware
api-mocker-middleware is a webpack-dev-server middleware that creates mocks for REST APIs. It will be helpful when you try to test your application without the actual REST API server.
Features:
🔥 Built in support for hot Mock file replacement.
🚀 Quickly and easily configure the API via JSON.
🌱 Mock API proxying made simple.
Installation
npm install api-mocker-middleware --save-dev
Usage
Just put your mock files in a dir such as ./mock
.
const proxy = 'GET /api/user': id: 1 username: 'kenny' sex: 6 'GET /api/user/list': id: 1 username: 'kenny' sex: 6 id: 2 username: 'kenny' sex: 6 { const password username = reqbody; if password === '888888' && username === 'admin' return res; else return res; } { console console res; }moduleexports = proxy;
doMock
Express
Using withconst path = require('path');const express = require('express');+ const doMock = require('api-mocker-middleware'); const app = express(); + doMock(app, { path: path.resolve('./mock/')})app.listen(8080);
Webpack
Using withTo mock on your Webpack projects, simply add a setup options to your webpack-dev-server options:
Change your config file to tell the dev server where to look for files: webpack.config.js
.
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');+ const doMock = require('api-mocker-middleware'); module.exports = { entry: { app: './src/index.js', print: './src/print.js' }, devtool: 'inline-source-map',+ devServer: {+ ...+ before(app){+ doMock(app, { path: path.resolve('./mock'), proxy:{+ 'GET /api/user/list': 'http://localhost:3000',+ 'GET /api/prod/*': 'http://localhost:3000',+ }})+ }+ }, plugins: [ new HtmlWebpackPlugin({ title: 'Development' }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }};
Just put your mock files in a dir such as ./mock
.
Let's add a script to easily run the dev server as well: package.json
{ "name": "development", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1",+ "start": "webpack-dev-server --open", "build": "webpack" }, "keywords": [], "author": "", "license": "MIT", "devDependencies": { .... } }
Mock API proxying made simple.
{ }