🚀 Futuristic API Mock Server for Frontend
Manta Style generates API mock endpoints from TypeScript type definitions automatically.
Contents
npm install --save-dev @manta-style/cliYou could also install it globally, which adds a command line tool ms to your system.
Manta Style needs plugins to support different file types and generate mock data.
The example of Quick Start below is using TypeScript. So first you might want to install TypeScript support to Manta Style.
npm install --save-dev @manta-style/plugin-builder-typescriptIf you are new to Manta Style, please install the plugins below. We are going to use them in Quick Start.
npm install --save-dev @manta-style/plugin-mock-example @manta-style/plugin-mock-fakerYou could check Plugins for the usages of official plugins. You could make our own plugins as well.
You could use following configuration for test purpose. For more information about syntax, please check out Syntax.
interface User {
/**
* @faker {{internet.userName}}
*/
userName: string;
gender: 0 | 1 | 2;
/**
* @faker date.past
*/
birthday: number;
/**
* @faker {{address.country}}
*/
country: string;
/**
* @faker {{address.state}}
*/
state: string;
/**
* @faker {{address.city}}
*/
city: string;
}
type WithResponseSuccess<T> = {
status: 'ok';
data: T;
};
type WithResponseFailure = {
status: 'error';
/**
* @example Bad Request
*/
message: string;
};
type WithResponse<T> = WithResponseSuccess<T> | WithResponseFailure;
export type GET = {
'/user': WithResponse<User>;
};ms -c ./config.tsManta Style launches a mock server at port 3000 by default. The above-stated example would generate following output in the terminal:
Manta Style launched at http://localhost:3000
┌────────┬────────────────────────────┬────────┬───────┐
│ Method │ Endpoint │ Mocked │ Proxy │
├────────┼────────────────────────────┼────────┼───────┤
│ GET │ http://localhost:3000/user │ Y │ │
└────────┴────────────────────────────┴────────┴───────┘
Press O to configure selective mocking
[FAKER MODE] Press S to take an instant snapshot
To view the mock data of the example above-stated, just launch a browser (or curl, wget) and access http://localhost:3000/user. Manta Style understands your type definition and generates mock data that respects it.
As WithResponse<User> = WithResponseSuccess<User> | WithResponseFailure, Manta Style would randomly choose one of the types in the union type. Therefore, it could randomly generate mock data for any of following cases:
WithResponseSuccess<User>:
{
"status": "ok",
"data": {
"userName": "Zachariah.VonRueden20",
"gender": 2,
"birthday": 646869600,
"country": "Holy See (Vatican City State)",
"state": "Massachusetts",
"city": "South Evietown"
}
}WithResponseFailure:
{ "status": "error", "message": "Bad Request" }Press S to enable snapshot mode for a constant output.
Press O to interactively disable or proxy a mocked endpoint.
$ ms --help
Usage: ms [options]
Options:
-V, --version output the version number
-c --configFile <file> the TypeScript config file to generate entry points
-p --port <i> [3000] To use a port different than 3000
--proxyUrl <url> To enable proxy for disabled endpoints
--generateSnapshot <file> To generate a API mock data snapshot (Not yet implemented.)
--useSnapshot <file> To launch a server with data snapshot
-v --verbose show debug information
-h, --help output usage information
Manta Style supports TypeScript only at the moment via plugin-builder-typescript. More language support is coming soon.
yarn install
yarn run bootstrap
yarn run build- Zhongliang Wang for original idea, architecture design, initial implementation of runtime and transformers.
- Tan Li Hau for the design and implementation of selective mocking, plugin system, and many official plugins.
- Jennie Ji for implementation of live-reload feature.
Manta Style is MIT licensed