JSON-Server as a Fake REST API in Frontend Development

Draft updated on Invalid Date

By Madhankumar

JSON-Server as a Fake REST API in Frontend Development

This tutorial is out of date and no longer maintained.

Introduction

Frontend development is changing day by day and we have to learn a lot more stuff. When we start learning a new framework or library, the first thing that is recommended is to build a todo list that helps in doing all CRUD functions. But there is no solid backend/library available to make use of it to build a todo list.

Simulate a backend server and a REST API with a simple JSON file.

To overcome that problem json-server came into the picture. With it, we can make a fake REST API. I have used it in my app and thought of sharing it with the frontend community.

JSON Server is an npm package that you can create a REST JSON webservice. All we need is a JSON file and that will be used as our backend REST.

Installing JSON Server

You can either install it locally for a specific project or globally. I will go with locally.

npm install -D json-server

Above is a single-line command to install the json-server.

-D Package will appear in your devDependencies.

I am not going to explain that much here. If you want to learn more about that go through the docs for npm install.

Check JSON Server version using json-server -v.

JSON file

As per the standard convention, I am going to name the file db.json, you can name it as per your needs.

{
  "Todos": [
  {
    "id": 1,
    "todo": "Check Todo"
  },
  {
    "id": 2,
    "todo": "New Todo"
  }
  ]
}

For simplicity, I have included two elements into the Todos array. You can add more also.

Start the JSON Server

json-server --watch db.json

Terminal

Your JSON Server will be running on port 3000.

Now that we have our server and API running, we can test it and access it with a tool like POSTman or Insomnia.

These are REST clients that help us run HTTP calls.

CRUD Operations

Moving onto the CRUD operations. This is how we can access our data using RESTful routes.

Routing URLs
[GET] http://localhost:3000/Todos
[POST] http://localhost:3000/Todos post params:!
[PUT] http://localhost:3000/Todos post params:!
[DELETE] http://localhost:3000/Todos/id

Testing via POSTman

GET Request

POSTman

POST Request

POSTman

PUT Request

POSTman

DELETE Request

POSTman

Conclusion

Now we can see that db.json file can make REST webservice. Also, we can make custom URIs with a mapping file. I will cover those areas in the next article.

I hope this article will remove each and every frontend developer’s pain (banging the head) for a backend server to test with. Further, you can check out the code in my GitHub repo and also refer to the official json-server docs for more operations

If you have any queries, let me know in the comments.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products