This First Part is beginner friendly (zero coding)
For a frontend developer, going through the configuration process of a full rest API, managing databases, and Express is time-consuming and hard to do. Json API works as a fake Rest API where developers can create a server that will serve json files on the go, in other words, Json server reduces the time complexity for the developers to set a whole bunch of backend servers.
In this article, we are going to look at different features that JSON server has to offer. As a frontend developer by the end of this article , you will be able to use this package in your projects to save a lot of time when prototyping.
Prerequisites
- Basic understanding of JSON format
- Basic knowledge of how APIs are consumed in frontend apps.
- This first part is beginner friendly (zero code)
- NodeJs install on your computer
What is Json Server?
Json server is an apm package that lets you create fake Rest API with minimum effort.
When to use it?
Json API is best for prototyping front end components, and Testing endpoints.
Installing JSON Server
Let's see how to install and run JSON server in your computer.
Step 1: Create a package.json in your project folder
In your terminal run the command npm init -y and click enter.
you should have a package.json file created in your project repository.
Step 2: Install the json-server package
again in your terminal run the command npm i json-server.
(You should see it listed as a dependency in package.json file).
Step 3: Add a new script to start the server.
Still in your package.json under scripts insert this line:
"serve-json":"json-server --watch database.json"
Configuration
By default, json-serve runs on port 3000 but you can have a different app running on the same port, in such cases we can specify the port option when starting json-server by
adding --host 7000 to the below script in package.json
"serve-json":"json-server --host 7000 --watch database.json"
Now our json-server will be served at localhost:7000.
if you try to run the app you may run into errors because we are watching a file that doesn't exist yet, so let's add a database.json file to the project repository.
you can find database.json setup in this GitHub repo
Let's now run the script, and see if it works.
if no errors, navigate tolocalhost:7000, you should see this:
SENDING REQUESTS
Let's send some requests to our server.
GET REQUEST
Inside your database.json you have 2 arrays companies and orders.
the JSON server exposes the endpoints for us to make request from the client.
To get the data for the first array companies , in the url navigate to localhost:7000/companies
This will serve an array:
if you want a specific item, with json we just append the id to the url. So if you want the first item, navigate to localhost:7000/companies/1.
Output
and similary with orders.
FILTERING
Let's say you are building your application and you want the user to have an option to filter the list of specific products. For our example let's ask JSON server to give us only companies with "technology" sector. To the URL we are going to append a query parameter, at the end of localhost:7000/companies we pass the property we want to filter by ("sector" in our case ), to this we assign a filter value which is technology.
localhost:7000/companies?sector=technology
output
We get back all companies whose sector is technology
SORTING
Another common requirement is the possibility of users to sort elements in a specific way.
For our scenario let's filter our list of companies to be sorted by quantity. In the URL let's add ?_sort=quantity localhost:7000/companies?_sort=quantity
By default the sort order is ascending, to make it descending we need to append &_order=descto our Url like this localhost:7000/companies?_sort=quantity&_order=desc
output:
FULL TEXT SEARCH
To perform a full text search in our database.json we specify "q=" followed by our search string like this localhost:7000/companies?q=an
Output
It returns a list of items that contain "an".
Conclusion
This is pretty it for this first part of our series,
with zero coding we successfully set up a REST API.
If you are a frontend developer I hope you found a tool that you can start using for most of your side projects or even when you are prototyping something at your work.
In the next part (Intermediate level) we will learn more about JSON server, and how to send Post, Delete, and Update requests, with examples using React JS.
If you have any questions don't hesitate to ask in the comment section.
Or you can send me a message on Twitter.
Until next time, take care. 👋
Top comments (3)
isn't there any complete documentation which includes all instructions? like _order or _like .... I need to send a search query but only if the word begins with smt. not includes smt.
To perform a search query where the word begins with a specific string, you can use the
_startparameter followed by the desired string. Here's how you can utilize it:In this example,
name_likeis a field that represents the name of the company (you can replace it with any field you want to search within), and example is the string you want to search for. The_startparameter specifies the position at which the search should start within the field.Using
_start=0ensures that the search matches words that begin with"example".This way, you can send a search query to JSON Server that specifically looks for words beginning with the specified string.
I found a small error in this article. There should be --port not --host. Over all good article. Thanks!