DEV Community

Linda Sebastian
Linda Sebastian

Posted on

Mockup API With JSON Server

Overview

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.

Setup

  • Install node js: [https://nodejs.org/en/download/]
  • 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
Enter fullscreen mode Exit fullscreen mode
  • create file db.json
  • write this structure json
{
    "users": [
        {
            "id": 1,
            "first_name": "Sonny",
            "last_name": "Allward",
            "email": "sallward0@umn.edu",
            "gender": "Genderfluid",
            "ip_address": "24.3.199.140"
        },
        {
            "id": 2,
            "first_name": "Manfred",
            "last_name": "Erickson",
            "email": "merickson1d@mapquest.com",
            "gender": "Genderfluid",
            "ip_address": "103.30.222.192"
        }
    ],
    "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
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode
  • running JSON Server
npm run json:server --watch db.json
Enter fullscreen mode Exit fullscreen mode

Alt Text

Call Request

  • Get all data
http://localhost:3000/users
Enter fullscreen mode Exit fullscreen mode
  • Get one data, method GET
http://localhost:3000/users/1
Enter fullscreen mode Exit fullscreen mode
  • Search data, method GET
http://localhost:3000/users?first_name=Manfred
Enter fullscreen mode Exit fullscreen mode
  • Pagination, method GET
http://localhost:3000/users?_limit=10&_page=5
Enter fullscreen mode Exit fullscreen mode
  • Sorting, method GET
http://localhost:3000/users?_sort=id&_order=DESC
Enter fullscreen mode Exit fullscreen mode
  • Create data, method POST
http://localhost:3000/users
body:
{
    "id": 51,
    "first_name": "Itje",
    "last_name": "Juice",
    "email": "itje@yale.edu",
    "gender": "Helicopter",
    "ip_address": "44.73.130.666"
}

Enter fullscreen mode Exit fullscreen mode
  • Delete data, method DELETE
http://localhost:3000/users/1
Enter fullscreen mode Exit fullscreen mode

Github URL: [https://github.com/rocklinda/mock-api]
NPM JSON Server: [https://www.npmjs.com/package/json-server]

Discussion (0)