Json Server

You want to connect your front end to data from the back-end, but the back-end API isn't ready yet and you need a mock API data to work with. There is a workaround.
Today we'll discuss the JSON server, a package for front-end developers that require a quick back-end for mocking and prototyping.

Prerequisite

🎯 NodeJs installed
🎯 Install Json-server
🎯 Postman

Table Of Content

🌴 Introduction
🌴 Setup
🌴 Run the JSON server
🌴 Change port
🌴 Testing
🌴 Points to note
🌴 Conclusion
🌴 Resources

Introduction

JSON is the abbreviation for JavaScript Object Notation. JSON is a simple data storage and transmission format.

JSON is "self-descriptive" and simple to comprehend
Like JavaScript object properties, JSON data is written as name/value pa

Example of JSON data

"students":[
    {"firstName":"Alex", "lastName":"Ferg"},
    {"firstName":"John", "lastName":"Cilly"},
    {"firstName":"Scofield", "lastName":"Michael"}
]

For more on JSON click here

JSON server allows us to create dummy local rest API to mimic a back-end server for development and prototyping with being by the back-end to begin with.
We simply create a simple JSON file to store our data, the JSON server will take the file and wrap it with API endpoints on a local server..
We can send GET, POST, DELETE and UPDATE request to this different endpoint.

In a nutshell

+ json server === Get a full fake REST API with zero coding.

---

Setup

To use JSON server , you need node installed. Download here Download here

Next, we install the JSON live server globally on our local machine.
npm i -g json-server

Next, let's create a json-file.
In your terminal run this command touch data/dB.json

Create a top-level property

{
    "comments"
}

Note: String values are wrapped in double quotes as opposed to normal JavaScript single quote that uses single quotes.
The JSON-server treats the top level property as resources.

Now, whats a resource? it is more like a table in SQL db or collection in No-sql db.
localhost:3000/comments

Thecomments above is the Uri resource.

🪶 Next, each resource value must/should be an array of items

Each resource item needs to have a unique id property

🪶 Then we can then apply the different property we want to give to each comment

So far we have single resource with three different items nested in the comments top-level property

We can have different resources as much as we want.

Here we created a new resource called post

---

Run the json server

The next step is to run the json server to watch the file and then the json server will generate endpoints for each of our resources in our case the comments and the post resource with a local server.

To achieve this we open our terminal in our project folder and run the following command
json-server --watch <path of the file name goes here>
json-server --watch data/db.json in our case

Result:

---

Testing

Now lets test if our endpoints are actually working
For the comments endpoint which is running locally on localhost:3000/comments gives us:

And for the post endpoint: localhost:3000/post gives us this

---

Switch port

Front-end is most time runs on port 3000, to avoid port conflict You can start JSON Server on other ports with the --port flag:

json-server --watch data/db.json --port 8093

---

Points to note

Id values are not mutable. Any id value in the body of your PUT or PATCH request will be ignored. Only a value set in a POST request will be respected, but only if not already taken.

A POST, PUT or PATCH request should include a Content-Type: application/json header to use the JSON in the request body. Otherwise it will return a 2XX status code, but without changes being made to the data. reference

Working with id

Use query parameters to work with id. For example lets say we want to get a post with the id of 1. We use

localhost:3000/posts?id=1

Post request

Post is as simple as setting your "Content-type":"application/json" and sending your data.

---

Conclusion

To keep this post short, I use postman for testing, but you can also use packages like axios, node-feth or the in-built fetch to get data from this JSON-server.

Other features such as sorting, pagination, slicing, and full-text search may be found here, do well to go through them. I hope you found this short post useful.
Thanks for reading

---

Resources

Read more on JSON server
Recommended Video