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 }
  ],
  "profile": { "name": "typicode" }
}

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 when doing requests, its good to know that

If you make POST, PUT, PATCH or DELETE requests, changes will be automatically and safely saved to db.json using lowdb.
Your request body JSON should be object enclosed, just like the GET output. (for example {"name": "Foobar"})
Id values are not mutable. Any id value in the body of your PUT or PATCH request wil be ignored. Only a value set in a POST request wil be respected, but only if not already taken.
A POST, PUT or PATCH request should include a Content-Type: application/json header to use the JSON in the request body. Otherwise it wil result in a 200 OK but without changes being made to the data.

Install

$ npm install -g json-server

Routes

Based on the previous db.json file, here are all the default routes. You can also add other routes using --routes.

Plural routes

GET    /posts
GET    /posts/1
POST   /posts
PUT    /posts/1
PATCH  /posts/1
DELETE /posts/1

Singular routes

GET    /profile
POST   /profile
PUT    /profile
PATCH  /profile

Filter

Use . to access deep properties

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode

Slice

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
GET /posts/1/comments?_start=20&_limit=10

Sort

Add _sort and _order (ascending order by default)

GET /posts?_sort=views&_order=DESC
GET /posts/1/comments?_sort=votes&_order=ASC

Operators

Add _gte or _lte for getting a range

GET /posts?views_gte=10&views_lte=20

Add _ne to exclude a value

GET /posts?id_ne=1

Add _like to filter using RegExp

GET /posts?title_like=server

Full-text search

Add q

GET /posts?q=internet

Relationships

To include children resources, add _embed

GET /posts?_embed=comments
GET /posts/1?_embed=comments

To include parent resource, add _expand

GET /comments?_expand=post
GET /comments/1?_expand=post

To get or create nested resources (by default one level, add routes for more)

GET  /posts/1/comments
POST /posts/1/comments

Database

GET /db

Homepage

Returns default index file or serves ./public directory

GET /

Extras

Static file server

You can use JSON Server to serve your HTML, JS and CSS, simply create a ./public directory or use --static.

mkdir public
echo 'hello word' > public/index.html
json-server db.json

json-server db.json --static ./static

Alternative port

You can start JSON Server on other ports with the --port flag:

$ json-server --watch db.json --port 3004

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

Generate random data

Using JS instead of a JSON file, you can create data programmatically.

// index.js
module.exports = function() {
  var data = { users: [] }
  // Create 1000 users
  for (var i = 0; i < 1000; i++) {
    data.users.push({ id: i, name: 'user' + i })
  }
  return data
}

$ json-server index.js

Tip use modules like faker, casual or chance.

Add routes

Create a routes.json file.

{
  "/api/": "/",
  "/blog/:resource/:id/show": "/:resource/:id"
}

Start JSON Server with --routes option.

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

Now you can access resources using additional routes.

/api/posts
/api/posts/1
/blog/posts/1/show

CLI usage

json-server [options] <source>

Options:
  --config, -c       Path to config file          [default: "json-server.json"]
  --port, -p         Set port                                   [default: 3000]
  --host, -H         Set host                              [default: "0.0.0.0"]
  --watch, -w        Watch file(s)                                    [boolean]
  --routes, -r       Path to routes file
  --static, -s       Set static files directory
  --read-only, --ro  Allow only GET requests                          [boolean]
  --no-cors, --nc    Disable Cross-Origin Resource Sharing            [boolean]
  --no-gzip, --ng    Disable GZIP Content-Encoding                    [boolean]
  --snapshots, -S    Set snapshots directory                     [default: "."]
  --delay, -d        Add delay to responses (ms)
  --id, -i           Set database id property (e.g. _id)        [default: "id"]
  --quiet, -q        Suppress log messages from output                [boolean]
  --help, -h         Show help                                        [boolean]
  --version, -v      Show version number                              [boolean]

Examples:
  bin db.json
  bin file.js
  bin http://example.com/db.json

You can also set options in a json-server.json configuration file.

{
  "port": 3000
}

Module

If you need to add authentication, validation, or any behavior, you can use the project as a module in combination with other Express middlewares.

Simple example

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

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

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.

Custom routes example

Let's say you want a route that echoes query parameters and another one that set a timestamp on every resource created.

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

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares)

// Add custom routes before JSON Server router
server.get('/echo', function (req, res) {
  res.jsonp(req.query)
})

server.use(function (req, res, next) {
  if (req.method === 'POST') {
    req.body.createdAt = Date.now()
  }
  // Continue to JSON Server router
  next()
})

// Use default router
server.use(router)
server.listen(3000, function () {
  console.log('JSON Server is running')
})

Custom output example

To modify responses, overwrite router.render method:

// In this example, returned resources will be wrapped in a body property
router.render = function (req, res) {
  res.jsonp({
   body: res.locals.data
  })
}

Rewriter example

To add rewrite rules, use jsonServer.rewriter():

// Add this before server.use(router)
server.use(jsonServer.rewriter({
  '/api/': '/',
  '/blog/:resource/:id/show': '/:resource/:id'
}))

Mounting JSON Server on another endpoint example

Alternatively, you can also mount the router on /api.

server.use('/api', router)

Deployment

You can deploy JSON Server. For example, JSONPlaceholder is an online fake API powered by JSON Server and running on Heroku.

License

MIT - Typicode

zz0416/json-server