JSON Server (json-server)
While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.
Today we will look into a very handy tool json-server, which can give you a mock rest json server in a minute. In a regular enterprise application, you work with many teams and third party APIs. Imagine you have to call a third party restful web service that will get you JSON data to work on. You are in a tight schedule, so you can’t wait for them to finish their work and then start your own. If you wish to have a mockup Rest Web service in place to get the demo data for you, then json-server is the tool you are looking for.
JSON Server
JSON Server is a Node Module that you can use to create demo rest json webservice in less than a minute. All you need is a JSON file for sample data.
Installing JSON Server
You should have NPM installed on your machine. If not, then refer this post to install NPM. Below shows the one liner command to install json-server with output on my machine.
$ npm install -g json-server npm WARN deprecated graceful-fs@3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree. /usr/local/bin/json-server -> /usr/local/lib/node_modules/json-server/bin/index.js - bytes@2.3.0 node_modules/json-server/node_modules/raw-body/node_modules/bytes /usr/local/lib └─┬ json-server@0.8.10 ├─┬ body-parser@1.15.1 │ └── bytes@2.3.0 ├─┬ compression@1.6.1 │ └── bytes@2.2.0 ├─┬ lowdb@0.10.3 │ └─┬ steno@0.4.4 │ └── graceful-fs@4.1.4 ├─┬ update-notifier@0.5.0 │ └─┬ configstore@1.4.0 │ ├── graceful-fs@4.1.4 │ └─┬ write-file-atomic@1.1.4 │ └── graceful-fs@4.1.4 └─┬ yargs@4.7.0 ├─┬ pkg-conf@1.1.2 │ └─┬ load-json-file@1.1.0 │ └── graceful-fs@4.1.4 └─┬ read-pkg-up@1.0.1 └─┬ read-pkg@1.1.0 └─┬ path-type@1.1.0 └── graceful-fs@4.1.4 $
Checking json-server version and options
$ json-server -v 0.8.10 $ json-server -help /usr/local/bin/json-server [options] 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] $
Run JSON Server
Now it’s time to start our json-server. Below is a sample file with my employees json data.
Important point here is the name of array i.e employees. JSON server will create the REST APIs based on this. Let’s start our json-server with above file.
$ json-server --watch db.json \/ hi! Loading db.json Done Resources https://localhost:3000/employees Home https://localhost:3000 Type s + enter at any time to create a snapshot of the database Watching.
Don’t close this terminal, otherwise it will kill the json-server. Below are the sample CRUD requests and responses.
JSON Server GET — Read All Employees
$ curl -X GET -H "Content-Type: application/json" "https://localhost:3000/employees" [ < "id": 1, "name": "Pankaj", "salary": "10000" >, < "name": "David", "salary": "5000", "id": 2 >] $
Get Employee based on ID from json-server
$ curl -X GET -H "Content-Type: application/json" "https://localhost:3000/employees/1" < "id": 1, "name": "Pankaj", "salary": "10000" >$
JSON Server POST — Create an Employee
$ curl -X POST -H "Content-Type: application/json" -d '' "https://localhost:3000/employees" < "name": "Lisa", "salary": 2000, "id": 3 >$
JSON Server PUT — Update Employee Data
$ curl -XPUT -H "Content-Type: application/json" -d '' "https://localhost:3000/employees/3" < "name": "Lisa", "salary": 8000, "id": 3 >$
JSON Server DELETE — Delete an Employee
$ curl -X DELETE -H "Content-Type: application/json" "https://localhost:3000/employees/2" <> $ curl -GET -H "Content-Type: application/json" "https://localhost:3000/employees" [ < "id": 1, "name": "Pankaj", "salary": "10000" >, < "name": "Lisa", "salary": 8000, "id": 3 >] $
As you can see that with a simple JSON, json-server creates demo APIs for us to use. Note that all the PUT, POST, DELETE requests are getting saved into db.json file. Now the URIs for GET and DELETE are same, similarly it’s same for POST and PUT requests. Well, we can create our custom URIs too with a simple mapping file.
json-server custom routes
Create a file with custom routes for our json-server to use. routes.json
We can also change the json-server port and simulate like a third party API, just change the base URL when the real service is ready and you will be good to go. Now start the JSON server again as shown below.
$ json-server --port 7000 --routes routes.json --watch db.json (node:60899) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version. \/ hi! Loading db.json Loading routes.json Done Resources https://localhost:7000/employees Other routes /employees/list -> /employees /employees/get/:id -> /employees/:id /employees/create -> /employees /employees/update/:id -> /employees/:id /employees/delete/:id -> /employees/:id Home https://localhost:7000 Type s + enter at any time to create a snapshot of the database Watching.
It’s showing the custom routes defined by us.
json-server example with custom routes
Below is the example of some of the commands and their output with custom routes.
$ curl -X GET -H "Content-Type: application/json" "https://localhost:7000/employees/list" [ < "id": 1, "name": "Pankaj", "salary": "10000" >, < "name": "Lisa", "salary": 8000, "id": 3 >] $ curl -X GET -H "Content-Type: application/json" "https://localhost:7000/employees/get/1" < "id": 1, "name": "Pankaj", "salary": "10000" >$ curl -X POST -H "Content-Type: application/json" -d '' "https://localhost:7000/employees/create" < "name": "Lisa", "salary": 2000, "id": 4 >$ curl -XPUT -H "Content-Type: application/json" -d '' "https://localhost:7000/emloyees/update/4" < "name": "Lisa", "salary": 8000, "id": 4 >$ curl -XDELETE -H "Content-Type: application/json" "https://localhost:7000/employees/delete/4" <> $ curl -GET -H "Content-Type: application/json" "https://localhost:7000/employees/list" [ < "id": 1, "name": "Pankaj", "salary": "10000" >, < "name": "Lisa", "salary": 8000, "id": 3 >] $
JSON server provides some other useful options such as sorting, searching and pagination. That’s all for json-server, it’s my go to tool whenever I need to create demo Rest JSON APIs. Reference: json-server GitHub
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases. Learn more about us
JSON-server. Тестируем front-end без back-end
В последние время по вечерам частенько играюсь с JavaScript и фреймворком angular.js. Сидишь себе, что-нибудь изобретаешь, и постоянно упираешься в одну и ту же проблему – чтобы нормально потестить новоиспеченное приложение необходимо принимать какие-нибудь данные с сервера.
Например, хочется мне сделать телефонный справочник. Не проблема, накидываю структуру, пишу JS и все бы хорошо, но ведь в реале телефоны должны храниться на сервере. Пока сервера нет – создаю заглушки, но это удобно далеко не всегда. Как было бы хорошо иметь какую-нибудь тулзу, которой можно скормить файл в json формате и получить готовое API для проведения тестов.
Json-сервер. Строим велосипед
Сначала мне было лень что-то искать, и я решил проблему по-нашему, по-программерски. Написал небольшой скриптик, который отдавал подготовленный набор данных в формате json. Все дешево и сердито. Вроде данные возвращает, но нет возможности генерировать нормальную структуру пути (например, users/1/comments). Вдоволь поигравшись со своим велосипедом и получив ломку в виде «мне не хватает гибкости», мне пришлось выбросить свое творение и отправиться на GiHub в поиске чего-то более продвинутого.
Json-server – решение всех моих проблем
Поиск по ключевым словам “json server” сразу вывел меня на проект «json-server». На момент поиска проект насчитывал больше 7000 звездочек, а это один из признаков качества и популярности решения. Бегло прочитав описание, понял, что это то что мне и нужно, даже больше.
JSON-server позволяет решить сразу несколько проблем:
Скармливаем подготовленный файл json-server и сразу получаем поднятый web-сервер с готовым API: http://localhost:3000/posts/1. Поскольку определенный функционал повторяется от проекта к проекту, я сразу себе сделал несколько заготовок и теперь постоянно их использую.
Простой пример динамического формирования данных:
module.exports = function() < var data = < users: [] >for (var i = 0; i < 1000; i++) < data.users.push( < id: i, name: 'userok' + i, age: i >) > return data; >
Пример использования json-server
Я понимаю, что все примеры можно посмотреть в документации, но раз уж взялся за описание, то приведу сразу небольшой рабочий кейс.
npm install -g json-server
mkdir test-project touch data.json
Содержимое файла data.json:
< "posts": [ < "id": 1, "title": "json-server", "author": "typicode" >, < "id": 2, "title": "test!", "author": "Spider_NET" >, < "id": 3, "title": "test!", "author": "lord=of-fear" >], "comments": [ < "id": 1, "body": "some comment", "postId": 1 >] >
json-server data.json –w
Берем на заметку
Посмотреть полную документацию и внести при желании свою лепту в развитие проекта всегда можно через репозиторий на git hub.
Еще записи по теме
- Игры детства в браузере. Duck Hunt на JavaScript
- Пишем программу для подсчета трафика на Delphi
- Как получить ссылку на корзину в diafan.cms
- Генераторы меню для сайта или делаем CSS меню без кода
- Пример создания HTTP-сервиса в 1С:Предприятие 8.3. Часть 2. Кейсы
- Программируем torrent-клиент на Delphi
- Revel – MVC фреймворк для Go
Загрузка сервера JSON для Windows
Это приложение для Windows с именем JSON Server, последний выпуск которого можно загрузить как v0.17.4.zip. Его можно запустить онлайн на бесплатном хостинг-провайдере OnWorks для рабочих станций.
Загрузите и запустите онлайн это приложение под названием JSON Server with OnWorks бесплатно.
Следуйте этим инструкциям, чтобы запустить это приложение:
— 1. Загрузил это приложение на свой компьютер.
— 2. Введите в нашем файловом менеджере https://www.onworks.net/myfiles.php?username=XXXXX с желаемым именем пользователя.
— 3. Загрузите это приложение в такой файловый менеджер.
— 4. Запустите любой онлайн-эмулятор OS OnWorks с этого сайта, но лучше онлайн-эмулятор Windows.
— 5. В только что запущенной ОС Windows OnWorks перейдите в наш файловый менеджер https://www.onworks.net/myfiles.php?username=XXXXX с желаемым именем пользователя.
— 6. Скачайте приложение и установите его.
— 7. Загрузите Wine из репозиториев программного обеспечения вашего дистрибутива Linux. После установки вы можете дважды щелкнуть приложение, чтобы запустить его с помощью Wine. Вы также можете попробовать PlayOnLinux, необычный интерфейс поверх Wine, который поможет вам установить популярные программы и игры для Windows.
Wine — это способ запустить программное обеспечение Windows в Linux, но без Windows. Wine — это уровень совместимости с Windows с открытым исходным кодом, который может запускать программы Windows непосредственно на любом рабочем столе Linux. По сути, Wine пытается заново реализовать Windows с нуля, чтобы можно было запускать все эти Windows-приложения, фактически не нуждаясь в Windows.
JSON Server
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
Paginate
Use _page and optionally _limit to paginate returned data.
In the Link header you’ll get first , prev , next and last links.
GET /posts?_page=7 GET /posts?_page=7&_limit=20
10 items are returned by default
Sort
Add _sort and _order (ascending order by default)
GET /posts?_sort=views&_order=asc GET /posts/1/comments?_sort=votes&_order=asc
For multiple fields, use the following format:
GET /posts?_sort=user,views&_order=desc,asc
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
Works exactly as Array.slice (i.e. _start is inclusive and _end exclusive)
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 (RegExp supported)
GET /posts?title_like=server
Full-text search
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 custom routes for more)
GET /posts/1/comments POST /posts/1/comments
Database
GET /db
Homepage
Returns default index file or serves ./public directory
Extras
Static file server
You can use JSON Server to serve your HTML, JS and CSS, simply create a ./public directory or use —static to set a different static files directory.
mkdir public echo 'hello world' > public/index.html json-server db.json
json-server db.json --static ./some-other-dir
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 = () => const data = users: [] > // Create 1000 users for (let 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, Chance or JSON Schema Faker.
HTTPS
There are many ways to set up SSL in development. One simple way is to use hotel.
Add custom routes
Create a routes.json file. Pay attention to start every route with / .
< "/api/*": "/$1", "/:resource/:id/show": "/:resource/:id", "/posts/:category": "/posts?category=:category", "/articles?id=:id": "/posts/:id" >
Start JSON Server with —routes option.
json-server db.json --routes routes.json
Now you can access resources using additional routes.
/api/posts # → /posts /api/posts/1 # → /posts/1 /posts/1/show # → /posts/1 /posts/javascript # → /posts?category=javascript /articles?id=1 # → /posts/1
Add middlewares
You can add your middlewares from the CLI using —middlewares option:
// hello.js module.exports = (req, res, next) => res.header('X-Hello', 'World') next() >
json-server db.json --middlewares ./hello.js json-server db.json --middlewares ./first.js ./second.js
CLI usage
json-server [options] Options: --config, -c Path to config file [default: "json-server.json"] --port, -p Set port [default: 3000] --host, -H Set host [default: "localhost"] --watch, -w Watch file(s) [boolean] --routes, -r Path to routes file --middlewares, -m Paths to middleware files [array] --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"] --foreignKeySuffix, --fks Set foreign key suffix, (e.g. _id as in post_id) [default: "Id"] --quiet, -q Suppress log messages from output [boolean] --help, -h Show help [boolean] --version, -v Show version number [boolean] Examples: json-server db.json json-server file.js json-server http://example.com/db.json https://github.com/typicode/json-server
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
$ npm install json-server --save-dev
// server.js 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') >)
$ node server.js
The path you provide to the jsonServer.router function is relative to the directory from where you launch your node process. If you run the above code from another directory, it’s better to use an absolute path:
const path = require('path') const router = jsonServer.router(path.join(__dirname, 'db.json'))
For an in-memory database, simply pass an object to jsonServer.router() .
To add custom options (eg. foreginKeySuffix ) pass in an object as the second argument to jsonServer.router(‘db.json’, < foreginKeySuffix: '_id' >) .
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.
const jsonServer = require('json-server') const server = jsonServer.create() const router = jsonServer.router('db.json') const 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', (req, res) => res.jsonp(req.query) >) // To handle POST, PUT and PATCH you need to use a body-parser // You can use the one used by JSON Server server.use(jsonServer.bodyParser) server.use((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, () => console.log('JSON Server is running') >)
Access control example
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 (isAuthorized(req)) // add your authorization logic here next() // continue to JSON Server router > else res.sendStatus(401) > >) server.use(router) server.listen(3000, () => 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 = (req, res) => res.jsonp( body: res.locals.data >) >
You can set your own status code for the response:
// In this example we simulate a server side error response router.render = (req, res) => res.status(500).jsonp( error: "error message here" >) >
Rewriter example
To add rewrite rules, use jsonServer.rewriter() :
// Add this before server.use(router) server.use(jsonServer.rewriter( '/api/*': '/$1', '/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)
API
jsonServer.create()
Returns an Express server.
jsonServer.defaults([options])
Returns middlewares used by JSON Server.
- options
- static path to static files
- logger enable logger middleware (default: true)
- bodyParser enable body-parser middleware (default: true)
- noCors disable CORS (default: false)
- readOnly accept only GET requests (default: false)
jsonServer.router([path|object], [options])
Returns JSON Server router.
- options (see CLI usage)
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
- Node Module Of The Week — json-server
- ng-admin: Add an AngularJS admin GUI to any RESTful API
- Fast prototyping using Restangular and Json-server
- Create a Mock REST API in Seconds for Prototyping your Frontend
- No API? No Problem! Rapid Development via Mock APIs
- Zero Code REST With json-server
Third-party tools
- Grunt JSON Server
- Docker JSON Server
- JSON Server GUI
- JSON file generator
- JSON Server extension