Setting Up a JSON Server for Mock REST APIs

Fake API from JSON Server

When developing frontend applications, you often need a quick and easy way to mock REST APIs. json-server is a great tool for this purpose. It allows you to create a full fake REST API with zero coding in less than 30 seconds.

Installing JSON Server

To get started with json-server, you need to have Node.js and npm (Node Package Manager) installed on your machine. Once you have those set up, you can install json-server globally using npm:

npm install -g json-server

Creating a Mock Database

json-server uses a simple JSON file to act as your database. Create a file named db.json and add some sample data:

{
  "posts": [
    { "id": 1, "title": "Hello World", "author": "John Doe" },
    { "id": 2, "title": "Learning JSON Server", "author": "Jane Smith" }
  ],
  "comments": [
    { "id": 1, "postId": 1, "body": "Great post!" },
    { "id": 2, "postId": 1, "body": "Very informative." }
  ],
  "profile": { "name": "Admin" }
}

Running JSON Server

With your db.json file ready, you can start the json-server:

json-server --watch db.json

By default, json-server will run on port 3000. You can now access your mock API at http://localhost:3000.

Exploring the Endpoints

json-server automatically generates routes for your data. Based on the db.json file, you can access the following endpoints:

• GET /posts - Retrieves all posts
• GET /posts/1 - Retrieves the post with ID 1
• POST /posts - Creates a new post
• PUT /posts/1 - Updates the post with ID 1
• DELETE /posts/1 - Deletes the post with ID 1

Similarly, you can access the comments and profile endpoints.

Example Requests

GET Request

Retrieve all posts:

curl http://localhost:3000/posts

POST Request

Create a new post:

curl -X POST -H "Content-Type: application/json" -d '{"title": "New Post", "author": "Alice"}' http://localhost:3000/posts

PUT Request

Update a post:

curl -X PUT -H "Content-Type: application/json" -d '{"title": "Updated Post", "author": "Alice"}' http://localhost:3000/posts/1

DELETE Request

Delete a post:

curl -X DELETE http://localhost:3000/posts/1

Advanced Features

json-server also supports many advanced features such as:

• Custom routes: You can define custom routes in a routes.json file.
• Middlewares: You can add custom middlewares to extend the functionality.
• Static file server: Serve static files along with your API.

Custom Routes

Create a routes.json file to define custom routes:

{
  "/api/": "/",
  "/posts/:id/show": "/posts/:id"
}

Start the server with the custom routes:

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

Adding Middleware

To add middleware, create a server.js file:

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();

// Add custom middleware before the default middlewares
server.use((req, res, next) => {
  console.log('Request method:', req.method);
  next();
});

server.use(middlewares);
server.use(router);
server.listen(3000, () => {
  console.log('JSON Server is running');
});

Run your custom server:

node server.js