Mock / Fake REST API to get started with zero coding

Mock / Fake REST API to get started with zero coding

Introduction

Modeling the domain and hacking around it is one of the first few steps while starting a project or maybe just a user story or feature. It is like WYSIWYG for the domain.

It helps in:

  • Adding clarity while brainstorming
  • Improves productivity while hacking on front-end
  • Allows multiple teams to work simultaneously e.g. front-end and back-end
  • And much more...

Prerequisite

We will be using nodejs. Thus, make sure you have it installed. Refer to the official site.

Get going

Let's get started. We will be using json-server for this.

Install JSON Server

npm install -g json-server

Create a project directory and cd into it

mkdir faker
cd faker

Create fake data for json-server

json-server allows providing a JSON file as input. This is the easiest way to get fake REST API up and running.

Create a db.json file

touch db.json

add below JSON to the file (or you can have your own JSON)

{
  "posts": [
    {
      "id": 1,
      "title": "Create a fake REST API using json-server",
      "author": "lilb0nd"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "This is absolutely awesome and needed.",
      "postId": 1
    }
  ],
  "profile": {
    "name": "lilb0nd"
  }
}

Start your own fake REST Server

json-server db.json

The output will be:

Screenshot 2021-04-14 at 9.51.21 AM.png

You can test the API using postman.

Screenshot 2021-04-14 at 9.54.36 AM.png

Based on the JSON we have provided, the following routes will be available:

# Posts
GET    /posts
GET    /posts/1
POST   /posts
PUT    /posts/1
PATCH  /posts/1
DELETE /posts/1

# Comments
GET    /comments
GET    /comments/1
POST   /comments
PUT    /comments/1
PATCH  /comments/1
DELETE /comments/1

# Profile
GET    /profile
POST   /profile
PUT    /profile
PATCH  /profile

# Note there is no "id" part in the profile as we did not add one

POST request example

Screenshot 2021-04-14 at 10.08.28 AM.png

PUT request example

Screenshot 2021-04-14 at 10.26.00 AM.png

and here is how the posts collection looks now:

Screenshot 2021-04-14 at 10.26.19 AM.png

Hope this would be of some help. Till next time, happy hacking friends!!!