JSON server getting started
Tags: webdev, database, tutorial, react
Published: 2022-07-03 11:06:39

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](https://aistartupshq.beehiiv.com/subscribe) Newsletter, delivered twice a week. Also, check out our [Remote US Jobs](https://remoteusjobs.co/) 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](https://github.com/typicode/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_modules`folder & `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](https://github.com/typicode/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

### 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
```

```
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 💯 

<hr>

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

1. 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](https://avinashvagh.gumroad.com/l/Get_Remote_Job_as_Fresher_Developer)”: 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.

2. 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](https://avinashvagh.gumroad.com/l/300-Startup-Jobs-India-Fresher-Developers)”: 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.

3. 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](https://saas-blueprint.lemonsqueezy.com/checkout?cart=18e69d40-cd0f-4f9a-b074-78e40c45c46d)”: 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.

<hr>

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

<hr>

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

**Connect:** [Twitter](https://twitter.com/avinashvagh) | [LinkedIn](https://linkedin.com/in/avinashvagh) | [YouTube](https://youtube.com/c/AvinashVagh) | [Newsletter](https://avinashvagh.beehiiv.com/subscribe) | [Buy my Digital Products](https://avinashvagh.gumroad.com/)