DEV Community

Cover image for How To Create A Fake REST API For Your Project With JSON Server
Tia Eastwood
Tia Eastwood

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

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

json-server --watch db.json
Enter fullscreen mode Exit fullscreen mode

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

terminal

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);
            });
    }, []);
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Now if you run

json-server --watch db.json
Enter fullscreen mode Exit fullscreen mode

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

terminal

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!

Discussion (12)

Collapse
moutafatin1 profile image
moutafatin1

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

Collapse
ecyrbe profile image
ecyrbe

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.

Collapse
tiaeastwood profile image
Tia Eastwood Author

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

Collapse
sreerajkarippala profile image
sreeraj

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...

Collapse
paddyredbeard profile image
Patrick B

Ah, very useful. I've been using http-server to do something similar, but this is a better fit for my needs. Thanks!

Collapse
chismo950 profile image
chismo950

Is json server suitable for production environment?

Collapse
tiaeastwood profile image
Tia Eastwood Author

no, just for practice/demo purposes

Collapse
ecyrbe profile image
ecyrbe

No. It's used to mock APIs. Don't use this on production

Collapse
jarvisscript profile image
Chris Jarvis

This is very useful. I could use a fake Api and server to a demo.

Collapse
andrewbaisden profile image
Andrew Baisden

Good tutorial! I was using JSON Server a lot until I became confident using NodeJS.

Collapse
laurenceabas profile image
Laurence Abas

This is awesome. I'll definitely try this on my upcoming project.

Collapse
asif530 profile image
asif530

Thanks for this short and useful application. I dont get the page localhost:3000/ shows... Did it come with json server?