How to create API server using Json Server

by Rakesh Panigrahi · September 30, 2020

Last Updated on :December 18, 2020

Json server is a Node module that you can use to create a dummy rest json web service and it is really helpful to make end-to-end integration testing without having any third party APIs dependency.

Install JSON Server

From the command line you can install json server.


   npm install -g json-server

Create your json data

Before starting json server , you need to create a sample json file with data objects.
Here I have created a db.json file with articles , comment and profile json data.
db.json


{
"articles": [
{
"id": 1001,
"title": "Hello world",
"author": "devtechinfo"
},
{
"id": 1002,
"title": "News program article",
"author": "devtechinfo"
},
{
"id": 1003,
"title": "My First Java Program",
"author": "devtechinfo"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1001
}
],
"profile": {
"name": "devtechinfo"
}
}

Start JSON Server


   
$ json-server --watch db.json

\{^_^}/ hi!

Loading db.json
Done

Resources
http://localhost:3000/articles
http://localhost:3000/comments
http://localhost:3000/profile

Home
http://localhost:3000

Type s + enter at any time to create a snapshot of the database
Watching...

JSON server will create the REST APIs based on object configured in db.json.
In our db.json we have 3 objects are present hence json server created 3 API endpoints as below


http://localhost:3000/articles
http://localhost:3000/comments
http://localhost:3000/profile

Json Server – GET, POST, PUT, DELETE requests

You can make GET,POST,PUT and DELETE requests on JSON Server APIs.
For POST,PUT and DELETE requests, changes will be automatically saved to the db.json file.
For POST/ PUT requests you need to include a Content-Type: application/json header to use the JSON in the request body.

JSON Server GET – Read all articles


$ curl -X GET -H "Content-Type: application/json"  "http://localhost:3000/articles"
[
{
"id": 1001,
"title": "Hello world",
"author": "devtechinfo"
},
{
"id": 1002,
"title": "News program article",
"author": "devtechinfo"
},
{
"id": 1003,
"title": "My First Java Program",
"author": "devtechinfo"
}
]

JSON Server GET – Read specific article based on ID from JSON Server


$ curl -X GET -H "Content-Type: application/json" "http://localhost:3000/articles/1001"
{
"id": 1001,
"title": "Hello world",
"author": "devtechinfo"
}

JSON Server POST – Create new Article


$ curl -X POST -H "Content-Type: application/json" -d '{"title": "Article on Json Server","author": "devtechinfo"}' "http://localhost:3000/articles"
{
"title": "Article on Json Server",
"author": "devtechinfo",
"id": 1004
}

JSON Server POST – Create new Article with a data file


curl -d "@data.json" -X POST http://localhost:3000/articles
@data.json
{
"title": "Article on Json Server",
"author": "devtechinfo"
}

JSON Server PUT – Update Article data


curl -X PUT -H "Content-Type: application/json" -d '{"title": "New Article on Json Server","author": "devtechinfo"}' "http://localhost:3000/articles/1003"
{
"title": "New Article on Json Server",
"author": "devtechinfo",
"id": 1003
}

//Verify that article is updated successfully
curl -X GET -H "Content-Type: application/json" "http://localhost:3000/articles/1003"
{
"title": "New Article on Json Server",
"author": "devtechinfo",
"id": 1003
}

JSON Server DELETE – Delete Article data


curl -X DELETE -H "Content-Type: application/json" "http://localhost:3000/articles/1003"

Starting JSON Server on other port

By default json server starts at port : 3000 . You can start json server with other port with “-port” flag.
Here I have started a json server with 8090 port.


$ json-server --port 8090 --watch db.json
\{^_^}/ hi!

Loading db.json
Done

Resources
http://localhost:8090/articles
http://localhost:8090/comments
http://localhost:8090/profile
Home
http://localhost:8090
Type s + enter at any time to create a snapshot of the database
Watching...

JSON Server searching , sorting , pagination

JSON Server also provides some features like searching , sorting , pagination etc.
JSON Server -Searching text


