DEV Community

Alejandro Rodriguez
Alejandro Rodriguez

Posted on

Mock Your API in 5 Minutes with JSON (No Backend Required)

#testing #frontend #javascript #typescript

Your frontend needs the API now. The backend isn’t ready, staging is down, or you want to trigger a 500 without asking anyone to break the server.

In this article you’ll:

  1. Install a local mock server
  2. Define an endpoint in a JSON file
  3. Call it with curl (or from your app) as if it were the real API

This isn’t an embeddable SDK — it’s a CLI that boots HTTP on your machine. Your app talks to http://localhost:3001 the same way it would talk to staging.

Prerequisites

  • Node.js >= 22.12
  • A project with a package.json (recommended)

1. Install 

npm install http-mock-json --save-dev
Enter fullscreen mode Exit fullscreen mode

The CLI binary is mock-server.

2. Initialize 

npx mock-server init
Enter fullscreen mode Exit fullscreen mode

By default this will:

  • Create a mocks/ directory
  • Add a mock:start script to your package.json (mock-server start -p 3001)
  • Prompt you to create a first mock

For the prompts, you can use something like:

Prompt Example
JSON file name animals → mocks/animals.json
Endpoint data/animals
Methods GET

The scaffold sets nameResponse to "success" and includes two empty responses: success (200) and error (404).

3. Fill in the response bodies

Open mocks/animals.json and make it look like this:

{
  "data/animals": {
    "GET": {
      "nameResponse": "success",
      "responses": [
        {
          "name": "success",
          "statusCode": "200",
          "body": {
            "animals": [
              { "id": 1, "name": "Lion" },
              { "id": 2, "name": "Tiger" }
            ]
          }
        },
        {
          "name": "error",
          "statusCode": "404",
          "body": {
            "message": "No animals found"
          }
        }
      ]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

What you need on day one:

Piece Role
Top-level key Endpoint path (data/animals)
Uppercase method GET, POST, etc.
nameResponse Which scenario is returned by default
responses[] Named scenarios with name, statusCode, and body

4. Start the server 

npx mock-server start
Enter fullscreen mode Exit fullscreen mode

Or, if init added the script:

npm run mock:start
Enter fullscreen mode Exit fullscreen mode

Both listen on port 3001 by default (http://localhost:3001).

On start, every mock file is validated. Errors block startup — fix them and run again.

Watch mode is always on: save a mock file and the server reloads.

5. Try it 

curl -i http://localhost:3001/data/animals
Enter fullscreen mode Exit fullscreen mode

(Use port 3001 if you started via the init script.)

You should see something like:

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8

{"animals":[{"id":1,"name":"Lion"},{"id":2,"name":"Tiger"}]}
Enter fullscreen mode Exit fullscreen mode

In your frontend, point the API base URL at that local host. Same HTTP calls — different “backend.”

10-second bonus: flip to the error scenario

Change this in the JSON:

"nameResponse": "error"
Enter fullscreen mode Exit fullscreen mode

Save the file (watch reloads) and run curl again. You now get the 404 with the error message — without touching the frontend.

That’s the core idea: same URL, different backend behavior, controlled from JSON.

What you just got

  • A local mock server in minutes
  • An endpoint defined in a file the team can read and version
  • Success ↔ error by editing a single key

Links

If this helps, drop a ⭐ on the repo or comment with which API you’re mocking.

Top comments (0)