Using json-server as a Mock Server
Published: 2021-06-26 15:36:41

## Overview
We're going to look at using json-server as a mock server to practice interacting with a server.  We are also going to be using `fetch` to do both GET and POST requests.  Before we get started, make sure you have an `index.html` and an `index.js` file ready to display our data. Let's get started!

## Install and Set Up
To install json-server run `npm install -g json-server` in the terminal.  Then create a file called db.json you can type `touch db.json` in the terminal.

### Mock Data

Now we're going to put some mock data in db.json to make sure everything is working. JSON files resemble JavaScript objects and arrays, so it should look familiar.
```
{
  "blogs": [
    {
      "title": "title example",
      "content": "content example",
      "author": "Your favorite author",
      "id": 1
    },
    {
      "title": "another title example",
      "content": "more content example",
      "author": "Your friend's favorite author",
      "id": 2
    },
    {
      "title": "title example number 3",
      "content": "even better content",
      "author": "me",
      "id": 3
    }
  ]
}
```

###Starting the Server
After we have some data ready, we're going to start the server by running `json-server --watch db.json` in the terminal.

You should see something like this:

```
user@user:~/Development/practice-project$ json-server --watch db.json

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/blogs

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...
```

If you ctr + click on the link under resources [http://localhost:3000] Your db.json file should open up in your browser.

It'll look something like this:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3a0xn9ytf1byth3jfxd.png)
 
 

Excellent now we have a server running and ready to go!


##Fetch, How to GET Data from Your Server

To access our server in JavaScript we are going to be using fetch.  It's fairly simple. We call fetch on our server's URL as you see below, that returns a promise, which we call `.then` which returns a HTTP `response`, now to change the HTTP response from the server to something we can use we call another `.then` and that gives us something we are familiar with a JavaScript object. Once we have the `data`, we can then do whatever we want with it, most likely display it, but for now, we're going to check to make sure it's working and log it to the console.

Make sure your `index.js` is linked to your index.html like this:
```
<body>
  <script src="index.js"></script>
</body>
```
Put this code in your `index.js` file and open index.html in your browser
```
fetch("http://localhost:3000/blogs")
.then(response=>response.json())
.then(data=> console.log(data))
```
Then you should see something like the image below in the console in the developer tools:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2jvwv9csqnp7bzl8cme.png) 

It works! Now what you can do is write a function such as `displayBlog()` and call the function on data like this:

```
fetch("http://localhost:3000/blogs")
.then(response=>response.json())
.then(data=> displayBlog(data))
```

## How to POST data to json-server

So we've made a GET request to the server and we are able to display the data from our server, now let's learn how to send data to the server.  We're going to use fetch again, but there's a little more to it this time.  We also need to include configuration for our fetch. 

### Fetch Configuration
There are a lot of different options for the fetch configuration, but for our purpose we're only going to need three: `method`, `headers`, and `body`.

The `method` is what type of request we're going to make, which will be a "POST". `headers` are telling fetch what type of data we'll be interacting with, and for us it'll be "Content-Type":"application/json". And lastly `body` is the data that we're going to be posting to the server.

```
const newBlog = {title:"Learning JavaScirpt", content:"I learned about objects today!", author:"Java"}

const fetchPostConfig = {
  method:"POST",
  headers:{
    "Content-Type": "application/json",
    "Accept": "appication/json"
  },
  body:JSON.stringify(newBlog)
}

fetch("http://localhost:3000/blogs", fetchPostConfig)
.then(response => response.json())
.then(data => console.log(data))
```

You can of course also write the configuration directly into the fetch instead of storing in a variable. After we send a POST request to our server it will send a response back which we handle the same as we did our GET request.  We should receive exactly what we sent:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mrkpgqugmh5q8ey7jl9.png)
 
And it added the `id` for us! Perfect!  And that's it!

I hope you enjoyed this post.  Now get out there and learn how to interact with a server!


`