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
Top comments (0)