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

npm 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);
            });
    }, []);

Tips

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!

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

Tips

Changing the port

Multiple Endpoints