No API? No Problem! Rapid Development via Mock APIs

Create a realistic mock API with Node.js in three quick steps

Cory House
Nov 16, 2016 · 5 min read
A mock API seems real on the surface, and that’s what matters.

In this era of service-oriented development, you need to get JSON to and from the server to make your front-end come alive. So an API is a necessity.

But, great news: You don’t need to create real web services to get started. Instead, just set up a mock API.

Note: I’m saying API for brevity. Related terms include Web API, Web service, JSON API, and RESTful API.

Why a Mock API?

  1. No API yet — Maybe you haven’t created an API yet. A mock API allows you to begin development without waiting for the API team to build the services you need. And if you haven’t decided how to design your web services, mocking allows you to rapidly prototype different potential response shapes to see how they work with your app.
  2. Slow or unreliable API — Are the existing APIs in your dev or QA environment slow, unreliable, or expensive to call? If so, a mock API offers consistent, instantaneous responses for rapid feedback development. And if your existing web services go down, a mock API allows you to keep working.
  3. Eliminate inter-team dependencies — Is a separate team creating your app’s web services? A mock API means you can start coding immediately and switch to the real web services when they’re ready. Just agree on the API’s proposed design and mock it accordingly.
  4. Work offline — Finally, maybe you need to work on a plane, on the road, or in other places where connectivity is poor. Mocking allows you to work offline because your calls remain local.

Let’s Create a Mock API

  1. Declare the schema
  2. Generate random data
  3. Serve random data

Let’s walk through the three steps.

Step 1 — Declare the Schema

JSON Schema faker supports generating realistic random data via three open source libraries. Faker.js, chance.js, and randexp.js. Faker and chance are very similar. Both offer a wide variety of functions for generating random data including realistic names, address, phone numbers, emails, and much more. Randexp creates random data based on regular expressions. JSON Schema faker allows us to use faker, chance, and randexp within our schema definitions. This way, you can declare exactly how each property in your mock API should be generated.

Here’s an example schema for generating realistic, randomized user data. I save this file as mockDataSchema.js:

This schema uses faker.js to generate an array of users with realistic names and emails.

Step 2 — Generate Random Data

I create an npm script in package.json that calls a separate Node script:

"generate-mock-data": "node buildScripts/generateMockData"

The script above is calling a Node script called generateMockData. Here’s what’s inside generateMockData.js:

I’m calling json-schema-faker on line 11, and passing it the mock data schema we set up in step 1. This ultimately writes JSON to db.json, as specified on line 13 above.

Step 3 — Serve Random Data

"start-mockapi": "json-server --watch src/api/db.json --port 3001"

This starts json-server and serves up the data in db.json on port 3001. Each top-level object is exposed on an HTTP endpoint.

Here’s the awesome part: JSON Server simulates a real database by saving the changes to the db.json file we created in step 2.

The beauty of JSON server: it handles create, reads, updates, and deletes, so it feels totally real.

The mock API operates just like a real API, but without having to make an actual HTTP call or stand up a real database! Slick.

This means we can do development without creating a real API first. We just need to agree on the calls and data shape, then the UI team can move ahead without having to wait on the service team to create the associated services.

In summary, to make all this come together, you need 3 lines in package.json:

"generate-mock-data": "node buildScripts/generateMockData",
"prestart-mockapi": "npm run generate-mock-data",
"start-mockapi": "json-server --watch src/api/db.json --port 3001"

The start-mockapi script runs json-server and tells it to watch the db.json we generated in step 2. Before the mock API is started, mock data is generated. The prestart-mockapi script is called before start-mockapi because it’s prefixed by “pre”. This is npm script convention. With this setup, every time we start the app, new realistic mock data is generated!

Alright, we’re ready to roll.

Type this:

npm run start-mockapi

And load this:

http://localhost:3001/users.

You should see a list of users returned as JSON. Success!

To see how this all comes together, here’s a working demo of this setup on GitHub.

Also, my new “Building a JavaScript Development Environment” course builds this and much more from scratch. (free trial)

Finally, consider mocky.io or fakejson.com for simple alternatives that require no setup.

The Tip of An Iceberg…

Overwhelmed yet?

I walk through all of these decisions and build a rich JavaScript development environment from scratch here.

Are you generating mock APIs today? Have an alternative set up to share? I’d love to hear about your experiences in the comments.


Cory House is the author of many courses on Pluralsight, and principal consultant at reactjsconsulting.com. He is a Software Architect at VinSolutions, Microsoft MVP, and trains software developers internationally on software practices like front-end development and clean coding.

Cory House

Written by

Pluralsight Author, Principal at reactjsconsulting.com, Software Architect, Microsoft MVP, Speaker, Clean Coder, Aspiring Outlier.