What is json-server?
json-server is a full fake REST API with zero coding in less than 30 seconds. It allows you to create a mock REST API using a simple JSON file as the database.
What are json-server's main functionalities?
Create a Fake REST API
This code sets up a basic JSON server that reads from a 'db.json' file and serves it as a REST API. The server listens on port 3000.
const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
server.use(middlewares);
server.use(router);
server.listen(3000, () => {
console.log('JSON Server is running');
});
Custom Routes
This code demonstrates how to use custom routes with json-server. The rewriter middleware is used to map custom routes to the default routes.
const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
server.use(middlewares);
server.use(jsonServer.rewriter({
'/api/*': '/$1',
'/blog/:resource/:id/show': '/:resource/:id'
}));
server.use(router);
server.listen(3000, () => {
console.log('JSON Server is running');
});
Add Custom Middleware
This code adds custom middleware to the JSON server. In this example, a timestamp is added to the request body for POST requests.
const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
server.use(middlewares);
server.use((req, res, next) => {
if (req.method === 'POST') {
req.body.createdAt = Date.now();
}
next();
});
server.use(router);
server.listen(3000, () => {
console.log('JSON Server is running');
});
Other packages similar to json-server
miragejs
Mirage JS is a client-side server to build, test and share a complete working JavaScript application without having to rely on any backend services. Unlike json-server, which is more focused on quickly setting up a REST API, Mirage JS is designed to work seamlessly with frontend frameworks like React, Vue, and Angular.
prism
Prism is a package for creating mock servers based on OpenAPI and API Blueprint specifications. It allows you to create a mock server that can validate requests and responses against your API specification. Unlike json-server, which uses a JSON file as a database, Prism uses API specifications to generate mock responses.
JSON Server
Get a full fake REST API with zero coding in less than 30 seconds (seriously)
Created with <3 for front-end developers who need a quick back-end for prototyping and mocking.
Example
Create a db.json
file
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
]
}
Start JSON Server
$ json-server --watch db.json
Now if you go to http://localhost:3000/posts/1, you'll get
{ "id": 1, "title": "json-server", "author": "typicode" }
Also, if you make POST, PUT, PATCH or DELETE requests, changes will be automatically saved to db.json
using lowdb.
Routes
Based on the previous db.json
file, here are all the available routes. If you need more customization, you can use the project as a module.
GET /posts
GET /posts/1
GET /posts/1/comments
GET /posts?title=json-server&author=typicode
POST /posts
PUT /posts/1
PATCH /posts/1
DELETE /posts/1
To slice resources, add _start
and _end
or _limit
(an X-Total-Count
header is included in the response).
GET /posts?_start=20&_end=30
GET /posts/1/comments?_start=20&_end=30
To sort resources, add _sort
and _order
(ascending order by default).
GET /posts?_sort=views&_order=DESC
GET /posts/1/comments?_sort=votes&_order=ASC
To make a full-text search on resources, add q
.
GET /posts?q=internet
To embed other resources, add _embed
.
GET /posts/1?_embed=comments
Returns database.
GET /db
Returns default index file or serves ./public
directory.
GET /
Install
$ npm install -g json-server
Static file server
You can use JSON Server to serve your HTML, JS and CSS, simply create a ./public
directory.
Access from anywhere
You can access your fake API from anywhere using CORS and JSONP.
Remote schema
You can load remote schemas:
$ json-server http://example.com/file.json
$ json-server http://jsonplaceholder.typicode.com/db
JS file support
You can use JS to programmatically create data:
module.exports = function() {
var data = { users: [] }
for (var i = 0; i < 1000; i++) {
data.users.push({ id: i, name: 'user' + i })
}
return data
}
$ json-server index.js
Module
If you need to add authentication, validation, rewrite or add routes, you can use the project as a module in combination with other Express middlewares.
var jsonServer = require('json-server')
var server = jsonServer.create()
var router = jsonServer.router('db.json')
server.use(jsonServer.defaults)
server.use(router)
server.listen(3000)
For an in-memory database, you can pass an object to jsonServer.router()
.
Please note also that jsonServer.router()
can be used in existing Express projects.
Deployment
You can deploy JSON Server. For example, JSONPlaceholder is an online fake API powered by JSON Server and running on Heroku.
Links
Video
Articles
Projects
License
MIT - Typicode