API Mock Server

A lightweight, zero-config mock server for frontend development. Create mock APIs using JSON files or JavaScript/TypeScript modules.

Features

• 🚀 Zero-config setup
• 📁 File-based routing
• 🔄 Hot reloading
• 🎯 Dynamic routes with parameters
• 🛠 Support for JSON and JS/TS mock files
• ⚡️ Lightweight
• 🔓 CORS enabled for frontend development

Installation

npm install -g mockapi-lite
# or
npx mockapi-lite

Quick Start

1. Create a mocks directory in your project:

mkdir mocks

2. Add some mock files:

// mocks/users/index.json
{
  "users": [
    { "id": 1, "name": "John Doe" },
    { "id": 2, "name": "Jane Smith" }
  ]
}

// mocks/users/[id].js
export default (req) => {
  const id = parseInt(req.params.id);
  return {
    id,
    name: id === 1 ? "John Doe" : "Jane Smith",
    email: `user${id}@example.com`,
  };
};

The server automatically reloads routes when you add, remove, or change files in the mocks directory.

3. Start the server:

npx mockapi-lite

Your mock APIs are now available at:

• GET http://localhost:3000/users
• GET http://localhost:3000/users/1

Mock File Patterns

Static JSON Files

Create .json files anywhere in your mocks directory:

mocks/
  users/
    index.json         -> GET /users
    settings.json      -> GET /users/settings
  products/
    index.json         -> GET /products
    featured.json      -> GET /products/featured

Dynamic Routes

Use brackets for dynamic parameters:

mocks/
  users/
    [id].js           -> GET /users/:id
    [id]/posts.json   -> GET /users/:id/posts

JavaScript/TypeScript Modules

Create dynamic responses with JS/TS files:

// mocks/search.js
export default (req) => {
  const { q, limit = 10 } = req.query;
  return {
    query: q,
    results: Array(parseInt(limit))
      .fill()
      .map((_, i) => ({
        id: i + 1,
        title: `Result for ${q}`,
      })),
  };
};

CLI Options

npx mockapi-lite [dir] [options]

Arguments:
[dir] Path to mock directory (default: ./mocks)

Options:
--port <number> Set the server port (default: 3000)
--delay <ms> Add artificial response delay
--cors Enable CORS (default: true)
--verbose Enable verbose logging

Examples

Authentication Mock

// mocks/auth/login.js
export default (req) => {
  // For demo purposes, any username/password combo works
  let username = "User 1";
  return {
    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    user: {
      id: 1,
      username,
      name: "Test User",
      role: "user",
    },
    expires: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
  };
};

Pagination Example

// mocks/api/products.js
const products = Array(100)
  .fill()
  .map((_, i) => ({
    id: i + 1,
    name: `Product ${i + 1}`,
    price: Math.round(Math.random() * 100),
  }));

export default (req) => {
  const page = parseInt(req.query.page) || 1;
  const limit = parseInt(req.query.limit) || 10;
  const start = (page - 1) * limit;

  return {
    data: products.slice(start, start + limit),
    pagination: {
      total: products.length,
      page,
      limit,
      pages: Math.ceil(products.length / limit),
    },
  };
};

Using with Frontend Frameworks

React Example

// Using with React Query
const { data, isLoading } = useQuery({
  queryKey: ["users"],
  queryFn: () => fetch("http://localhost:3000/users").then((res) => res.json()),
});

Vue Example

// Using with Vue
const response = await fetch("http://localhost:3000/users/1");
const user = await response.json();

Contributing

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

License

MIT