Skip to Content
Technical Articles
Author's profile photo SAJAL GUPTA

How to create a Fake REST API with JSON-Server

First things first: Why would someone fake a REST API for their application?

Simple Answer: It is useful for building frontend apps with something like Angular, React, UI5, etc. where you need to connect to the backend with some mock data with almost no knowledge of creating a server and writing REST APIs to connect your frontend with the database.

 

In this article, we’ll look at one such approach on how to create a REST API with all the CRUD operations — GET, POST, PUT, DELETE

JSONPlaceholder

JSONPlaceholder is a useful REST API that lets us do CRUD operators on their server by sending requests to their REST API.

The endpoints follow the REST API convention so it’s also great examples to follow. There’re a few endpoints like usersphotosalbumsand posts that we can query and send.

Although it provides you readymade REST APIs, there are a few disadvantages to this one:

  1. You have to use their data only and can not modify any of its content. You may want to use your own data as per the frontend requirements.
  2. Even though it provides the support for POST calls, but it doesn’t actually add to the existing request or updates the request

Let’s start creating the REST APIs with our own data-

  1. First of all, ensure you have NodeJs and NPM installed.
  2. We need to start our server now. To do so, open the package.json file and add a key-value in the scripts object after line 7: “json:server”:”json-server — watch db.json”.
  3. Open the command prompt and navigate to the folder. Run the command:
    npm run json:server. It’ll run your server locally on http://localhost:3000

    Image for post

  4. You should see a file named db.json created in the folder. When you run the server locally, it tries to search for the file (db.json) and if not found, it creates a file on its own with mock JSON data.
  5. When you hit http://localhost:3000, you should see the following output. It has predefined 3 resources: postscommandsprofile. These resources are picked from the db.json file.

                  Image for post

Let’s go ahead and create a simple REST API that performs all CRUD operations-GET/POST/PUT/DELETE

  • GET
    1. Open the db.json file and replace the content with the following:{
      “users”: [
      {
      “id”: 1,
      “firstName”: “Sachin”,
      “lastName”: “Tendulkar”,
      “age”: 45
      },
      {
      “id”: 2,
      “firstName”: “Alastair”,
      “lastName”: “Cook”,
      “age”: 37
      },
      {
      “id”: 3,
      “firstName”: “Steve”,
      “lastName”: “Smith”,
      “age”: 32
      }
      ]
      }
    2. You can also perform operations such as sorting, filtering, searching, etc. Below are some of the examples:
      *
       http://localhost:3000/users/2 (Returns the user with id-2)
      * http://localhost:3000/users?_limit=2 (Sets the limit to return 2 records)
      * http://localhost:3000/users?_sort=firstName&_order=desc (Sorts the records with the first name in descending order)
      * http://localhost:3000/users?age_gte=40 (Returns the users whose age ≥40). Similarly you can set for age_lte and age_gte&age_lte
      * http://localhost:3000/users?q=Sachin (Returns the users which contain the string “Sachin”)
  • POST
    Let’s add one new user to the users request.
    1. Open a new tab in Postman and run the query (http://localhost:3000/users) with the POST operation. You need to set the header: Content-Type as application/json. In the body, select the body type as raw and add the following content:
      {
      “id”:4,
      “firstName”:”Rohit”,
      “lastName”:”Sharma”,
      “age”:32
      }
  • PUT
    Let’s modify the record with id 1
    1. Open a new tab in Postman and run the query (http://localhost:3000/users/1) with the PUT operation. You need to set the header: Content-Type as application/json. In the body, select the body type as raw and add the following content:
      {
      “firstName”:”Sachin”,
      “middleName”:”Ramesh”,
      “lastName”:”Tendulkar”,
      “age”:47
      }
      Image for post
    2. If you make a GET call, you should see that the first record is modified with the new result.

Image for post

 

  • DELETE
    Let’s try to remove the user with id 3
    1. Open a new tab in Postman and run the query (http://localhost:3000/users/3) with the DELETE operation.
  • BonusPATCH
    Let’s modify the first name of the record with id 2
    1. Open a new tab in Postman and run the query (http://localhost:3000/users/2) with the PATCH operation. You need to set the header: Content-Type as application/json. In the body, select the body type as raw and add the following content:
      {
      “firstName”: “Test”
      }
    2. If you make a GET call, you should only see the user with id 2 should have the first name as “Test”

Conclusion
Congratulations! You have now created a complete REST API that performs all the CRUD operations. I hope this blog post covering the end to end use case was of help to you. It is indeed a pleasure to compile and document one’s notes in a structured form so that it could be of use to many. This blog post has been originally published on Medium. Please refer here.

Until then, Happy Learning and Blogging. 🙂

Assigned tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sanchit Magan
      Sanchit Magan

      This is really good and with good detail!

      Thank you for sharing! 🙂

      Author's profile photo Thomas Jesudasan
      Thomas Jesudasan

      Well explained