DEV Community

queencykoh
queencykoh

Posted on

Setting up fake REST API with JSON Server in Angular

What is JSON Server?

JSON Server was created for front-end developers who need a quick back-end for prototyping and mocking. It allows developers to get a full fake REST API using their own data with no coding required.

Install JSON Server

Open your terminal and run



npm i json-server
Enter fullscreen mode Exit fullscreen mode

You may also install it globally by adding the -g attribute



npm install -g json-server
Enter fullscreen mode Exit fullscreen mode

Create JSON database

In the root of your application, create db.json file with some data



{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Configure JSON server

Open package.json file and add the following line of code in the scripts object:



"scripts" : {
    ...
    "mock:server": "json-server --watch db.json"
}
Enter fullscreen mode Exit fullscreen mode

If you have installed json-server globally you may simply run json-server --watch db.json in your terminal.

Run JSON server 



npm run mock:server
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000/posts/1 in your browser to get the following data

image

Top comments (0)