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, 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 users, photos, albumsand 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.
Folder Structure
package.json

5. 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”.

6. 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

7. 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.

8. When you hit http://localhost:3000, you should see the following output. It has predefined 3 resources: posts, commands, profile. These resources are picked from the db.json file.

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 replaces 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
    }
    ]
    }

3. Open Postman and make a GET request- http://localhost:3000/users. You should 3 users as a result.

4. You can also perform operations such as sorting, filterting, 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 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 contains the string “Sachin”)

POST
Let’s add one new user in 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
    }

2. If you make a GET call, you should see that the first record is modified with the new result.

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.

Bonus-PATCH
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”
    }

Conclusion
Congratulations! You have now created a complete REST API which performs all the CRUD operations. I hope this blog 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.

Until then, Happy Learning and Blogging.