KIN Mock Server

A lightweight, flexible mock server for frontend development with easy API mocking capabilities.

Overview

KIN Mock Server is a development tool that allows you to create and manage mock APIs for frontend development. It provides a simple way to define API endpoints and their responses, making it ideal for developing frontend applications without depending on a real backend.

Features

• 🚀 Easy Setup: Quick initialization with a CLI tool
• 🔄 Live Reloading: Changes to mock files are reflected immediately
• 🎮 API Documentation: Auto-generated documentation for all endpoints
• ⏱️ Configurable Delays: Simulate network latency for realistic testing
• 🧩 TypeScript Support: Full TypeScript support for type safety
• 🔌 Flexible Integration: Works with any frontend framework (React, Angular, etc.)

Installation

Global Installation

npm install -g @modhub/kin-mock-server

Project Installation

npm install --save-dev @modhub/kin-mock-server

Quick Start

Initialize a New Project

npx kin-mock-server-cli init my-mock-api
cd my-mock-api
npm install
npm start

Project Structure

After initialization, your project will have the following structure:

my-mock-api/
├── mock-fn/
│   └── example.mock.ts
├── routes.ts
├── package.json
└── tsconfig.json

Usage

Define Routes

Edit the routes.ts file to define your API endpoints:

import { createMockServer, type ApiDef } from '@modhub/kin-mock-server';
import path from 'node:path';
import { fileURLToPath } from 'node:url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const routes: ApiDef = {
  users: {
    urlPattern: '/api/users',
    mockFnPath: './mock-fn/users.mock.ts',
    delay: 200,
    disabled: false
  },
  // Add more routes as needed
};

export const mockServer = createMockServer(routes, __dirname).start({ port: 3000 });

Create Mock Responses

Create a mock file in the mock-fn directory:

// mock-fn/users.mock.ts
import { MockFn } from '@modhub/kin-mock-server';

export const mockFn: MockFn<any, { data: any[] }> = (req) => ({
  data: [
    { id: 1, name: 'John Doe', email: '[email protected]' },
    { id: 2, name: 'Jane Smith', email: '[email protected]' }
  ]
});

Access Your Mock API

Once started, your mock server will be available at http://localhost:3000.

• View API documentation: http://localhost:3000/
• Access endpoints: http://localhost:3000/api/users

Advanced Usage

Request Parameters

Access request parameters in your mock functions:

export const mockFn: MockFn<any, { data: any }> = (req) => {
  const userId = req.params.id;
  
  return {
    data: { id: userId, name: 'John Doe' }
  };
};

Conditional Responses

Create dynamic responses based on request data:

export const mockFn: MockFn<any, { data: any }> = (req) => {
  if (req.query.error === 'true') {
    return new Error('Custom error message');
  }
  
  return {
    data: { success: true }
  };
};

Using with Frontend Frameworks

Examples for integrating with various frontend frameworks are available in the examples directory.

Configuration

Server Options

createMockServer(routes, __dirname).start({ 
  port: 4000,  // Custom port (default: 3000)
  host: '0.0.0.0'  // Custom host (default: localhost)
});

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

ISC