JSON server getting started

#webdev #database #tutorial #react

Hey everyone👋
Today we gonna learn about JSON server & how to getting started with it. Before we move forward, must stay updated on AI advancements and industry trends with our AI Startups Newsletter, delivered twice a week. Also, check out our Remote US Jobs Blog to discover tips for remote work and find job opportunities across the US. 🚀📰

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" }
}

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

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

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

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

Filter

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

Pagination

GET /posts?_page=7
GET /posts?_page=7&_limit=20

Sort

GET /posts?_sort=views&_order=asc
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 (RegExp supported)

GET /posts?title_like=server

Full text search

Add q

GET /posts?q=internet

Alternative port

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

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

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 💯

Whenever you’re ready, there are 3 ways I can help you:

If you’re a fresher looking to kickstart your career in a remote job, I’d recommend starting with my affordable eBook:

→ “Starting Your Career as a Remote Developer: Tips and Strategies for Freshers”: Unlock the secrets to landing a high-paying remote job, with earnings between $60k-$80k USD. This comprehensive eBook shares strategies that have helped numerous freshers break into the remote job market with confidence. 800+ people already grabbed it. Get your copy here.

For Indian job seekers, I offer a powerful Notion database product:

→ “The Ultimate Indian Startup Job Database | Top 500+ Startup Companies in India for Fresher Developers to Apply for Job”: Access a curated list of 500+ startup companies in India that are hiring, and use the Notion database to track the number of companies you apply to, the positions you apply for, and the status of your applications. Get started here.

If you’re looking to launch a successful startup, don’t miss my Notion product packed with innovative ideas:

→ “SAAS Idea Vault: 21 Comprehensive Startup Blueprints”: Discover 21 game-changing startup blueprints in our Notion vault, complete with MVP features, tech stack recommendations, and folder and file structures for frontend and backend. Kickstart your entrepreneurial journey here.

Subscribe to my YouTube channel, where I share remote job-hunting tips and opportunities → https://youtube.com/@AvinashVagh

Get Globally Full Remote Job Hiring Company’s details in your inbox | Remote Profile Newsletter → https://remoteprofile.beehiiv.com/subscribe

If you found this article informative, make sure to leave your comment.

Connect: Twitter | LinkedIn | YouTube | Newsletter | Buy my Digital Products