by Cory House
No API? No Problem! Rapid Development via Mock APIs
Create a realistic mock API with Node.js in three quick steps
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?
Here are four reasons to use a mock API:
- 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.
- 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.
- 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.
- 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
The simplest way I’ve found to get this done uses Node.js. Here is my three step process to create a realistic mock API:
- Declare the schema
- Generate random data
- Serve random data
Let’s walk through the three steps.
Step 1 — Declare the Schema
First, let’s declare the schema for our mock API using JSON Schema Faker. This will allow us to declare what our fake API should look like. We’ll declare the objects and properties it will expose including the datatypes. There’s a handy online REPL that makes it easy to learn.
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
Once we’ve defined our schema, it’s time to generate random data. To automate build tasks, I prefer to use npm scripts instead of Gulp and Grunt. Here’s why.
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
Now that we have written randomized, realistic data to db.json, let’s serve it up! JSON server creates a realistic API using the static JSON file we created. So let’s point JSON server at the mock dataset that we dynamically generated in step 2.
"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.
npm run start-mockapi
And load this:
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.
The Tip of An Iceberg…
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.