Create A REST API With JSON Server

In this tutorial, we will see about JSON server.

Let’s say you are front-end developer and need to integrate backend calls with REST APIs but you came to know from backend team that REST APIs are not completed yet and will take some time to do the coding. How will you proceed now?

JSON server can help you in these kinds of situation by mocking REST APIs. JSON server provides fake REST APIs which can be used for mocking and testing without any coding.

JSON Server is a simple project that helps you to set up a REST API with CRUD operations real fast.

Please note that JSON server is available as an NPM package, so you need to have NPM installed on your machine.
Let’s get started with JSON server.

Step 1: Install JSON server.

npm install -g json-server

-g option is used to make sure JSON server is installed on machine globally.

Step 2: Create JSON file named countries.json to mock data.

Run following command in terminal.

json-server –watch countries.json

Based on countries.json, here are some default routes for Rest APIs.

GET /countries
GET /countries/1
POST /countries
PUT /countries/1
PATCH /countries/1
DELETE /countries/1

Step 3: Go to the browser and browse this URL “http://localhost:3000/countries”.

JSON server get request

Please note the following points while doing the request.

  • You can do PUT, POST and DELETE request and changes will be reflected in countries.json.
  • Request body should be object enclosed.
  • Id values are immutable and can not be changed. If you put Id in PUT or PATCH request, it will be ignored.
  • If you put id in post and if it is already taken, then request will be ignored as well.
  • A POST, PUT or PATCH request should include a Content-Type: application/json header to use the JSON in the request body.

Get country based on id

URL: “http://localhost:3000/countries/2”.
JSON server get request by ID

We will use post to test POST, PUT and DELETE request.

Let’s put “content type “= “application/json” in header as below. As it will be required for all POST, PUT and DELETE request.

JSON server content type

Step 4:Let’s send post request with body

URL: “http://localhost:3000/countries/”
JSON server post request
Let’s send get request again to check if our post request was successful.
JSON server get request after post
As you can see china is added to countries list now.

Step 5: Let’s send put request with body

URL: “http://localhost:3000/countries/2”
JSON server put request
Let’s send get request again to check if our put request was successful.
JSON server get request after put
As you can see Nepal’s population is updated to 6000.

Step 6: Let’s send delete request
URL : “http://localhost:3000/countries/2”
JSON server delete request
Let’s send get request again to check if our delete request was successful.
JSON server get request after delete
As you can see Country with id=2 is removed from country list.

That’s all about creating REST API with JSON server.

Was this post helpful?

Leave a Reply

Your email address will not be published. Required fields are marked *