Vite Connect API Mocker

It’s a Vite plugin that implements Node.js and Connect to create a middleware that simulates API responses. It is particularly useful for mocking APIs in SPA applications.

Requirements

• vite >= 4.0.0
• esbuild >= 0.17

Installation

npm install vite-connect-api-mocker --save-dev

Usage

• Creation folder mocks in root project
• Creation folder api in mocks folder
• Creation folder product in api folder
• Creation file POST.json in product folder

import {
  connectApiMocker,
  HttpMethods,
  HttpStatus,
  HttpContentType,
} from 'vite-connect-api-mocker'
import fs from 'fs/promises'

export default defineConfig({
  plugins: [
    connectApiMocker({
      mocks: [
        {
          url: '/api/product',
          method: HttpMethods.POST,
          timeout: 2000,
          statusCode: HttpStatus.CREATED,
          contentType: HttpContentType.JSON,
          response: async (req, res) => {
            const response = await fs.readFile(
              './mocks/api/product/POST.json',
              'utf-8',
            )
            res.end(response)
          },
        },
      ],
    }),
  ],
})

Available Enumerations

HttpStatus

This enumeration provides standard HTTP status codes that you can use to simulate API responses.

import { HttpStatus } from 'vite-connect-api-mocker';

console.log(HttpStatus.CREATED); // 201
console.log(HttpStatus.BAD_REQUEST); // 400

Code	Name	Description
201	CREATED	The request was successful and a resource was created.
200	OK	The request was successful.
400	BAD_REQUEST	The request is invalid.
401	UNAUTHORIZED	The client is not authorized.
403	FORBIDDEN	The client does not have permission to perform this.
404	NOT_FOUND	The requested resource does not exist.
409	CONFLICT	Conflict with the current state of the resource.
500	INTERNAL_SERVER_ERROR	Internal server error.
503	SERVICE_UNAVAILABLE	The service is unavailable.
504	GATEWAY_TIMEOUT	The server did not respond in time.
502	BAD_GATEWAY	Gateway or proxy error.
422	UNPROCESSABLE_ENTITY	Unprocessable entity.
429	TOO_MANY_REQUESTS	Too many requests in a short period of time.
413	PAYLOAD_TOO_LARGE	Payload is too large.
451	UNAVAILABLE_FOR_LEGAL_REASONS	Unavailable due to legal reasons.
511	NETWORK_AUTHENTICATION_REQUIRED	Network authentication is required.
599	NETWORK_CONNECT_TIMEOUT_ERROR	Network connection timeout occurred.

---

HttpMethods

This enum lists the standard HTTP methods you can use when interacting with a mock API.

import { HttpMethods } from 'vite-connect-api-mocker';

console.log(HttpMethods.POST); // 'POST'
console.log(HttpMethods.GET); // 'GET'

Method	Description
POST	Sends data to create a resource.
GET	Retrieves data from the server.
PUT	Updates or creates a full resource.
DELETE	Deletes an existing resource.
PATCH	Partially updates an existing resource.

---

HttpContentType

This enum defines the most common content types you can use in HTTP requests or responses.

import { HttpContentType } from 'vite-connect-api-mocker';

console.log(HttpContentType.JSON); // 'application/json'
console.log(HttpContentType.HTML); // 'text/html'

Type	Value	Description
JSON	application/json	JSON data format.
TEXT	text/plain	Plain text.
HTML	text/html	HTML document.
XML	application/xml	XML data format.
PDF	application/pdf	PDF file.
IMAGE	image/jpeg	JPEG image.
VIDEO	video/mp4	MP4 video.
AUDIO	audio/mpeg	MPEG audio.

---