JSON Server Example

This JSON server example is part of an article series that was rewritten in mid 2017 with up-to-date information and fresh examples.

The JSON Server is a popular tool for front-end developers for quickly setting up a fully fake REST API in less than a minute. You need to first install it via npm:

npm install -global json-server

Next, save some data in a JSON file and name it db.json:

{
  "clients": [
    {
      "id": "59761c23b30d971669fb42ff",
      "isActive": true,
      "age": 36,
      "name": "Dunlap Hubbard",
      "gender": "male",
      "company": "CEDWARD",
      "email": "dunlaphubbard@cedward.com",
      "phone": "+1 (890) 543-2508",
      "address": "169 Rutledge Street, Konterra, Northern Mariana Islands, 8551"
    },
    {
      "id": "59761c233d8d0f92a6b0570d",
      "isActive": true,
      "age": 24,
      "name": "Kirsten Sellers",
      "gender": "female",
      "company": "EMERGENT",
      "email": "kirstensellers@emergent.com",
      "phone": "+1 (831) 564-2190",
      "address": "886 Gallatin Place, Fannett, Arkansas, 4656"
    },
    {
      "id": "59761c23fcb6254b1a06dad5",
      "isActive": true,
      "age": 30,
      "name": "Acosta Robbins",
      "gender": "male",
      "company": "ORGANICA",
      "email": "acostarobbins@organica.com",
      "phone": "+1 (882) 441-3367",
      "address": "697 Linden Boulevard, Sattley, Idaho, 1035"
    }
  ]
}

Finally, start the server with the following command:

json-server --watch src/db.json

You can now access the simple REST API with a suitable client. For now, a modern browser like Chrome, Firefox or Safari will do. Open http://localhost:3000/clients and you will see your entire miniature database in JSON format. You can view items by id by using the request format http://localhost:3000/clients/{id}. For example, opening http://localhost:3000/clients/59761c233d8d0f92a6b0570d will yield:

{
  "id": "59761c233d8d0f92a6b0570d",
  "isActive": true,
  "age": 24,
  "name": "Kirsten Sellers",
  "gender": "female",
  "company": "EMERGENT",
  "email": "kirstensellers@emergent.com",
  "phone": "+1 (831) 564-2190",
  "address": "886 Gallatin Place, Fannett, Arkansas, 4656"
}

To learn more about the JSON server, check out the tutorial Mock REST APIs Using json-server

Also: See more JSON examples.

Here are the other examples in this series:

Frequently Asked Questions (FAQs) about JSON Server

What is the main purpose of using JSON Server?

JSON Server is a simple tool primarily used for setting up a fake REST API for development purposes. It allows developers to prototype and develop applications without having to set up a complex backend. This is particularly useful when you want to quickly test your front-end code with a mock backend. It uses a JSON file to create the database and provides all the standard REST API endpoints out of the box.

How can I install JSON Server?

JSON Server is a Node.js module, and it can be installed using npm (Node Package Manager). You can install it globally on your system by running the command npm install -g json-server in your terminal or command prompt. Once installed, you can start the server with the command json-server --watch db.json, where db.json is your database file.

How can I create a custom route in JSON Server?

JSON Server allows you to define custom routes by creating a routes.json file. In this file, you can map routes to different JSON objects. For example, if you want to map /api/posts to /posts, you would define it as {"/api/posts": "/posts"} in your routes.json file. Then, you can start the server with the routes file by running json-server --watch db.json --routes routes.json.

Can I use JSON Server for production?

While JSON Server is a powerful tool for prototyping and development, it is not recommended for production use. It lacks the security and performance optimizations necessary for a production environment. For production, you should use a proper database and server setup.

How can I add data to my JSON Server?

You can add data to your JSON Server by modifying the db.json file. This file acts as your database, and each key in the JSON object corresponds to a different resource. For example, if you want to add a new post, you would add a new object to the posts array in your db.json file.

How can I filter data in JSON Server?

JSON Server supports filtering data using query parameters. For example, if you want to get all posts with the title “Hello World”, you would send a GET request to /posts?title=Hello%20World. This will return all posts where the title is “Hello World”.

Can I use JSON Server with other programming languages?

Yes, JSON Server is language-agnostic and can be used with any programming language that can send HTTP requests. This includes JavaScript, Python, Ruby, Java, and many others.

How can I paginate data in JSON Server?

JSON Server supports pagination using the _page and _limit query parameters. For example, if you want to get the first 10 posts, you would send a GET request to /posts?_page=1&_limit=10. This will return the first 10 posts.

Can I sort data in JSON Server?

Yes, JSON Server supports sorting data using the _sort and _order query parameters. For example, if you want to get posts sorted by title in ascending order, you would send a GET request to /posts?_sort=title&_order=asc.

How can I update data in JSON Server?

You can update data in JSON Server by sending a PUT or PATCH request to the resource’s URL. For example, if you want to update the title of a post, you would send a PUT or PATCH request to /posts/1, where 1 is the id of the post, with the new title in the request body.