Skip to content
Angular Essentials
GitHub

Mocking http server

Set up JSON server and publish a sample REST API.

JSON Server is available as an NPM package. The installation can be done by using the Node.js package manager:

npm install json-server

Now let’s create a new JSON file with the name db.json. This file contains the data which should be exposed by the REST API. For objects contained in the JSON structure, CRUD endpoints are created automatically. Take a look at the following sample db.json file which exposes the endpoint for sports and grocery section.

{
  "sports": [
    {
      "id": "c8ebd2e7-c846-4e11-b668-dc2e93d89b1f",
      "name": "Football",
      "price": 1500,
      "imageUrl": "https://upload.wikimedia.org/wikipedia/commons/1/1d/Football_Pallo_valmiina-cropped.jpg",
      "description": "Football description"
    },
    {
      "id": "7f6f5c1a-5822-4a03-af9e-2fcb9f58e7f4",
      "name": "Football Boot",
      "price": 6000,
      "imageUrl": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/AdidasEtruscoBoot.jpg/230px-AdidasEtruscoBoot.jpg",
      "description": "Football description"
    }
  ],
  "grocery": [
    {
      "id": "67612115-1de1-4c0e-b6a6-e7317b6686ea",
      "name": "Onion",
      "price": 500,
      "imageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcA6JFkXQcKYPMFDt-sPSS_rs6Od8bWkF4KQ&usqp=CAU",
      "description": "Onion description"
    },
    {
      "id": "0a40af13-d0c9-4a1a-9a22-242eaf0c936d",
      "name": "Lemon",
      "price": 600,
      "imageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKIlWVg8HN4NH2HPrbhVKv0bQ-F_35Chk2bjuqF0JBZ_Z1kiTDKFP7h4p0Pi9aKhvATP4&usqp=CAU",
      "description": "Grocery description"
    }
  ]
}

Go to the directory where db.json is created and start the JSON server by executing the following command:

npx json-server --watch db.json

As a parameter, we need to pass over the file containing our JSON structure (db.json). Furthermore, we’re using the — watch parameter. By using this parameter we’re making sure that the server is started in watch mode which means that it watches for file changes and updates the exposed API accordingly.

Now we can open the URL http://localhost:3000 in the browser. The following HTTP endpoints are created automatically by the JSON server:

GET /sports;
GET /sports/{id};
POST /sports;
PUT /sports/{id};
PATCH /sports/{id};
DELETE /sports/{id};

GET /grocery;
GET /grocery/{id};
POST /grocery;
PUT /grocery/{id};
PATCH /grocery/{id};
DELETE /grocery/{id};

If you make POST, PUT, PATCH, or DELETE requests, changes will be automatically saved to db.json. A POST, PUT or PATCH request should include a Content-Type: application/json header to use the JSON in the request body. Otherwise, it will result in a 200 OK but without changes being made to the data.

It’s possible to extend URLs with further parameters. E.g. you can apply filtering by using URL parameters as you can see in the following:

http://localhost:3000/sports?name=football\

This returns just one employee object as a result. Or just perform a full-text over all properties:\

http://localhost:3000/sports?q=foo\

For a full list of available URL parameters take a look at the JSON server documentation: https://github.com/typicode/json-server