Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 13, 2021 08:05 am GMT

Mockup API With JSON Server


In a software development project, sometimes the annoying common problem is frontend developer needs to wait until the backend developer finishes working on an API. That's why we need to make a mockup API, therefore both backend and frontend developers can work parallel.

JSON server is an easy way to make a fake REST API, even a beginner or non-programmer can make it. The only prerequisite is you need to understand JSON structure. Here's a tutorial to make a fake REST API with JSON Server.


  • Install node js: []
  • Open a terminal (bash/shell/linux)
  • Create a directory call mock-api (or whatever you want)

  • initial new project. Type npm init then enter until show like below, and type yes.
    Alt Text

    Working with JSON Server

  • install json server npm install -g json-server if you want install globally or npm i json-server if you want install locally. In this tutorial I will install globally

npm install -g json-server
  • create file db.json
  • write this structure json
{    "users": [        {            "id": 1,            "first_name": "Sonny",            "last_name": "Allward",            "email": "[email protected]",            "gender": "Genderfluid",            "ip_address": ""        },        {            "id": 2,            "first_name": "Manfred",            "last_name": "Erickson",            "email": "[email protected]",            "gender": "Genderfluid",            "ip_address": ""        }    ],    "products": [        {            "id": 1,            "product_name": "Beets",            "sku": "54949-004",            "price": 27,            "category": "Beauty",            "quantity": 69        },        {            "id": 2,            "product_name": "Wine - Mondavi Coastal Private",            "sku": "46122-146",            "price": 63,            "category": "Home",            "quantity": 12        }    ]}
  • running JSON Server
npm run json:server --watch db.json

Alt Text

Call Request

  • Get all data
  • Get one data, method GET
  • Search data, method GET
  • Pagination, method GET
  • Sorting, method GET
  • Create data, method POST
http://localhost:3000/usersbody:{    "id": 51,    "first_name": "Itje",    "last_name": "Juice",    "email": "[email protected]",    "gender": "Helicopter",    "ip_address": ""}
  • Delete data, method DELETE

Github URL: []
NPM JSON Server: []

Original Link:

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To