Using JSON Server to Simulate a Web Service API

Modern web applications are usually divided into two parts: a front end, and a back end.

The front end is the web site that end users visit and use by loading its pages into their browsers. The front end uses AJAX requests to communicate with the back end. The server on the back end handles these requests and usually runs CRUD operations against some type of database.

Building the front and back end of a website is a lot of work, and it's not uncommon for each to have their own dedicated team of developers.

As a front end developer who is starting a new project, you may not have a back end to work with (what should be built first, the front end or the back end?). There is an NPM package called JSON server that can be used to quickly simulate a back end API that can do basic CRUD operations on JSON databases (.json files). JSON server is a great tool for starting projects, and prototyping, and learning!

To install JSON server, run this command in the terminal:

npm install -g json-server

Remember that the -g flag means that we are installing this package 'globally' so that we can use it from anywhere (not just a particular project).

All you have to do to get started with JSON server is run it from the command line, and specify a .json file to 'watch'.

Here's JSON data that we can use, create a file named user-data.json, and put this code into it:

{
  "users": [
    {
      "id": 1,
      "first_name": "Robert",
      "last_name": "Schwartz",
      "email": "rob2315@gmail.com"
    },
    {
      "id": 2,
      "first_name": "Lucy",
      "last_name": "Ballmer",
      "email": "lucyb5668@gmail.com"
    },
    {
      "id": 3,
      "first_name": "Anna",
      "last_name": "Smith",
      "email": "annasmith22243@gmail.com"
    },
    {
      "id": 4,
      "first_name": "Robert",
      "last_name": "Brown",
      "email": "bobbrown431222@yahoo.com"
    },
    {
      "id": 5,
      "first_name": "Roger",
      "last_name": "Bacon",
      "email": "rogerbacon12352@yahoo.com"
    }
  ]
}

Notice that the file represents an object that has a users property in it. The value of this property is an array of objects that each represent a user (such as the user of a website). The file is a JSON database that has a collection of 'user' objects. A collection in a JSON database is analogous to a table in a relational database. Each 'user' object is equivalent to a row in a table. If we wanted to add another collection, we could simply add another property to the base object and set it to an array of objects.

Now let's start the JSON server and point it to the user-data.json. Make sure you run this command from the same folder that contains user-data.json:

npx json-server -w user-data.json -p 8080

This will launch a web server on your local development machine that can act as a back end API (web service).

• The -w option allows you to specify a .json file to 'watch'. This is the data file that the JSON server will manage, which in our case is user-data.json.
• The -p option allows you to specify the port that the JSON server will run on, and we set this to 8080. If you don't specify a port, then the server will run on port 3000 by default.

Now open your browser and make some 'API calls' by trying out each of these URLs:

• http://localhost:8080/users
• http://localhost:8080/users/1
• http://localhost:8080/users/?first_name=Robert
• http://localhost:8080/users/?first_name=Robert&last_name=Brown
• http://localhost:8080/users/?q=gmail
• http://localhost:8080/users?_sort=last_name&_order=asc
• http://localhost:8080/users?id_gte=4
• http://localhost:8080/users?id_gte=3&id_lte=5

Take a good look at the response you get in the browser, and compare it with the data in user_data.json. And notice how the JSON server can read the query string (aka url parameters) to allow you to filter, sort, and search the data.

Can you figure out how the query string in each URL is affecting the data that is returned in the response? Here's the documentation in case you want to look up and of the url parameters.

Each one of the URLs that you entered made an HTTP request to the JSON server. An API call occurs when you send an HTTP request to a web service (API).

A front end web site uses AJAX to make these HTTP requests, which is what we'll be doing next!

Before we end this activity, you should know how to stop the JSON server. Just go to the terminal that you used to start it, and press Ctrl + c.

NOTES:

• If you want to simulate a slow connection, use the -d option (the delay is in ms): npx json-server -w user-data.json -d 3000
• Here's the tutorial I used to learn about JSON Server