Creating Mock APIs with json-server: A Beginner's Guide to Faking It Til You Make It

Creating Mock APIs with json-server: A Beginner's Guide to Faking It Til You Make It was initially published on Friday January 13 2023 on the Tech Dev Blog. For the latest up-to-date content, fresh out of the oven, visit https://techdevblog.io and subscribe to our newsletter!

Are you looking to build a simple, yet powerful to-do list API? Look no further! In this guide, we'll walk you through the process of creating a JSON REST API using json-server, a popular and easy-to-use tool for creating mock REST APIs.

Prerequisites

Before we begin, make sure you have the following installed on your computer:

Node.js
npm (comes with Node.js)
json-server (you can install it via npm by running npm install -g json-server)

Step 1: Create a JSON file for your to-do list

The first step is to create a JSON file that will serve as the foundation for our API. This file will contain all the to-do items and their respective details.

Create a new file called db.json in a directory of your choice and add the following data to it:

{
    "todos": [
        {
            "id": 1,
            "title": "Buy milk",
            "completed": false
        },
        {
            "id": 2,
            "title": "Finish report",
            "completed": false
        },
        {
            "id": 3,
            "title": "Attend meeting",
            "completed": true
        }
    ]
}

This file represents a simple to-do list containing three items. Each item has an id, a title, and a completed field.

Step 2: Start the json-server

With the JSON file in place, we can now start the json-server. Open a terminal and navigate to the directory where you saved the db.json file. Then, run the following command:

json-server --watch db.json

This command starts the json-server and tells it to use the db.json file as its data source. The --watch flag tells the server to watch for changes in the db.json file and automatically reload the data when changes are detected.

Once the server is running, you should see a message similar to the following:

\{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/todos

  Home
  http://localhost:3000

The server is now running and accessible at http://localhost:3000. You can test it by opening a web browser and navigating to http://localhost:3000/todos. You should see the list of to-dos that we added to the db.json file.

Step 3: Add routes to the API

By default, json-server exposes the entire contents of the db.json file as a single resource at the root of the API. However, we can also add custom routes to expose specific parts of the data or perform specific actions.

To add a custom route, create a new file called routes.json in the same directory as the db.json file and add the following data to it:

{
    "/api/todos/:id": {
        "GET": {
            "action": "db.todos.find(todo => todo.id == :id)"
        },
        "PUT": {
            "action": "db.todos.find(todo => todo.id == :id).completed = true"
        },
        "DELETE": {
            "action": "db.todos = db.todos.filter(todo => todo.id != :id)"
        }
    }
}

This file defines three custom routes for our API, each corresponding to a specific HTTP method (GET, PUT, DELETE). The :id parameter in each route is a placeholder that will be replaced by the actual id of the to-do item being requested or modified.

To use the routes.json file, we need to tell the json-server to load it when starting. To do this, we need to add the -r flag to the command we use to start the server. The final command should look like this:

json-server --watch db.json -r routes.json

With the custom routes in place, we can now perform specific actions on individual to-do items using the API. For example, we can retrieve a specific to-do item by sending a GET request to http://localhost:3000/api/todos/1, mark a to-do item as completed by sending a PUT request to http://localhost:3000/api/todos/1, and delete a to-do item by sending a DELETE request to http://localhost:3000/api/todos/1.

Conclusion

That's it! With just a few simple steps, we've created a fully functional JSON REST API for a to-do list using json-server. The json-server is a great tool for creating mock APIs, but you can also use it as a simple and easy-to-use backend for small projects.

Don't forget to stop the json-server when you're done working on your project, to avoid unnecessary usage of resources. Remember to use the Ctrl+c command.

Thanks for following along and happy coding!