Creating a Mock REST API with JSON Server

JSON Server is a JavaScript application that allows developers to create a fake/mock REST API by defining data in a JSON file. It easily enables developers to create a local server that replicates the behavior of a real API. It is therefore useful for testing and development.

I will try to explain how to use JSON Server step by step. For this, only Node.js and npm must be installed on your machine. If the prerequisites are met, you can install JSON Server by running the following command to get started.

Step 1: To install JSON Server as an npm package, type the following into your terminal:

npm install -g json-server

With this, JSON Server will be installed on your system and will be accessible from the command line. You can also check the result of the installation by using the code below.

json-server -v

After installing JSON Server, you can create a JSON file that will serve as the source of mock API data. This file should contain an object that defines the data for your API.

Step 2: Now, let’s create an empty node project to apply the operations mentioned:

npm init

package name: (projects) json-mock-api
version: (1.0.0)
description: Json Mock REST API for Article
entry point: (index.js) db.json
git repository:
keywords: json-server fake mock api
author: bimelike

Step 2: Let’s create an empty node project, then create a file named db.jsonin the directory where we created our project, and its content should be as follows:

{
"tasks": [
{
"id": 1,
"title": "Sample task",
"description": "Task description",
"status": "in-progress",
"userId": 2
},
{
"id": 2,
"title": "Sample other task 2",
"description": "Other description",
"status": "done",
"userId": 1
}
],
"users": [
{
"id": 1,
"name": "Test User"
},
{
"id": 2,
"name": "Test User 2"
}
]
}

Step 3: After creating your JSON file, type the following command in the command line to start the JSON Server, specifying the path of your JSON file:

json-server --watch db.json

This command starts the mock API server using the db.jsonfile and makes your data accessible.

Step 4: To test the API, go to your browser’s address “http://localhost:3000". This will be the server’s address and you will be able to see your data here.

For example, if you make a GET request to the address http://localhost:3000/tasks, you will receive the following JSON data:

[
{
"id": 1,
"title": "Sample task",
"description": "Task description",
"status": "in-progress",
"userId": 2
},
{
"id": 2,
"title": "Sample other task 2",
"description": "Other description",
"status": "done",
"userId": 1
}
]

Step 5: You can use all the REST methods supported by JSON Server when making requests.

You can read data with a “GET” request, add data with a “POST” request, update data with a “PUT” request, and delete data with a “DELETE” request, using all the REST methods supported by JSON Server.

For example, you can sort the titles in ascending order by sending a GET request to the address http://localhost:3000/tasks?_sort=title&_order=asc.

JSON Server is ready to help you with filtering, sorting, and pagination if you need to work with your data in this way. Moreover, JSON Server also supports CRUD (Create, Read, Update, Delete) operations.

For example, to create a new record, you can send a POST request to the address http://localhost:3000/tasks.

curl -X POST http://localhost:3000/tasks -d 'title=Test Post&description=Test post description&status=start&userId=2'
{
"title": "Test Post",
"description": "Test post description",
"userId": "2",
"status": "start",
"id": 5
}

This adds a new record to the JSON file. You can also see that the ID value is automatically assigned.

Similarly, you can send a PUT request to update an existing record.

curl -X PUT http://localhost:3000/tasks/5 -d 'title=Test Post Updated&description=Test post description&status=start&userId=2'
{
"title": "Test Post Updated",
"description": "Test post description",
"userId": "2",
"status": "start",
"id": 5
}

You can send a DELETE request to delete. These operations are performed in your JSON file and your data always remains up-to-date.

curl -X DELETE http://localhost:3000/tasks/4

JSON Server has a custom Router that allows you to change or add new routes that are already defined.

For example, you can redirect the /api/v2/tasks route to /tasks, which makes your data more accessible.

To do this, let’s create a routes.jsonfile in our project directory and fill its content as follows.

{
"/api/*": "/$1",
"/:resource/:id/show": "/:resource/:id",
"/tasks/:status": "/tasks?status=:status",
"/articles\\?id=:id": "/tasks/:id"
}

To run with routes, running JSON Server as below will be enough.

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

JSON Server is easily usable in JavaScript-based projects because it is based on Node.js. You can also make requests to JSON Server’s APIs from any language.In conclusion, JSON Server can be a useful tool during testing and development. For example, when developing a web application, creating a mock API server to test how the application will behave or to develop a project will be much easier, even if you don’t need a real data source.Setting up and using JSON Server is very easy. You can create a mock REST API on a local server and test your data by following just a few steps.

For the requests mentioned in the article, I used the curl command. Windows users can access it from the following address.

curl for Windows
These are the latest and most up to date official curl binary builds for Microsoft Windows. curl for 64-bit Size: 10.1…curl.se