Getting Started with JSON Server: A Quick Guide to Creating a Mock API

Using JSON Server is a popular convention among developers who often make some form of RESTFUL call or CRUD operations to a backend service in their project.

To fully understand what JSON server means let's look at the words individually. JSON stands for JavaScript Object Notation which is a local way of creating and storing data using key-value pairs in JavaScript. The server on the other hand refers to a particular endpoint where such data or information are stored so they can be retrieved.

So, in lay terms, we can say JSON SERVER is a way for storing data in a particular endpoint to at some point make a call to that endpoint to retrieve, delete, update or add to the data.

JSON Server is also one of the modules available in NPM. Remember, we spoke about NPM last time out. You can read all about it here.

We can consider JSON Server as a quick way that allows us to simulate some form of REST API service so we can get data from the backend and display them in the frontend of our application. This comes in handy because it naturally takes so much time to properly set up a backend service using Express, MongoDB, etc

How to setup JSON Server

To start using JSON Server in your application, you need to install it, and you can do that either globally or locally. See the code below for direction

npm install json-server

Next is to create some form of server in your code editor that will serve as a database for your data. First, create a new directory and name it whatever you want, preferably, name it database. Within that folder, create a new file and name it "db.json". You can name it whatever you like but the ".json" extension is mandatory.

Inside the "db.json" file, create a mock-up of JSON data with the template below

{
  "books": [
    {
      "id": 1,
      "title": "Thinks fall apart",
       "author": "Chinua Achebe",
      "numberOfPages": "133",
       "year published": "1972",

    },
    {
     "id": 2,
      "title": "Buy the future",
       "author": "Mensa Otabil",
      "numberOfPages": "100",
       "year published": "2002",
    },
    {
     "id": 3,
      "title": "Rich Dad",
       "author": "Robert Kiyosaki",
      "numberOfPages": "202",
       "year published": "1979",
    }
  ]
}

The above code is simply a JSON formatted data. Notice the subtle difference it has from regular JavaScript objects, in that the keys and values are both written as strings irrespective of their data type.

After that, the next is to run your scripts. Go to your terminal in your vs code and run the command below;

json server --watch db.json  
// Expected to get an endpoint like this http://localhost:3000/books

// IF THAT DEFAULT PORT 3000 ENDPOINT IS IN USE, YOU CAN USE AN ALTERNATIVE
json-server --watch db.json --port 4000
// Expected to get an endpoint like this http://localhost:4000/books

The command above watches your scripts in real-time for any request made to the provided endpoints.

The link http://localhost:3000/books serves as an endpoint hosted locally on your PC for interacting with the information stored.

You can make the following REST CALLS to the various provided endpoints.

GET /books // Gets all the books
GET /books/{id} // Gets a particula book base on the provided ID
POST /books // Add new books 
PUT /books/{id} //  Update the detail of a book base on the provided id
PATCH /books/{id} //Make partial changes to the details of a book 
DELETE /books/{id} // Delete book base on the provided ID

You can try out some of these calls on your code editor or make use of a powerful software for testing REST APIs called POSTMAN

See the code below for other calls you can make;

// FILTER
GET /books?title=json-server&author=typicode
GET /books?id=2&id=3

// PAGINATION
GET /books?_page=3
GET /books?_page=2&_limit=20

// SORT
GET /books?_sort=views&_order=asc

In summary, JSON Server helps to create some form of backend storage where we can store data in JSON format while also providing endpoints so we can make RESTFUL calls or perform CRUD operations on such data.

Hope this got you up and running using JSON Server. You can read more about JSON Server by clicking here