How to Set Up and Use json-server for a Mock REST API in Your React Project

json-server is a lightweight tool that allows developers to create a fully functional mock REST API using nothing more than a simple JSON file. It is ideal for rapid prototyping, frontend development, and situations where a backend is not yet available. Setting it up is extremely quick and requires only a few commands.

To begin, json-server should be installed inside your project. It can be installed globally or locally, but adding it as a development dependency is generally recommended:

npm install json-server --save-dev

After installation, a file named db.json can be created in the root of your project. This file acts as your mock database, and each key inside it automatically becomes a REST endpoint. A simple example might look like this:

{
  "users": [
    { "id": 1, "fullName": "John Doe", "email": "john@example.com" }
  ],
  "posts": [
    { 
      "id": 1,
      "title": "My First Post",
      "excerpt": "Short summary",
      "content": "Full content here...",
      "category": "Development",
      "tags": ["react", "javascript"],
      "userId": 1,
      "createdAt": "2025-01-01T10:00:00.000Z"
    }
  ],
  "messages": [
    {
      "id": 1,
      "fullName": "Jane Smith",
      "email": "jane@mail.com",
      "phone": "+49 123 456 789",
      "message": "Hello!",
      "createdAt": "2025-01-02T12:00:00.000Z"
    }
  ]
}

Once the structure is ready, the server can be started with a single command:

npx json-server --watch db.json --port 3005

This instantly generates routes such as:

• GET /posts
• POST /posts
• GET /posts/1
• PUT /posts/1
• DELETE /posts/1

For convenience, a script can be added to package.json:

"scripts": {
  "server": "json-server --watch db.json --port 3005"
}

Now the server can be launched with:

npm run server

When integrating with React, json-server is typically paired with Axios. A base URL is defined to make API requests consistent:

const BASE_URL = "http://localhost:3005";

From there, making API calls becomes straightforward. For example, retrieving all posts:

const response = await axios.get(`${BASE_URL}/posts`);

Adding a new message:

await axios.post(`${BASE_URL}/messages`, newMessage);

Updating an item:

await axios.put(`${BASE_URL}/posts/1`, updatedPost);

And deleting a record:

await axios.delete(`${BASE_URL}/messages/1`);

json-server automatically persists changes by writing them into the db.json file, making it extremely useful during UI development. It behaves like a real backend without requiring any backend code, making it ideal for rapid prototyping and testing. However, it is not suitable for production use, as it lacks authentication, advanced logic, and overall security. Eventually, projects usually migrate to a real backend such as Firebase, Express.js, or another server technology.

json-server remains one of the fastest ways to simulate API behavior and build frontend applications efficiently, enabling developers to focus on interface and logic without waiting for a completed backend.