curl -X GET -H "Content-Type: application/json" http://localhost:3000/articles?q=Hello
[
{
"id": 1001,
"title": "Hello world",
"author": "devtechinfo"
}
]

JSON Server – Sorting data


$ curl -X GET -H "Content-Type: application/json" "http://localhost:3000/articles?_sort=id&_order=desc"

JSON Server Pagination

You can use _page and _limit (optional) query parameter to paginate returned data.


$ curl -X GET -H "Content-Type: application/json" http://localhost:3000/articles?_page=1&_limit=2

JSON Server Custom routes

We can also configure json server to use custom routes file. By using custom routes file, we can change API end point and simulate JSON API like a third party API.
Create a file with custom routes
routes.json


{
"/api/*": "/$1",
"/articles/list": "/articles",
"/articles/get/:id": "/articles/:id",
"/articles/create": "/articles",
"/articles/update/:id": "/articles/:id",
"/articles/delete/:id": "/articles/:id",
"/comments/list": "/comments",
"/comments/get/:id": "/comments/:id",
"/comments/create": "/comments",
"/comments/update/:id": "/comments/:id",
"/comments/delete/:id": "/comments/:id",
"/profile/list": "/profile",
"/profile/get/:id": "/profile/:id",
"/profile/create": "/profile",
"/profile/update/:id": "/profile/:id",
"/profile/delete/:id": "/profile/:id"
}

Start JSON Server with –routes option.


$ json-server db.json --routes routes.json

\{^_^}/ hi!

Loading db.json
Loading routes.json
Done

Resources
http://localhost:3000/articles
http://localhost:3000/comments
http://localhost:3000/profile

Other routes
/api/* -> /$1
/articles/list -> /articles
/articles/get/:id -> /articles/:id
/articles/create -> /articles
/articles/update/:id -> /articles/:id
/articles/delete/:id -> /articles/:id
/comments/list -> /comments
/comments/get/:id -> /comments/:id
/comments/create -> /comments
/comments/update/:id -> /comments/:id
/comments/delete/:id -> /comments/:id
/profile/list -> /profile
/profile/get/:id -> /profile/:id
/profile/create -> /profile
/profile/update/:id -> /profile/:id
/profile/delete/:id -> /profile/:id

Home
http://localhost:3000

Type s + enter at any time to create a snapshot of the database

Json server creates all API endpoint based on custom routes defined by us.
Here are some examples of calling custom API endpoint with custom routes.


curl -X GET -H "Content-Type: application/json" "http://localhost:3000/articles/list"
[
{
"id": 1001,
"title": "Hello world",
"author": "devtechinfo"
},
{
"id": 1002,
"title": "News program article",
"author": "devtechinfo"
},
{
"title": "New Article on Json Server",
"author": "devtechinfo",
"id": 1003
}
]

$ curl -X GET -H "Content-Type: application/json" "http://localhost:3000/articles/get/1001"
{
"id": 1001,
"title": "Hello world",
"author": "devtechinfo"
}

$ curl -X GET -H "Content-Type: application/json" "http://localhost:3000/articles/get/1001"
{
"id": 1001,
"title": "Hello world",
"author": "devtechinfo"
}

$ curl -X POST -H "Content-Type: application/json" -d '{"title": "JSON Server Custom routes","author": "devtechinfo"}' "http://localhost:3000/articles/create"
{
"title": "JSON Server Custom routes",
"author": "devtechinfo",
"id": 1004
}

$ curl -X PUT -H "Content-Type: application/json" -d '{"title": "JSON Server Custom routes - Updated Title","author": "devtechinfo"}' "http://localhost:3000/articles/update/1004"
{
"title": "JSON Server Custom routes - Updated Title",
"author": "devtechinfo",
"id": 1004
}

$ curl -X GET -H "Content-Type: application/json" "http://localhost:3000/articles/get/1004" {
"title": "JSON Server Custom routes - Updated Title",
"author": "devtechinfo",
"id": 1004
}

$ curl -X DELETE -H "Content-Type: application/json" "http://localhost:3000/articles/delete/1004"
{}

In this post we have seen how to create a dummy restful API using JSON server.