DEV Community

Avinash Vagh
Avinash Vagh

Posted on

JSON server getting started

Hey everyone👋
Today we gonna learn about JSON server & how to getting started with it.

Create a mock-server folder on desktop, open it on VS-code.

go to the official git-repo of JSON-Server

now, open terminal in vs-code.
1/ run command npm init
it will take a while to process, click on yes. & it will create package.json file in your folder

2/ run command npm install --save json-server
it will take a while to process & it will add node_modulesfolder & package-lock.json file.

note⚠️: In case if you want to push folder into Github then run command below

  • git init
  • touch .gitignore and then open .gitignore file which just created in write node_modules in it. so, it will ignore that folder to push into Github.

3/ run command in terminal touch database.json
copy-paste code from offical git-repo of JSON server

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}
Enter fullscreen mode Exit fullscreen mode

4/ go to package.json file
In script, add "start": "json-server --watch database.json"

5/ run command npm run start
it will load database.json.
copy-paste localhost:3000 url from there run it your chrome browser.

6/ go to postman
whatever the request you want to make, go to postman. select get, select body, select row, select json
so, copy code from browser and paste it here and then hit on send. you'll get the response in your package.json file. data will be added there in it.

you can make patch request in the same way.

useful resources

For Node, npm installation:

https://github.com/jasongin/nvs

https://github.com/nvm-sh/nvm#intro

to generate mock data :

https://www.mockaroo.com/

Json server :

https://github.com/typicode/json-server#getting-started

Github

json server

Setup a server for all kinds of requests easily

mkdir api-mocker

cd api-mocker


npm init ( press enter for everything )
// the above command will create a package.json file
// you are creating a new project here
// npm means node package manager

npm install json-server
// this will add json-server as a package into your project

// open package.json file and the following to the scripts key
// db.json is the file that you need to add your json for
"start" : "json-server --watch db.json"

npm run start 
// run this for starting the server

// alternatively
json-server --watch db.json
Enter fullscreen mode Exit fullscreen mode
GET    /posts
GET    /posts/1
POST   /posts
PUT    /posts/1
PATCH  /posts/1
DELETE /posts/1

GET    /profile
POST   /profile
PUT    /profile
PATCH  /profile
Enter fullscreen mode Exit fullscreen mode

Filter

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

Pagination

GET /posts?_page=7
GET /posts?_page=7&_limit=20
Enter fullscreen mode Exit fullscreen mode

Sort

GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Full text search

Add q

GET /posts?q=internet
Enter fullscreen mode Exit fullscreen mode

Alternative port

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

json-server --watch db.json --port 3004
Enter fullscreen mode Exit fullscreen mode

modify this in your scripts in package.json

JSON SERVER HEROKU DEPLOYMENT

https://github.com/nbkhope/fake-restful-api
if you want to change the port, goto index.js and change from 3000 to some other number of your choice

so, that's try & explore by yourself rest of things. It will be exciting. That's all for now, see you in the next article.🤟
if you found this article useful, you can give me a follow for updates 💯 and can connect with me on LinkedIn & Twitter.✅
Thanks for checking out :))

Discussion (0)