How To Create A Fake REST API For Your Project With JSON Server
Tags: api, beginners, tutorial, webdev
Published: 2022-06-09 13:15:58

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](https://github.com/typicode/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**!

![terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nan3ncikn6bjsewmgb2n.png)

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:

![terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1g920nd9j3kv5wtj3s1.png)

Make sure to check the [json-server docs](https://github.com/typicode/json-server) to see what else you can do, and I hope you find this helpful for your projects!