Using json-server as a Mock Server

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:

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:

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:

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!

Using json-server as a Mock Server

Related Posts