A fake server plugin for Vite.
npm install vite-plugin-fake-server
A fake server plugin for Vite. Live Demo
- Simple to use, configuration file driven.
- Support ECMAScript modules(ESM) and CommonJS modules(CommonJS).
- Friendly type prompt - defineFakeRoute.
- No reliance on fake library - you can use @faker-js/faker or mockjs and so on.
- Support HTTP/1 and HTTP/2 - http2 option.
- Support ts, js, mjs, cjs, cts, mts files.
- Support multiple response methods - responseType.
- Support custom response headers.
- Support development and production environments.
- Support exporting independent deployment services - build option.
- Support interception XHR and Fetch request - XHook.
- Support requesting real URL.
``bash`
npm install --save-dev vite-plugin-fake-server
Configure plugins in the configuration file of Vite, such as vite.config.ts:
`ts
// vite.config.ts
import { defineConfig } from "vite";
import { vitePluginFakeServer } from "vite-plugin-fake-server";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vitePluginFakeServer(),
],
});
`
You can create a new file in the fake folder in the directory where the Vite configuration file is located, such as user.fake.ts:
`ts
import { faker } from "@faker-js/faker";
// fake/user.fake.ts
import Mock from "mockjs";
import { defineFakeRoute } from "vite-plugin-fake-server/client";
export default defineFakeRoute([
{
url: "/mock/get-user-info",
response: () => {
return Mock.mock({
id: "@guid",
username: "@first",
email: "@email",
avatar: "@image(\"200x200\")",
role: "admin",
});
},
},
{
url: "/fake/get-user-info",
response: () => {
return {
id: faker.string.uuid(),
avatar: faker.image.avatar(),
birthday: faker.date.birthdate(),
email: faker.internet.email(),
firstName: faker.person.firstName(),
lastName: faker.person.lastName(),
sex: faker.person.sexType(),
role: "admin",
};
},
},
]);
`
After starting the project through Vite, you can request the custom URL above through XHR or Fetch.
For case details, please click this link to view some examples or experience it directly online - Live Demo
The defineFakeRoute function parameters require the user to enter the route type as follows:
`ts
export interface FakeRoute {
url: string
method?: HttpMethodType
timeout?: number
statusCode?: number
statusText?: string
headers?: OutgoingHttpHeaders
response?: (processedRequest: ProcessedRequest, req: IncomingMessage, res: ServerResponse) => any
rawResponse?: (req: IncomingMessage, res: ServerResponse) => void
}
export function defineFakeRoute(config: FakeRoute | FakeRoute[]) {
return config;
}
`
#### options
##### include
Type: string\"fake"
Default:
Set the folder where the fake xxx.fake.{ts,js,mjs,cjs,cts,mts} files is stored.
##### exclude
Type: string[]\[]
Default:
Exclude files in the include directory.
document: https://github.com/mrmlnc/fast-glob#ignore
##### infixName
Type: string ｜ boolean\"fake"
Default:
Set the infix name used in the fake file name.
##### watch
Type: boolean\true
Default:
Set whether to listen to include files.
##### logger
Type: boolean\true
Default:
Set whether to display the request log on the console.
In order to maintain logs and screen clearing strategies consistent with Vite style on the terminal, the vite-plugin-fake-server plugin will automatically read the following three parameters in the Vite configuration file or in the Vite command line.
- loglevel
- customlogger
- clearScreen
A preview image:
##### extensions
Type: string[]\["ts", "js", "mjs", "cjs", "cts", "mts"]
Default:
Set the fake files extensions.
##### timeout
Type: number\undefined
Default:
Set default response delay time.
##### basename
Type: string\""
Default:
Set the root address of the request URL.
##### headers
Type: OutgoingHttpHeaders\{}
Default:
Set default headers for responses.
##### enableDev
Type: boolean\true
Default:
Set up the service simulator in the development environment.
Powered by Connect technology.
##### enableProd
Type: boolean\false
Default:
Set up the service simulator in the production environment.
Powered by XHook technology.
> ⚠️ The node module cannot be used in the fake file, otherwise the production environment will fail.As an alternative to keep consistent with the development environment, you can build a standalone deployment server, see build option.
Compared with the development environment, the API interface defined in the production environment does not have a rawResponse function. The response function does not have the second parameter request and the third parameter response.
`ts`
export interface FakeRoute {
url: string
method?: HttpMethodType
timeout?: number
statusCode?: number
statusText?: string
headers?: OutgoingHttpHeaders
response?: (processedRequest: ProcessedRequest) => any
}
##### http2
Type: boolean
Clarify that the plugin runs on the HTTP/2 protocol. By default, automatically follow Vite's server-https configuration.
> The status text in HTTP/2 is always an empty string.
##### build
Type: boolean | ServerBuildOptions\false
Default:
Set whether to export a independently deployable fake service(only valid in build mode).
`tsroot
interface ServerBuildOptions {
/**
* @description Server port
* @default 8888
*/
port?: number
/**
* Directory relative from where build output will be placed. If the`
* directory exists, it will be removed before the build.
* @default "fakeServer"
*/
outDir?: string
}
- vite-plugin-mock
- XHook
- connect
1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
#### In development environment
`packages/vite-plugin-fake-server
npm run build:watch
#### In production environment
packages/vite-plugin-fake-server
npm run build:watchpackages/playground/react-sample
npm run build
npm run preview
3. Commit your changes: git commit -am "Add some feature"
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D
MIT License © 2023-Present Condor Hero