I Made a Web API Mocker Solution for Front-End Development
Easy fake an API in frontend
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.yaml
file 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.

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"
}

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!