Create a full fake REST API with zero coding using json-server

If you don’t believe me go this url.

This is basically created for front-end developers who need a quick back-end for prototyping and mocking. Yeah I know what you are thinking I stole this line from their github page :)

I have video also for the same topic you can check it out too :)

So lets start -

Step 1

In order to get started you first need to install this package. So let’s do that open your terminal & type this command

npm install -g json-server
Note: You should have node & npm install before installing this

Step 2

Create a directory for your project by typing command below

mkdir api-json-server

My project directory name is api-json-server you can give whatever you want.

Step 3

Now go inside your project directory.

cd api-json-server

& Create a new file i’ll name it as todos.json

touch todos.json

touch command is used to create new file.

Step 4

I’ll open the todos.json file in sublime you can use any code editor.

Lets start writing json data we would like to provide with our api. I’ll code a data for a todo app where I can get list of todos, post new todo, update existing todo & delete a todo.

todos.json (Data I wrote for my todos api)

We have an object that consist of key todos whose value is an array of object.

Note : Although JSON is similar to Object but in JSON key & value should be in string unless it is number or boolean.

Similarly you can write your api data for employees, products & almost anything.

Step 5

Now go to terminal & type command below

json-server --watch todos.json

It will show you something like above in your terminal.

Step 6

Now go to the url http://localhost:3000/todos in the browser & you will se the same data that we have written in our todos.json .

Isn’t it awesome now you can create your app prototypes with this fake api & it will look like real. There are lot more configuration you can do with json-server but what I wanted to tell you is how to use it. I found it helpful so I wrote an article on it.

Atleast you can create your side projects using apis genereated by json-server.

I know you can do this with sails js, rails & flask pretty fast but again as I said it is just good for prototypes & side projects.

Step 7

You can test the api you just created using an awesome tool known as postman.

GET request on the same url http://localhost:3000/todos

Above if you see top left I have select GET Method from dropdown & then pasting my url http://localhost:3000/todos in the search box & then I clicked on send. I get the same data that I got in browser. You’ll be thinking how this tool is useful then.

You can test your api by posting data to your apis, edit & delete a particular data & many more things using this tool.

Step 8

Now I’ll delete one record from our api.

DELETE request (I am deleting record with id 6)

Above if you see this time I have selected DELETE method from dropdown & this time I have used url http://localhost:3000/todos/6 because I want to delete todo item with id 6. If you are wondering from where the id came you can go back to todos.json & check that every todo item has an id. I am refering that id here. So when I click on send it returned an empty object object & the status below send button is 200 which means that particular record has been deleted successfully.

How can we confirm that

Perform a get request again using Step 7 you’ll see now we don’t have todo record with an id of 6.

We don’t have todo record with id 6

Step 9

Lets post a datato our api using postman just to test

POST request on the same url

This time select POST method from dropdown because you want to post a data. The url will be same http://localhost:3000/todos. But this time we have to do some extra configuration we have to send an object with our post request. Below search bar select Body tab(One with orange border) also select raw option(One with selected radio button).

Then there is a dropdown(With orange text color) select JSON(application/json) because you want to send the data in the form of json.

If you closely look the data I have written it is exactly same as we have written in our todos array of objects(there we have array of todos) of course it should be then only it will get added to todo’s array. But there is only one difference you don’t need to assign id it will automatically get assigned.

Here we are trying to add one new record to our array of todo’s object.

So now lets click on send button & repeat Step 7 to do a get request & see is the new data get added to our api.

Yeah it got added if you check the last object in the todo’s array.

If you want to see the magic go to your todo’s json file & you’ll find the data get added their also.

You can also update data just target an id & update any key(like title, urgency, due date) of that particular record with that id just like Step 8 but this time you will not send complete object but just a key value pair like title.

Ok that’s it for this article now go ahead give this a shot.

Thanks for taking time to read this article have a great time.