Create dummy APIs for faster prototyping 👨‍💻⚡

Gabriel Pinheiro — Mon, 18 Oct 2021 14:14:27 +0000

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 😃

DEV Community: Gabriel Pinheiro