API not ready? No worries, Continue development with MOCK APIs

As we know front-end development is changing day by day, and every day is a learning a new thing and today's world everyone is busy and fast. As a developer we always have a dependency to some other person which make development halt at some point. Which everyone faces a problem while in development.

Due to this I also face this issue while developing my front end functionality and product owner were waiting for everyday changes but due to backend team were taking time to develop APIs, my works always get delay to deliver.

Why a Mock API?

Four reasons you need Mock API for better development:

  • No API yet: Straight forward, this means your API service is not ready by backend teams, but you need to design your web service as per APIs. Mocking allows you to rapidly prototype different potential response shapes to see how they work with your app.
  • Slow or unreliable API : We all know when the payload increase app service become very slow to give response payload, due to this front end development become slow or even halt or sometimes the existing web services go down, at this time a mock API allows you to keep working.
  • 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.
  • 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.

So, without any wait Let’s Create a Mock API

But how to do this, OK, no worries, the simplest way I found to get it done using NodeJS.

Here is my three-step process to create a realistic mock API:

  • Create the schema
  • Get random data
  • Serve data

Step 1- Create the schema

First, create a schema with for mock API with 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 data types. For sample, check this REPL Faker this make easy to learn for you.

JSON schema Faker

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.

For Faker.js Example

var randomName = faker.name.findName(); 
console.log(randomName);

JSON Schema Faker realistic JSON, you can generate data according to above Faker.js methods and save file to any name like below code snippet.

var schema = {
"type": "object",
"properties": {
"name": {
"type": "string",
"faker": "name.findName"
},
"email": {
"type": "string",
"faker": "internet.email"
}
},
"required": [
"name",
"email"
]
}
module.exports = schema;

Step 2 - Get 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. But before NPM script we create a JavaScript file which will run and save the data file in folder structure.

I’m calling JSON 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.

After file creation just add a script in package.json and then see the magic

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

Step 3 - Serve 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.

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.

Script to help you serve the static data.

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

With this script, your server will run to port 3001. The mock API operates just like a real API, but without having to make an actual HTTP call or stand up a real database. Sample API endpoint

http://localhost:3001/users

It's a little long process but for only one time, but you will get a proper define JSON according to your requirement and develop Front-end according to your requirement.

Whereas you can use placeholder website to get JSON, but it is dependent on their JSON field. Placeholder will not return JSON according to your UI design.

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

Happy coding, and thanks for reading this blog.

Read code • Learn Code • Write code • Relax • Write code, www.linkedin.com/in/ankit1srivastava

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store