Simulate a Backend REST API with json-server for CRUD Development in React

Quickly Set Up a Fake REST API for React Development with json-server

We frontend developers are faced with a common task, which is to simulate a REST service or backend REST API to deliver some data in JSON format to the frontend application and make sure everything works as expected.

This is because many times the backend services are not ready when the frontend team has to start their development. Because of time, we cannot wait, and we must start displaying information to the client even if it is simulated.

Of course, we can set up a complete backend server, for example, using Node.js, Express, and MongoDB. However, as we said before, we don’t have time, and this is when the following question arises:

How to realize CRUD functionality without creating your backend service?

In this tutorial, we will see how to set up and use a fake REST API server using json-server. Which we can use while developing a web application with react.

What is json-server?

json-server provides a full fake REST API that requires no configuration or coding to set up. With its help, we can quickly and easily set up a backend for prototyping and mocking without worrying about the underlying logic.

This way, we can focus more on developing the frontend and less on configuring the backend.

Learn all about the json-server here.

Developing a CRUD App with React

Setting Up json-server

To start using json-server, we install the package with the following command:

npm install -g json-server

We create a JSON file called db.js with some data as your requirement needs. For example, in my case, I need some JSON data with user information like id, name, username, etc. Like the following: