No Database? No Problem! Build Local Mock APIs with JSON Server

A Mock service simulates backend API data, enabling frontend developers to rapidly debug pages or test various data scenarios. This article demonstrates how to build a local Mock service in three simple steps using JSON Server, requiring only a JSON file and no database setup!

Table of Contents

1. Prerequisites

• Install Node.js

• Install JSON Server

2. Building the Mock Service

• Step 1: Create a Mock Data File (db.json)

• Step 2: Start the JSON Server

• Step 3: Verify API Endpoints

3. Debugging and Extensions

• Auto-Update Data

• Debugging with Apidog

4. FAQ

• Port Conflicts

• Data Not Updating

5. Conclusion

I. Prerequisites

1. Install Node.js

Ensure Node.js is installed (download from https://nodejs.org).

Verify by running in terminal:

node -v && npm -v

If version numbers are displayed, installation is complete.

2. Install JSON Server

Open the terminal in your IDE (e.g., VS Code) and execute:

npm install -g json-server

If permission errors occur, try:

sudo npm install -g json-server

II. Building the Mock Service in 3 Steps

Step 1: Create a Mock Data File

Create a folder (e.g., mock-demo) and add a db.json file with the following content:

{
  "users": [
    { "id": 1, "name": "John Doe", "age": 25 },
    { "id": 2, "name": "Jane Smith", "age": 30 }
  ],
  "posts": [
    { "id": 1, "title": "First Post", "author": "John Doe" }
  ]
}

📝 Explanation:

• users and posts represent two API endpoints.

• Each endpoint returns an array of data; fields can be freely added/removed.

Step 2: Start the Service

Navigate to the project folder in terminal:

cd ~/Desktop/mock-demo

Start the server with:

json-server --watch db.json --port 3000

🔍 Parameter Details:

• --watch: Auto-reloads when db.json changes.

• --port 3000: Runs the service on port 3000 (customizable).

Successful startup will display:

Endpoints:
http://localhost:3000/users
http://localhost:3000/posts

Step 3: Verify Endpoints

Open a browser and visit:

• User list: http://localhost:3000/users

• Post list: http://localhost:3000/posts

III. Debugging and Extensions

1. Auto-Update Data

Edit db.json and save—the changes will reflect immediately upon refreshing the page.

2. Debugging with Apidog

Apidog is a modern API collaboration tool supporting debugging, mocking, and documentation. Follow these steps to test your Mock service:

Step 1: Install Apidog

1. Download: Install the desktop app from Apidog Official Site.

2. Sign Up: Use email for quick registration.

Step 2: Create a Debugging Project

1. New Project: Click "Create Project" → Name it (e.g., "Mock Service Test") → Select "Blank Template".

2. Add Request: Go to "APIs" → "New Endpoint" → Name it (e.g., "Fetch User List").

Step 3: Send a GET Request

1. Configure:

• Method: GET

• URL: http://localhost:3000/users

1. Send: Click "Send" to view the response:

[
  { "id": "1", "name": "John Doe", "age": 25 },
  { "id": "2", "name": "Jane Smith", "age": 30 }
]

Error messages can be ignored.

Step 4: Send a POST Request (Add Data)

1. Configure:

• Method: POST

• URL: http://localhost:3000/users

• Body (JSON):
  

{
  "name": "Alice Johnson",
  "age": 28
}

1. Response:

{
  "id": "a69a",
  "name": "Alice Johnson",
  "age": 28
}

Step 5: Verify Data Persistence

Resend the GET request to see the new entry:

[
  { "id": "1", "name": "John Doe", "age": 25 },
  { "id": "2", "name": "Jane Smith", "age": 30 },
  { "id": "a69a", "name": "Alice Johnson", "age": 28 }
]

Step 6: Advanced Operations (Optional)

• PUT: Update data (e.g., http://localhost:3000/users/2).

• DELETE: Remove data (e.g., http://localhost:3000/users/2).

Why Choose Apidog?

✅ No Manual Configuration: Auto-saves request history.

✅ Visual Data Display: Auto-formats JSON responses.

✅ Team Collaboration: Share documentation with one click.

✅ Enhanced Mocking: Generate dynamic data (e.g., random names, timestamps).

With Apidog, you can manage all APIs as effortlessly as building blocks and auto-generate documentation with a single click, doubling frontend-backend collaboration efficiency! 🚀

FAQ

Q1: Port already in use?

Change the port via --port 4000 in the startup command.

Q2: Data not updating?

Validate db.json syntax using JSONLint.

---

Conclusion

With JSON Server, you can create a fully functional Mock service using just a JSON file, supporting RESTful CRUD operations. It’s an ideal zero-cost solution for frontend debugging and demos. You now have a local API service—start integrating it into your projects today! 🚀

Comments

[Ranjan Dailata]

Alternatively, one could make use of the Postman for testing the Restful APIs.