How to create a REST API using json-server npm package ?

This article describes how to use the json-server package as a fully working REST API.

What is json-server?

json-server is an npm(Node Package Manager) module/package, used for creating a REST API effortlessly. Data is communicated in JSON(JavaScript Object Notation) format between client and server.

Installation: Execute the below command in your project directory.

npm install json-server

Creating a database file: The data is stored in JSON format. Create a .json file that stores the data in JSON format. This JSON file works as a database. for example, we name the database file db.json. json-server recognizes the id attribute specially and treats it with unique constrain. This attribute is useful in getting data accessed individually by id.

Note: double quotes must be used for string value-pairs, and value pairsThe last key-value pair should not be followed by a comma.

Let data be:

{
    "students": [
        {
            "id": 1,
            "name": "alex",
            "grade": 11,
            "marks": {
                "maths": 80,
                "physics": 50,
                "chemistry": 35
            }
        },
        {
            "id": 2,
            "name": "gary",
            "grade": 12,
            "marks": {
                "maths": 70,
                "physics": 50,
                "chemistry": 65
            }
        },
        {
            "id": 3,
            "name": "stuart",
            "grade": 11,
            "marks": {
                "maths": 80,
                "physics": 20,
                "chemistry": 90
            }
        }

    ]
}

Running the json-server: json-server uses port 3000 as default and the server can be run using the command 3000

json-server db.json

Note: db.json is the name of the JSON file.

Running server on an alternative port: The command to run the server on the alternative port number is

json-server db.json --port PORT_NUMBER

Running a live serve: To get the server updated/re-run on manual changes in the .json file use the command

json-server --watch db.json

On running, the json-server module generates a home route for the data server which can be accessed through the URL "http://localhost:3000" (if the port is 3000)

Reading data from the database:

We use the GET method to request data from the server. Higher order attribute in our json includes student object which contains records of the student. As json-server automatically generates routes for higher order attributes.

Example: 

1. Retrieving all students

The URL to request Student data from the database is http://localhost:3000/students (the server is running at port 3000).

Below GIF shows get to request which is done in thunder client (An extension in vs code). Tools like postman and web browsers can also be used.

2. Retrieving student by id

Note: id in json-server data is treated as a special attribute. The server allows data only with the unique id. 

The URL to retrieve students by their id is http://localhost:3000/students/1 This URL retrieves the student data whose id is "1". This URL pattern doesn't work for other attributes like name, grade, etc.(http://localhost:3000/students/name doesn't work). The below GIF shows the working of this request.

Adding data to the database:

We use the post method to send data requests to the server. HTTP post method sends a request to the server with data in the request body.

Example: URL to add data to the database is http://localhost:3000/students with post method. let's data to be added is 

{
    "id": 4,
    "name": "binny",
    "grade": 12,
    "marks": {
        "maths": 90,
        "physics": 100,
        "chemistry": 20
    }
}

The below GIF shows the execution of the post method and updated data in the database:

Updating data in the database:

We use the HTTP PATCH method to update data in the database. This method sends a request to the server to update the data where the data to be updated is in the request body.

Example: The URL to update data in the database is http://localhost:3000/students/4 with the patch method. This method updates the data of the student with id "4" with data in the request body. Let's data to be updated is 

{
  "name": "bunny"
}

The name of the student will be changed to bunny on successful request. The below GIF shows the working of the patch method.

Deleting data in the database:

We use the HTTP DELETE method to delete data in the database. This method sends a request to the server to delete the data. The data to be deleted is specified in the request URL.

Example: The URL to delete the student with a particular id is  http://localhost:3000/students/4 with the delete method. This method deletes the data of the student with id "4".The below GIF shows the working of delete method.