Install JSON Server

Chapter Objectives

✔️

Add JSON Server

Install and configure json-server as a fake API server.

What is JSON server?

json-server is a small package that helps you create a no-code API in less than 30 seconds. It’s a complete fake API with no code that allows you to create, read, update, and delete tasks.

This won’t provide us with a real API server, but it’s an excellent tool to focus on the Angular part of the application.

Let’s install it and create a fake database.

🎓 Instructions

Run the following command in a terminal to install json-server.
Terminal window
```
npm install json-server
```

Create a db.json file at the root of the project and fill it with a list of tasks.

{
  "tasks": [
    {
      "id": 1,
      "title": "First task",
      "description": "This is the first task in your to-do list.",
      "createdAt": "2021-09-01T12:00:00"
    },
    {
      "id": 2,
      "title": "Second task",
      "description": "This is the second task in your to-do list.",
      "createdAt": "2021-09-01T12:00:00"
    }
  ]
}

Create a start-server script in your package.json file.

{
  "scripts": {
    "start-server": "json-server --watch db.json"
  }
}

Run the following command to start json-server.
Terminal window
```
npm run start-server
```
Open your browser and navigate to http://localhost:3000/tasks.

✔️ What you’ve learned

In this chapter, you learned how to add json-server and configure it to create a fake API server. It will be used in the upcoming chapters to create, read, update, and delete tasks as if you were interacting with a real API server.