I was prototyping the frontend of an application I'm currently working on and found myself needing to make some AJAX calls to test it. I didn't want to go through the process of setting up a backend and creating routes for the API, as I wasn't ready to fully commit to the prototype, just yet. Plus, it disrupts my workflow as I prefer to focus on a single part of the stack at a time.

Then came along json-server.

JSON Server

In short, JSON Server is a Node module, running an Express server, that let's you specify a JSON file to act as a data source for your mock REST API.

Say we were creating an application to manage customers with simple CRUD functionality:

  • get customer records
  • add a customer
  • remove a customer
  • update a customer's information

Let's go through the steps of implementing a fake REST API for our customer management app to show you just how quickly you can have this set up. Install json-server globally using NPM:

npm install -g json-server

Create an empty directory and cd into it:

mkdir customer-manager && cd customer-manager

We need to create a JSON file in which we'll store some customer data for JSON Server to use:

touch customers.json

Let's open up customers.json and add a customer:

{
  "customers": [
    { "id": 1, "first_name": "John", "last_name": "Smith",  "phone": "219-839-2819" }
  ]
}

All you have to do now is start up JSON Server, pointing it to the customers.json file we just created, like so:

json-server customers.json

Head over to localhost:3000 and you'll see the default JSON Server page listing the routes in customers.json, which in our case is just customers:

JSON Server Page

The great part is that you can make GET, POST, PUT, PATCH, and DELETE requests to the server for testing your prototype, straight out-of-the-box. You can download Postman, use the Fetch API from your browser console, use good old curl, or whichever method/app you prefer, to create and send HTTP requests.

Say we want to add a customer to our database. We can make a POST call to http://localhost:3000/customers with the customer's information. First, you need to make sure you set a Content-Type: application/json header. In Postman you can do it like so:

Postman JSON Content-Type Header

Now you can add the customer with a POST request:

Postman POST Call

If you go to http://localhost:3000/customers in your browser, you should see the new customer added:

[
  {
    "id": 1,
    "first_name": "John",
    "last_name": "Smith",
    "phone": "219-839-2819"
  },
  {
    "id": 2,
    "first_name": "James",
    "last_name": "Bond",
    "phone": "007-007-7777"
  }
]

To get the data of the customer with an id = 2, that we just added, you can make a GET request to http://localhost:3000/customers/2 and you should see:

{
  "id": 2,
  "first_name": "James",
  "last_name": "Bond",
  "phone": "007-007-7777"
}

To change James Bond's name to Sam Smith, you can make a PUT request to http://localhost:3000/customers/2:

PUT Request JSON Server and Postman

If you visit http://localhost:3000/customers/, you should see:

[
  {
    "id": 1,
    "first_name": "John",
    "last_name": "Smith",
    "phone": "219-839-2819"
  },
  {
    "first_name": "Sam",
    "last_name": "Smith",
    "id": 2
  }
]

Similarly, you can delete a customer with an id = 1 by making a DELETE request to: http://localhost:3000/customers/1.

The changes you make are automatically saved to customers.json thanks to lowdb running under-the-hood.

There is a lot more you can do with JSON Server like filtering, sorting, full-text search, or even serve static files, so be sure to check out the official GitHub Repo if you'd like to explore some of the fancier features.

Generating Fake Data

So far we've entered data manually, which works just fine for most use cases. However, at times, you may need to populate the database with a larger and somewhat realistic data set. Faker.js is just the tool for that. It allows you to generate large amounts of fake data and integrates quite well with JSON Server.

You can install Faker.js with NPM:

npm install faker

Now let's create a simple script using Faker to generate 50 customers for our customer management app. Create a JavaScript file called customers.js which will export a function to generate those 50 customers:

// customers.js

var faker = require('faker')

function generateCustomers () {
  var customers = []

  for (var id = 0; id < 50; id++) {
    var firstName = faker.name.firstName()
    var lastName = faker.name.firstName()
    var phoneNumber = faker.phone.phoneNumberFormat()

    customers.push({
      "id": id,
      "first_name": firstName,
      "last_name": lastName,
      "phone": phoneNumber
    })
  }

  return { "customers": customers }
}

// json-server requires that you export
// a function which generates the data set
module.exports = generateCustomers

We can now tell JSON Server to use this generator as it's data source:

json-server customers.js

and if you head over to http://localhost:3000/customers you should see a JSON object of 50 fake customers with realistic data for you to use in your prototype.

Faker can generate a huge variety of fake data, aside from simple names and numbers, so skim through it's API to see what data suits your applications' needs.

As you saw, setting up a fully-functioning mock REST API takes just a few seconds thanks to the awesome JSON Server module and a handy data generator, Faker.js. Go ahead and give this setup a shot when prototyping your next frontend!