Go to the top

Setup a mock JSON API server without coding

Ronit / Blog, Technical / 0 Comments
CaseyHorner's Nature Photograph

Setup the mock API server without coding.

"Hey!!! Wait, Ronit, Are you serious? API Server that too without coding?"

"Yes! I am serious guys. Let me show you how it's possible."

Many times while development we need APIs to have a conversation between the client and the server and the work of coding is being distributed among two teams(back-end and front-end) many a time.

Let's consider ourself from the front-end team and we need to write code to integrate the APIs where we have to write code to send/receive data from the server.

But suppose the backend team is not ready and can't provide the working code for now to start the integration. In such scenarios, we (front-end team) feel ourselves as stuck.

"Yes! Ronit I get stuck in such scenarios many a time."

So to overcome such scenarios we generally create the static JSON stored in variable which is expected to receive in the response from the API and then we code our logic further like given below:-

async function getUsers() {
const users = [{
      id: 1,
      name: "Ronit"
    },
    {
      id: 2,
      name: "Ashi"
    },
  ];
 return users;
}

getUsers().then(users => {
  console.log(users);
});

To further emulate it as a real API call we make this call asynchronous using setTimout. But the implementation still remains incomplete because the code implementation of actual API calling using fetch, axios, $.ajax, etc remains pending which may include setting request headers and other things. Until and unless we receive an API from back-end team we can't write that code.

"Now the story takes twist :p"

To quickly create a mock API server without any coding we use an awesome tool - "Beeceptor". Beeceptor provides a platform where we can create custom endpoints with custom HTTP URLs and different HTTP Methods.

The best part with Beeceptor is that' s it's free and very easy to start with.

Let's start creating custom APIs with Beeceptor, step by step:-

Step 1

Create an account on Beeceptor

Beeceptor-Step1

Step 2

Set the base URL for your project by entering a unique value in the endpoint text box

beeceptor-step2

Step 3

Click on the "Mocking Rules" to create a new API url

beeceptor-step3

Step 4

Click on "Create New Rule" to add new rule / new API
beeceptor-step4

Step 5

Choose the desired Method, enter the desired "URL" of the API as per your contract with the back-end team. Enter the Response header and Response Body as closed with the back-end team.
beeceptor-step5

Step 6

It's all done. Now just integrate the API with your favourite API Client library. I will show the example with axios.

const apiBaseUrl = "https://projectname.free.beeceptor.com";

function getUsers(){
	const endpoint = "/users";
  
	return axios.get(`${apiBaseUrl}${endpoint}`);
}
getUsers().then(response => {
 const users = response.data.data;
  console.log(users);
});

"Waooooo!!!!. It' s done. It's so simple."

"Yes!! It's really simple to create APIs and integrate them without any extra coding, integration or installations."

For better understanding view the below video where I have followed the above steps and have created a working code.