Joshua Colvin

One of the biggest pain points I’ve experienced as a front end developer is writing an application that consumes a REST API before the REST API has been written. If you have a database schema available, you can do a lot of work in parallel. I’ve tried many approaches (json files, JavaScript arrays, localStorage, firebase, Node API’s) to solving this problem, each with their own drawbacks. JSON Server is the solution I’ve been looking for!

What is JSON-Server

From the docs

Get a full fake REST API with zero coding in less that 30 seconds (seriously)

JSON-Server lets you create a fully functional backend using just JSON. It supports GET, POST, PUT, PATCH, and DELETE requests and automatically saves your changes.

Installation

One of the best things about JSON-Server is that there is no complicated setup, just install with npm:

npm install -g json-server

Creating the database

Creating the database is a simple as creating a json file that contains your data:

{
  "books": [
    {
      "id": 1,
      "title": "The Great Gatsby",
      "author: "F. Scott Fitzgerald"
    },
    {
      "id": 2,
      "title": "Pride and Prejudice",
      "author: "Jane Austen"
    }
  ]
}

You can think of each array (books) as a different endpoint in your API.

Starting the server

We need to start the server in order to make requests:

json-server --watch db.json

This will start the server on port 3000. If you need to use a different port you can use the --port flag:

json-server --watch db.json --port 8080

Making requests

To keep things simple, we can use curl to make requests to our API in a differnt terminal session.

Let’s start with a ‘GET’ request for all books:

curl http://localhost:3000/books

We can request a single book using the book’s id:

curl http://localhost:3000/books/1

Adding a book is as simple as sending a ‘POST’ request with the new book data: Don’t worry about adding an id, JSON-Server will do that for you

curl --data "title=blood meridian&author=Cormac McCarthy" http://localhost:3000/books

If we look at db.json again, we will see that the new book was saved for us!

Let’s update book:

curl -X PUT -d "title=Infinite Jest" -d "author=David Foster Wallace" http://localhost:3000/books/1

Look at db.json and see that the book with the id of 1 has been updated.

Finally, we will delete the book with the id of 2:

curl -X DELETE http://localhost:3000/books/2

Once again, look at db.json and see that the book with the id of 2 has been deleted.

Conclusion

JSON-Server is a great way to create a mock server with data persistence. There are some more advanced features that weren’t covered here so I urge you to read the documentation.

Joshua Colvin is a UI Software Engineer specializing in building component libraries. He lives with his wife and two kids in Michigan.