How To Create A Fake REST API For Your Project With JSON Server

Often you may be building a demo website, or practice project and you need some data for it. As an example, say you're building a demo fashion website and you need data to represent the items for sale. What would you do?

• You could use an existing API, but what if there is nothing suitable available?
• You could also hardcode the data, but then you'll need to change your code later if you do decide to connect an API. You might want also want to practice/demonstrate that you know how to call an API endpoint.

With JSON Server, you can create a fake API that runs locally (perfect for development or if you just need it to present a demo!) and works just like any other API!

To begin with, install JSON Server

npn install -g json-server

To act as your "database", you'll need to create a file called db.json (I usually put this in the root of my project). In here, you will create a JSON object with a key that will act as your API endpoint. Let's say I'm creating a website that sells bags. I'm just going to add 3 items here:

{
    "bags": [
        {
            "id": 1,
            "title": "Stylish Bag",
            "color": "orange",
            "imgurl": "https://images.unsplash.com/photo-1584917865442-de89df76afd3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80",
            "stock": 10
        },
        {
            "id": 2,
            "title": "Cool Bag",
            "color": "black",
            "imgurl": "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80",
            "stock": 5
        },
        {
            "id": 3,
            "title": "Interesting Bag",
            "color": "blue",
            "imgurl": "https://images.unsplash.com/photo-1594223274512-ad4803739b7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1057&q=80",
            "stock": 17
        }
    ]
}

Once you've created your data, use the following command in the terminal:

json-server --watch db.json

Cool! You can now access your API via localhost:3000/bags!

This now behaves like any other REST API. For example, if you wanted to use this in a React app, you can call your "bags" endpoint and get the data. Here is just one example of doing that:

useEffect(() => {
        axios
            .get("http://localhost:3000/bags")
            .then((res) => {
                setData(res.data);
            })
            .catch((error) => {
                console.log(error);
            });
    }, []);

---

Changing the port

If you don't want json-server to run on port 3000 (maybe you have your frontend running there), you can change the port like this:

json-server --watch -p 4000 db.json

Multiple Endpoints

You can have multiple endpoints! Simply add another key to your object. Here I have added "wallets":

{
  "bags": [
    {
      "id": 1,
      "title": "Stylish Bag",
      "color": "orange",
      "imgurl": "https://images.unsplash.com/photo-1584917865442-de89df76afd3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80",
      "stock": 10
    },
    {
      "id": 2,
      "title": "Cool Bag",
      "color": "black",
      "imgurl": "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80",
      "stock": 5
    },
    {
      "id": 3,
      "title": "Interesting Bag",
      "color": "blue",
      "imgurl": "https://images.unsplash.com/photo-1594223274512-ad4803739b7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1057&q=80",
      "stock": 17
    }
  ],
  "wallets": [
    {
      "id": 1,
      "title": "Leather Wallet",
      "color": "black",
      "imgurl": "https://images.unsplash.com/photo-1612023395494-1c4050b68647?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80",
      "stock": 10
    }
  ]
}

Now if you run

json-server --watch db.json

again, you can access either the bags or the wallets endpoint:

Make sure to check the json-server docs to see what else you can do, and I hope you find this helpful for your projects!