I Made a Web API Mocker Solution for Front-End Development

Easy fake an API in frontend

André Borba Netto Assis
Better Programming
Published in
3 min readJan 14, 2022

--

Photo by Glen Carrie on Unsplash

Most front-end projects depend on back-end requests to retrieve or update some information. To make sure the back-end doesn’t become a bottleneck for the front-end tasks is a good practice to define contracts, so both sides can move on.

With those contracts defined, all that the front-end needs to do is to work with the expected payload responses data. A good start is by mocking (with less effort as possible) the web-api, being possible to develop all the layers on the project (including HTTP handlers).

In this article, I will show you how to easily create a web-api mocker solution based on directory and files, using docker.

Pre-requisites

You need to have already installed on your computer:

  • Docker
  • Docker Compose

Getting Started

Having docker and docker-compose installed on your machine, we can start!

First, create a folder, let’s call it sample

mkdir sample

Inside sample/ folder, create a docker-compose.yamlfile with the following content:

Running the docker image

Open the terminal on the current location and run the following command:

docker-compose up -d

For closing the application, run the command below:

docker-compose down -v

You will see that a folder called data/was created. You will also check that your API is up and running by accessing:

http://localhost:3000/PS: It also generates an exposed URL that can be access Worldwide. Check Learn More section for details.
Web API up and running

Now, let’s fill our web-api with some content.

Creating web api content

For creating a request URL path, just add a folder inside data/.
For creating a payload response, just create a JSON file using an HTTP VERB as its name.

Let’s see a basic example. Create the following structure:

sample/
data/
hello-world/
GET.json

And fill in the content of GET.json file with:

{
"hello":"world"
}

It will result in the following mock:

Request: GET http://localhost:3000/hello-world
Response:
Status: 200
Payload:
{
"hello":"world"
}
GET http://localhost:3000/hello-world

Advanced Usage

The previous sample was very simple, but you can do a lot more by using:

  • others HTTP verbs (GET, POST, PUT, PATCH and/or DELETE)
  • path parameters
  • use a JavaScript file and customize the response (status, dynamic content, delay, query parameters, etc)

For more data samples, check this link.

Learn more

What I am showing to you is just the tip of the iceberg of what you can do.

For example, this solution can also exposes the local host to the world by generating a domain https://<subdomain>.loca.lt while the container is running, being easy to use the web API during mobile projects development, for example.

So, if you want to understand more about this solution, you can access the full documentation over GitHub

Many thanks! Hope you enjoyed it! Any feedback would be appreciated!

References

  1. Setting up a Local Mock API for your Front-end (React) Project
  2. connect-api-mocker
  3. localtunnel

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Responses (2)

What are your thoughts?