DEV Community

John Raptis
John Raptis

Posted on • Updated on • Originally published at johnraptis.dev

Fake API with JSON Server

This post was originally published in my blog

Many times as developers we want a quick back-end to fetch data from. Instead of a real API we just want to have some fake data to play with. Whatever the reason is, a fake API comes in handy during development.

For this we are going to use a package called json-server.

We are going to set up a quick server and explore some cool features that ship with json-server. There are more features included like pagination and filtering but here are the one's that I found myself grabbing the most.

As always you can dig into the documentation.

Here is the source.

Basic Server

First we are going to init a package.json file in our project. . .

mkdir fake-api
cd fake-api
npm init -y
Enter fullscreen mode Exit fullscreen mode

Note: With the -y flag we are going to skip the prompt process.

. . . and install json-server

npm install json-server
Enter fullscreen mode Exit fullscreen mode

We are going to create a db.jsonfile where our data going to be stored just like a server.

{
    "songs": [
        {
            "title": "Africa",
            "band": "Toto",
        },
        {
            "title": "Fkj",
            "band": "Moments",
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

In our package.json file we are going to add the following script.
All we are doing here is watching in our db.json file for changes which is hosted in port 3001.

"json": "json-server --watch db.json --port 3001" 
Enter fullscreen mode Exit fullscreen mode

Now if we run npm run json our server is running.

Terminal

Generate Random Data

In an index.js file we are going to generate some random users.

let names = ['Mary', 'John', 'Mike', 'Paul', 'Anna', 'Chris'];
let ages = [34, 56, 12, 22, 24, 54];

module.exports = () => {
    const data = { users: [] };
    for (let i = 0; i < 10; i++) {
        let randomName = names[Math.floor(Math.random() * names.length)];
        let randomAges = ages[Math.floor(Math.random() * ages.length)];
        data.users.push({ id: i, name: `${randomName}`, age: `${randomAges}` });
    }
    return data;
}
Enter fullscreen mode Exit fullscreen mode

Our script will look like this.

"db": "json-server --watch index.js --port 3002" 
Enter fullscreen mode Exit fullscreen mode

And again by running npm run db we have yet another server.

Custom Routes

Many times when we are building our fake API we want our endpoints to mimic a real case scenario.
We might want our url's to look something like this.

http://localhost:3004/rock/songs
http://localhost:3004/rock/bands
http://localhost:3004/classical/pieces
http://localhost:3004/classical/artists
Enter fullscreen mode Exit fullscreen mode

So how we do this?

Our db.json will have the typical JSON format.

{
    "rock_songs": [
        {
            "title": "Africa",
            "band": "Toto"
        },
        {
            "title": "Fkj",
            "band": "Moments"
        }
    ],
    "rock_bands": [
        {
            "name": "Toto"
        },
        {
            "name": "Boston"
        }
    ],
    "classical_pieces": [
        {
            "title": "Prelude in C Major"
        },
        {
            "tilte": "Toccata and fugue in d minor"
        }
    ],
    "classical_artists": [
        {
            "name": "Alexander Scriabin"
        },
        {
            "name": "Johann Sebastian Bach"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Then we create a routes.json with the following.

{
    "/": "/",
    "/rock/songs": "/rock_songs",
    "/rock/bands": "/rock_bands",
    "/classical/pieces": "/classical_pieces",
    "/classical/artists": "/classical_artists"
}
Enter fullscreen mode Exit fullscreen mode

On the left side is how we want our endpoint to look like, and in the right the corresponding array in our db.json file.

We will adjust our script . . .

"custom:routes": "json-server db.json  --routes routes.json --port 3003"
Enter fullscreen mode Exit fullscreen mode

. . .and if we run npm run custom:routes we get our custom endpoints.

Terminal

Top comments (2)

Collapse
 
lambrero profile image
Avin Lambrero
Collapse
 
gikwegbu profile image
George Ikwegbu Chinedu

Beautiful article