Web development: Creating Your Own Fake API

Let's say you are working on a demo website or you are learning to code and want to practice setting up a project which serves data. What do you do?

For example, when creating a fashion website you require data to depict the things for sale. Kind of like e-commerce applications. You probably don't have any real data yet. In this case

You have few options to turn to —

• You could leverage pre-existing fake APIs such as DummyJSON — They can cover many use-cases — but what if none of them are suitable for your project need?
• Another option is hard coding the fake API on your own local server. This might sounds complex but using JSON Server — you can achieve this within minutes. Not only that this will give you full control on the shape of your data, it also help demonstrate that you know how to call API endpoints.

In this story, I am going to demonstrate how you can easily create a fake api using json-server to serve a JSON file with any shape of your project need.

First thing first create a folder using your terminal.

mkdir myDummy-fashionStore-api

As a general rule, any project that’s using Node.js will need to have a package.json file. To quickly create that you can run the following command by changing directory to the folder you just created.

npm init -y

Now, if you open your folder using your favourite code editor, you should see a package.json file with the following content.

{
 “name”: “mydummy-fashionstore-api”,
 “version”: “1.0.0”,
 “description”: “”,
 “main”: “index.js”,
 “scripts”: {
 “test”: “echo \”Error: no test specified\” && exit 1"
 },
 “keywords”: [],
 “author”: “”,
 “license”: “ISC”
}

The package.json file acts as a manifest for your project — for additional information, go to link. It can do a lot of things, for example, it’s a central store for tool settings. It’s where npm or yarn keep track of installed node packages by storing their names and versions.

Now you can install a package called json-server

npn install -g json-server

With JSON Server, you can create a fake API that runs locally for any shape of data you want. It functions in the same way as any other fake API! The advantage is that now you have the ability to shape your data exactly as you want it.

To do that, you can create db.json file — And, in this file, create a JSON object with a "key" that will act as your API endpoint. Let's say we have an endpoint /shirts for our dummy fashion store api that lists shirts. In this case, our db.json might look like

{
    "shirts": [
        {
            "id": 1,
            "name": "Stylish Stuff",
            "color": "white",
            "imgurl": "https://unsplash.com/photos/WdhmRPvMn7A",
            "stock": 10
        },
        {
            "id": 2,
            "name": "Cool Shirt",
            "color": "black",
            "imgurl": "https://unsplash.com/photos/Wr0TpKqf26s",
            "stock": 5
        },
        {
            "id": 3,
            "name": "Interesting men",
            "color": "blue",
            "imgurl": "https://unsplash.com/photos/FiUX5I_R8pc",
            "stock": 17
        }
    ]
}

That's it! You now have your fake api setup complete! All you have to do now is serve your db.json using the following command.

json-server --watch db.json

This will make your API accessible via localhost:3000/shirts and it behaves like any other REST API.

FINAL TIPS

If you don't want to run json-server on port 3000, you can easily change it buy running it in different port number e.g port 4000 would be

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

You can have multiple endpoints too! This is done by simply adding a new key to your db.json object.

Check out the json-server documentation to see what else you can accomplish, and I hope this helps you with your projects! Don't be shy to share what you did with the fake api you just created.