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

#api #beginners #tutorial #webdev

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!

Top comments (15)

moutafatin1 • Jun 9 '22

There is a way to create a fake JWT to prototype the authentication?

ecyrbe • Jun 12 '22

Yes, it's an express server. You can add custom routes like any express server to generate a valid JWT for the connecting user. And add a JWT validation middleware to protect the other endpoints.

Tia Eastwood • Jun 9 '22

I'm pretty sure there will be but I haven't done that myself. It's something to investigate for sure!

sreeraj • Jun 15 '22

Nice article, #Back project may help you to setup api with JWT. #Back automatically convert app database table to API endpoint, please try at
github.com/WeAreKins/BackNode/rele...

David • Apr 30

Hi, nice article. Few weeks ago I discovered DevApiService, it’s a free online tool for mockup APIs or fake APIs. It’s very easy to use and you can mockup API in less than one minute.