Tutorial

JSON-Server as a Fake REST API in Frontend Development

Draft updated on Invalid Date
    Default avatar

    By Madhankumar

    JSON-Server as a Fake REST API in Frontend Development

    This tutorial is out of date and no longer maintained.

    Introduction

    Frontend development is changing day by day and we have to learn a lot more stuff. When we start learning a new framework or library, the first thing that is recommended is to build a todo list that helps in doing all CRUD functions. But there is no solid backend/library available to make use of it to build a todo list.

    Simulate a backend server and a REST API with a simple JSON file.

    To overcome that problem json-server came into the picture. With it, we can make a fake REST API. I have used it in my app and thought of sharing it with the frontend community.

    JSON Server is an npm package that you can create a REST JSON webservice. All we need is a JSON file and that will be used as our backend REST.

    Installing JSON Server

    You can either install it locally for a specific project or globally. I will go with locally.

    1. npm install -D json-server

    Above is a single-line command to install the json-server.

    -D Package will appear in your devDependencies.

    I am not going to explain that much here. If you want to learn more about that go through the docs for npm install.

    Check JSON Server version using json-server -v.

    JSON file

    As per the standard convention, I am going to name the file db.json, you can name it as per your needs.

    {
      "Todos": [
      {
        "id": 1,
        "todo": "Check Todo"
      },
      {
        "id": 2,
        "todo": "New Todo"
      }
      ]
    }
    

    For simplicity, I have included two elements into the Todos array. You can add more also.

    Start the JSON Server

    1. json-server --watch db.json

    Terminal

    Your JSON Server will be running on port 3000.

    Now that we have our server and API running, we can test it and access it with a tool like POSTman or Insomnia.

    These are REST clients that help us run HTTP calls.

    CRUD Operations

    Moving onto the CRUD operations. This is how we can access our data using RESTful routes.

    Routing URLs
    [GET] http://localhost:3000/Todos
    [POST] http://localhost:3000/Todos post params:!
    [PUT] http://localhost:3000/Todos post params:!
    [DELETE] http://localhost:3000/Todos/id
    

    Testing via POSTman

    GET Request

    POSTman

    POST Request

    POSTman

    PUT Request

    POSTman

    DELETE Request

    POSTman

    Conclusion

    Now we can see that db.json file can make REST webservice. Also, we can make custom URIs with a mapping file. I will cover those areas in the next article.

    I hope this article will remove each and every frontend developer’s pain (banging the head) for a backend server to test with. Further, you can check out the code in my GitHub repo and also refer to the official json-server docs for more operations

    If you have any queries, let me know in the comments.

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors
    Default avatar
    Madhankumar

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel