Derick ZihalirwaThis 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] (https://github.com/Derick1530/suspense-api-fici-game/blob/introduction-to-json-server/database.json)
Let's now run the script, and see if it works.
if no errors, navigate to` localhost: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=desc`to 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](https://twitter.com/derickzihalirw5).
Until next time, take care. 👋
