mock-config-server
Advanced tools
Tool that easily and quickly imitates server operation, create full fake api in few steps
tool that easily and quickly imitates server operation, create full fake api in few steps
$ npm i mock-config-server --save --dev
# or
$ yarn add mock-config-server --dev
🎉 Mock Config Server it is a tool that, easily, quickly simulates the work of a server. The main difference from solutions such as json-server and mock-service-worker is the ease of filling in data and flexible emulation of any and usual cases. Our goal is to create a simple and flexible system for users, with the help of which they can create, test, and support their products.
Install 🎉 Mock Config Server with npm or yarn
$ npm i mock-config-server --save --dev
# or
$ yarn add mock-config-server --dev
Create a mock-server.config.js file with server configuration
/** @type {import('mock-config-server').MockServerConfig} */
const mockServerConfig = {
rest: {
baseUrl: '/api',
configs: [
{
path: '/user',
method: 'get',
routes: [{ data: { emoji: '🦁', name: 'Nursultan' } }]
}
]
}
};
export default mockServerConfig;
Start 🎉 Mock Config Server
$ npx mock-config-server
If the package is already installed you can use short command
mcs
rest? Rest configs for mock requests
graphql? GraphQL configs for mock requests
staticPath? {StaticPath} entity for working with static files, readinterceptors? {Interceptors} functions to change request or response parameters, readcors? {Cors} CORS settings object (default: CORS is turn off), readport? {number} server port (default: 31299)baseUrl? {string} part of the url that will be substituted at the beginning of the request url (default: '/')Configs are the fundamental part of the mock server. These configs are easy to fill and maintain. Config entities is an object with which you can emulate various application behaviors. You can specify headers | cookies | query | params | body for Rest request or headers | cookies | query | variables for GraphQL request to define what contract data you need to get. Using this mechanism, you can easily simulate the operation of the server and emulate various cases
path {string | RegExp} request pathmethod {GET | POST | DELETE | PUT | PATCH} rest api methodroutes {RestRouteConfig[]} request routes
data {any} mock data of requestentities? Object<headers | cookies | query | params | body> object that helps in data retrievalinterceptors? {Interceptors} functions to change request or response parameters, readinterceptors? {Interceptors} functions to change request or response parameters, readoperationType {query | mutation} graphql operation typeoperationName {string} graphql operation nameroutes {GraphQLRouteConfig[]} request routes
data {any} mock data of requestentities? Object<headers | cookies | query | variables> object that helps in data retrievalinterceptors? {Interceptors} functions to change request or response parameters, readinterceptors? {Interceptors} functions to change request or response parameters, read/** @type {import('mock-config-server').MockServerConfig} */
const mockServerConfig = {
rest: {
baseUrl: '/api',
configs: [
{
path: '/user',
method: 'get',
routes: [
{
entities: {
headers: { 'name-header': 'Nursultan' }
},
data: { emoji: '🦁', name: 'Nursultan' }
},
{
entities: {
headers: { 'name-header': 'Dmitriy' }
},
data: { emoji: '☄', name: 'Dmitriy' }
}
]
}
]
}
};
module.exports = mockServerConfig;
Now you can make a request with an additional header and get the desired result
fetch('http://localhost:31299/api/user', {
headers: {
'name-header': 'Nursultan',
'Content-Type': 'application/json'
}
})
.then((response) => response.json())
.then((data) => console.log(data)); // { emoji: '🦁', name: 'Nursultan' }
/** @type {import('mock-config-server').MockServerConfig} */
const mockServerConfig = {
graphql: {
baseUrl: '/graphql',
configs: [
{
operationType: 'query',
operationName: 'GetUser',
routes: [
{
entities: {
headers: { 'name-header': 'Nursultan' }
},
data: { emoji: '🦁', name: 'Nursultan' }
},
{
entities: {
headers: { 'name-header': 'Dmitriy' }
},
data: { emoji: '☄', name: 'Dmitriy' }
}
]
}
]
}
};
module.exports = mockServerConfig;
Now you can make a request with an additional header and get the desired result
const body = JSON.stringify({
query: 'query GetUser { name }'
});
fetch('http://localhost:31299/graphql', {
method: 'POST',
headers: {
'name-header': 'Nursultan',
'Content-Type': 'application/json'
},
body
})
.then((response) => response.json())
.then((data) => console.log(data)); // { emoji: '🦁', name: 'Nursultan' }
If you need more complex logic for matching entities, you can use entity descriptors.
Descriptor is an object with checkMode and value fields that describe how the correctness of the actual entity is calculated.
Allowed checkModes
Value for checkMode except function | exists | notExists can be array, so you can write even more complex logic. For example "does not contain these values" or "must be match to one of these regExp".
/** @type {import('mock-config-server').MockServerConfig} */
const mockServerConfig = {
rest: {
baseUrl: '/api',
configs: [
{
path: '/user',
method: 'get',
routes: [
{
entities: {
headers: {
// 'name-header' is 'Dmitriy' or 'Nursultan'
'name-header': {
checkMode: 'equals',
value: ['Dmitriy', 'Nursultan']
},
// check for 'equals' if descriptor not provided
role: 'developer'
},
cookies: {
// any 'token' cookie
token: {
checkMode: 'exists'
},
// 'someSecretToken' cookie can be '123-abc' or 'abc-999' for example
someSecretToken: {
checkMode: 'regExp',
value: [/^\d\d\d-abc$/, /^abc-\d\d\d$/]
}
}
},
data: 'Some user data for Dmitriy and Nursultan'
}
]
}
]
}
}
module.exports = mockServerConfig;
function checkMode is the most powerful way to describe your entities logic, but in most cases you will be fine using other checkModes.
Function value has the following signature (actualValue, checkFunction) => boolean.
Return true if actualValue matches your logic or false otherwise.
You can use the checkFunction from second argument if you want to describe your logic in a more declarative way.
checkFunction has the following signature (checkMode, actualValue, descriptorValue?) => boolean.
If you want to check a certain field of your body or variables, you can use descriptors in flatten object style. In this case server will check every field in entity with corresponding actual field. You can use descriptors for array body elements as well.
/** @type {import('mock-config-server').MockServerConfig} */
const mockServerConfig = {
rest: {
baseUrl: '/api',
configs: [
{
path: '/users',
method: 'post',
routes: [
{
entities: {
body: {
'user.name': 'Sergey'
}
},
data: 'user.name in body is "Sergey"'
}
]
},
{
path: '/posts',
method: 'post',
routes: [
{
entities: {
body: {
'title': {
checkMode: 'startsWith',
value: 'A'
}
}
},
data: 'title in body starts with "A"'
}
]
},
{
path: '/posts',
method: 'post',
routes: [
{
entities: {
body: [
{
checkMode: 'startsWith',
value: 1
},
2
]
},
data: 'array[0] starts with "1" and array[1] equals "2"'
}
]
}
]
}
}
module.exports = mockServerConfig;
To enable whole body/variables checking as plain object you should use descriptor for entire body/variables.
/** @type {import('mock-config-server').MockServerConfig} */
const mockServerConfig = {
rest: {
baseUrl: '/api',
configs: [
{
path: '/users',
method: 'post',
routes: [
{
entities: {
body: {
checkMode: 'equals',
value: {
user: {
name: 'Sergey',
emoji: '🐘',
roles: ['developer', 'moderator']
}
}
}
},
data: 'your body is strictly equals object from body entity value'
}
]
}
]
}
}
module.exports = mockServerConfig;
Entity for connecting statics to the server, like HTML, JSON, PNG, etc.
string path to your static filesObject<{prefix, path}
prefix {string} path prefix for requestpath {string} path to your static filesArray<string | Object<{prefix, path}>>Object with settings for CORS. You can flexibly configure the required origin, methods, headers, credentials, maxAge for the entire server. If you do not specify CORS settings, then it will be disabled.
origin {string | RegExp | Array<string | RegExp> | Function | Promise } available origins from which requests can be mademethods? {Array<GET | POST | DELETE | PUT | PATCH>} available methods (default: GET,OPTIONS,PUT,PATCH,POST,DELETE)allowedHeaders? {Array} allowed headers (default: *)exposedHeaders? {Array} exposed headers (default: *)credentials? {boolean} param tells browsers whether to expose the response to the frontend JavaScript code (default: true)maxAge? {number} how long the results can be cached (default: 3600)Functions to change request or response parameters
request? (params) => voidresponse? (data, params) => anyparams
request request objectsetDelay (delay) => Promise
delay {number} milliseconds of delay timegetHeader (field) => string | number | string[] | undefined
field {string} name of response headergetHeaders () => Record<string | number | string[] | undefined>getCookie (name) => string | undefined
name {string} name of cookiedata {any} mock data of requestparams
request request objectresponse response objectsetDelay (delay) => Promise
delay {number} milliseconds of delay timesetStatusCode (statusCode) => void
statusCode {number} status code for responsesetHeader (field, value) => void
field {string} name of response headervalue {string | string[] | undefined} value of response headerappendHeader (field, value) => void
field {string} name of response headervalue {string | string[] | undefined} value of response headergetHeader (field) => string | number | string[] | undefined
field {string} name of response headergetHeaders () => Record<string | number | string[] | undefined>setCookie (name, value, options) => void
name {string} name of cookievalue {string} value of cookieoptions {CookieOptions | undefined} cookie options (like path, expires, etc.)getCookie (name) => string | undefined
name {string} name of cookieclearCookie (name, options) => void
name {string} name of cookieoptions {CookieOptions | undefined} cookie options (like path, expires, etc.)attachment (filename) => void
filename {string} name of file in 'Content-Disposition' headermcs [options]
Options:
--baseUrl, -b Set base url (default: '/')
--port, -p Set port (default: 31299)
--staticPath, -s Set static path
--config, -c Set path to config file (default: './mock-server.config.(?:ts|mts|cts|js|mjs|cjs)')
--watch, -w Enables server restart after config file changes (default: false)
--version, -v Show version number
--help, -h Show help
Examples:
mcs --baseurl /base/url --port 3000 --config ./path/to/config.ts -w
mcs --help
☄️ debabin |
👹 MiaInturi |
🐘 RiceWithMeat |
FAQs
Tool that easily and quickly imitates server operation, create full fake api in few steps
We found that mock-config-server demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.