Json Server
Tags: javascript, webdev, tutorial, beginners
Published: 2022-01-05 08:57:23

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
<mark>JSON</mark> is the abbreviation for JavaScript Object Notation. JSON is a simple data storage and transmission format. 


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

## Example of JSON data
```javascript
"students":[
    {"firstName":"Alex", "lastName":"Ferg"},
    {"firstName":"John", "lastName":"Cilly"},
    {"firstName":"Scofield", "lastName":"Michael"}
]
```
For more on JSON [click here](https://www.w3schools.com/whatis/whatis_json.asp)

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 
```diff
+ json server === Get a full fake REST API with zero coding.
```

---

## Setup
To use JSON server , you need <kbd>node</kbd> installed. Download here [Download here](https://nodejs.org/en/)


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

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


## Create a top-level property
```javascript
{
    "comments"
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zf2wi5abd3rpv9uuiy2.PNG)

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/<kbd>comments</kbd>

The<mark>comments</mark> above is the Uri resource.

🪶 Next, each resource value must/should be an array of items
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5xg0yjyv9so2pe6ksu1.PNG)
 
 
Each resource item needs to have a unique id property
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sukhtmoo0il1n3omg5t5.PNG)
 
🪶 Then we can then apply the different property we want to give to each comment
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qitfu5inir5nuxriuer.PNG)

So far we have single resource with three different items nested in the <kbd>comments</kbd> top-level property
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ld8jruhpemtf9n4l0b2y.PNG)
  
We can have different resources as much as we want.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfrnsozhf3k43b4a9v0n.PNG)
 

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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k14ois0nrmtg0flf0tra.PNG)

---

##Testing
Now lets test if our endpoints are actually working
For the comments endpoint which is running locally on localhost:3000/comments gives us:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhacve2ywc709g76hmmf.PNG)

And for the post endpoint: localhost:3000/post gives us this
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4sxx0g0prvyohmpm6rh.PNG)

---
   
## 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:

<kbd>json-server --watch data/db.json --port 8093</kbd>

---

## 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](https://www.npmjs.com/package/json-server)

## 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
```javascript
localhost:3000/posts?id=1
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkvlccubt9n3zni7nvwo.PNG)
 

## Post request
Post is as simple as setting your <kdb>"Content-type":"application/json" and sending your data.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ddv2s2r7kleaehc4p8p.PNG)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2kue8oifwiodti8ar21.png)

Other features such as sorting, pagination, slicing, and full-text search may be found [here](https://www.npmjs.com/package/json-server), do well to go through them. I hope you found this short post useful.
Thanks for reading
![thanks](https://media.giphy.com/media/mVJ5xyiYkC3Vm/giphy.gif)

---

## Resources
[Read more on JSON server ](https://www.npmjs.com/package/json-server)
[Recommended Video](https://www.youtube.com/watch?v=mAqYJF-yxO8&t=210s)