Fake REST APIs with JSON Server

I. Introduction

As a frontend developer, there are many times when you need to wait for backend, or cases that you want to see if things show as expected for different responses.

What you can do is setting up the backend locally and test your code out. However, the backend of an actual project is not usually simple, it would connect to docker, AWS, etc… and takes lots of time be able to run it, even on local.

If you’re using Nextjs, you know that we can create mock apis with it, but the datas we return in those apis are fixed, we can not modify them when calling CRUD method. Because of this, it is hard to test the whole flow of a feature. But, JSON Server is here to help.

The whole introduction from the developers of JSON Server is as below, and i couldn’t agree more with them :)

Get a full fake REST API with zero coding in less than 30 seconds (seriously)
Source: https://www.npmjs.com/package/json-server

II. How to implement

1/ Installation and usage

• Install it globally so we can use it anywhere.

npm install -g json-server

• Create your database. This is the object of your endpoints.

// db.json
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

• Run your fake backend

json-server --watch db.json

So now, if you call GET with http://localhost:3000/posts, you’ll get a list of posts. Or if you call POST to add an an item with that url, your posts list will have the item you’ve just added.

That’s it.
If you remember my previous blog, you’ll see that i’m using JSON Server, and the result is that i can test and modify the data with it.

2/ Other features

I found that there are some options we’ll definitely going to use on the cli.

json-server [options] <source>

Options:
  --port, -p         Set port [default: 3000]
  --no-cors, --nc    Disable Cross-Origin Resource Sharing [boolean]
  --delay, -d        Add delay to responses (ms)

Most frontend run on port 3000 locally, so it’s better to use a different port to run your mock data. Also, if you want the api to return response a bit slower, you can add delay option to it.

Ex: i’d like to run json server on port 9000 and delay response for 3 seconds, the cli would look like this:

json-server -p 9000 -d 3000 --watch db.json

Besides that, we can also add queries to the url like: page, page limit, sort, query by text, or even query with operators (less than, greater than, exclude).

Although JSON Server is just a small package, i was happy that i found it. That’s why i’m sharing it here in case you are looking for something similar.

I hope it helps. Thank you and see you in another blog.