🖼️ Image by Gerd Altmann
Introduction
It's quite common to need a dummy API (mocks, stubs) while building a prototype, testing a hypothesis or simply creating the front end of an application in which the API isn't done yet.
The ideal is spending as little time as possible in the mocks so you can test hypothesis quickly, prototype without worrying about the back end and deliver the application with confidence that it'll work with the real API.
By the end of this article, you'll have created a mocked API accessible from anywhere without writing a single line of code. We'll use Mocko as its forever-free plan has the features we need and limits that don't get in the way.
Step 1: Create an API on Mocko
Go to https://mocko.dev/ and log in using your GitHub account:
Now you'll choose a good name and URL for our mocked API, I'll go with Insane Goat
:
Step 2: Create your first Mock
Now that you have a dummy API created, it's time to create your first mock like so:
Choose a name for your mock and fill the request and response information. To begin, mock a 200
response with Hello from Mocko!
on GET /hello
:
Now that you created you first mock, you can try it by clicking the "open" icon in the list or using the URL in the top bar:
In my case, I can see mine in the URL:
https://insane-goat.free.mockoapp.net/hello
Step 3: Create a dynamic mock
You can use Bigodon in your mocks to create templates that are evaluated with request data as context. What you write between {{
and }}
allows you to access fields from the context like request.params
, request.body
, request.headers
, request.query
.
Let's create an endpoint that greets the user by name using the parameter provided in the URL. Mock the response Hello, {{ request.params.name }}!
in the endpoint /hello/{name}
like so:
Now, any parameter you pass in the URL gets used by the template:
To zhuzh it up even more, you can use Bigodon helpers to transform data, iterate over arrays, run conditions and a lot more. Here's an example:
Hello, {{capitalize request.params.name}}!
Step 4: Create an advanced template
As shown above, you can use conditionals, loops, helpers, custom helpers and a lot more. Let's create a mock template on GET /users/{name}
that returns dummy user data for users whose name start with g
and 404 otherwise:
{{#startsWith (downcase request.params.name) "g"}}
{
"id": "{{uuid}}",
"name": "{{capitalize request.params.name}}"
}
{{else}}
{{setStatus 404}}
{
"error": "User not found"
}
{{/startsWith}}
Here's the result:
https://insane-goat.free.mockoapp.net/users/george
https://insane-goat.free.mockoapp.net/users/alice
Step 5: Proxying your API
If you already have an API to use and you wish to mock only some endpoints, you can use the proxy feature to proxy your API and mock only specific endpoints:
Conclusion
Mocks don't have to be limited and must be easy to create, after all, that's the point of using mocks: Quickly develop even when your dependencies aren't ready.
This is only possible due to Free Open Source Software, if you like the result make sure to leave Mocko and Bigodon a star on GitHub.
I'll be happy to hear your thoughts in the comments. Also, make sure to leave a heart if this article helped you 😃
Top comments (5)
Omg what a timing! This week I have to setup an API mock for my team so my colleagues can test our new app while I'm on holiday the next two weeks. My plan was to setup an own solution with json-server but I don't have much time the next days.
Your post really saves my week my friend, this is a game changer
This seems to be a really useful tool. Absolutely going to use on my next projects
A really useful solution. Thanks for sharing this helpful and easy to use solution.
You can do this with getsandbox or just node+express+JSON or using postman mocks. The concept of the walking skeleton is not new, but it can be good for uniting front and back around "contracts".
This is exactly what I'm needing now. I'll certainly use Mocko in my projects from now on.