When following an Agile methodology, with a number of iterations, and having a team of front-end and back-end developers, it can be a challenge to complete committed tasks (or a feature) in an iteration, since the front-end development team is dependent on the back-end development team to produce a working API. Also, testing from a test team can only be completed after the software development team have completed their tasks.

One approach to speed up this development is to use a mock REST API, during front-end development, to simulate a back-end REST service that is producing data in JSON format. With this approach, careful consideration needs to be given to the design of the API. Both front-end developers and back-end developers need to collaborate and agree on the structure of the API at the start of an Agile iteration so that this can be the contract (or agreement) with how the front-end interacts with the back-end. With this agreement in place, both front-end and back-end teams can commence their development early in an Agile iteration. Also, the front-end development team can have full control of the mock REST API and switch it with the real REST API after the back-end developers complete their implementation.

The tool that works well to create a mock REST API in a few minutes with zero coding is JSON Server. JSON server is available as a npm package.

Before proceeding with this article, ensure that you have npm installed. Visit node.js to install npm.

Getting started

Install the JSON server package globally on your system:

npm install -g json-server

Heroes API endpoint

Let us assume that the front-end developers and the back-end developers have agreed on an API contract for a heroes endpoint.

A hero object will have id (integer), name (string) and status (string) properties:

The heroes endpoint will have the following routes:

GET    /heroes
GET    /heroes/:id
POST   /heroes/
PUT    /heroes/:id
PATCH  /heroes/:id
DELETE /heroes/:id

Create the mock REST API

On your file system create and navigate to a new folder, thereafter create a json file named db.json. The db.json file will contain the data that will be exposed via the mock API.

To create the mock API, open the db.json file, create an object with a heores array containing mock heroes as follows:

Run the mock REST API

To run the mock REST API, open a terminal or console, navigate to the db.json file and then start the JSON server by running the following command:

json-server --watch db.json

That is it.

After executing the above command, the server will start on port 3000. Navigate to http://localhost:3000/heroes/ using postman and test each endpoint.

Note for a POST, PUT or PATCH request, the request needs to include Content-Type: application/json in the request header.

Add more endpoints

To add more endpoints to the mock REST API, simply add new array objects to the db.json file. For example, if we add a villains endpoint:

then the villains can be accessed at:

http://localhost:3000/villains/

Changing JSON server to run on another port

Let us assume we are running a react application on port 3000 and the JSON server is failing to start. We can easily change the JSON server to run on a different port. Run the following command to start the JSON server on port 3005.

json-server --watch db.json --port 3005

Changing route endpoint

Normally REST APIs run on an endpoint containing /api/. If we want to change the heroes endpoint from

http://localhost:3005/heroes/

to

http://localhost:3005/api/heroes/

then we can create a routes.json file in the same location as the db.json file with the following pattern

Start the JSON server by running the following command

json-server --watch db.json --routes routes.json --port 3005

The mock REST API will now be available at

http://localhost:3005/api/heroes

Summary

This article provided a basic introduction to creating a mock REST API. The process to get a mock REST API running in a few minutes is very simplistic thanks to JSON server. JSON server can be used in many scenarios to mock REST APIs to enable rapid software development in an Agile iteration.

Further information on JSON server can be found at the following links:

• npm
• json-server

Software versions used in this article

• node v12.16.2
• json-server v0.16.1
• postman v7.23.0