Create dummy APIs for faster prototyping 👨‍💻⚡
Tags: webdev, tutorial, productivity, mock
Published: 2021-10-18 14:14:27

<small>🖼️ Image by [Gerd Altmann](https://pixabay.com/users/geralt-9301)</small>

### 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](https://mocko.dev/) 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/](https://mocko.dev/) and log in using your GitHub account:

![Click "Log in with GitHub"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbxqrdfnst4wz311p902.png)

![Authorize Mocko to read your email](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1fbd2sy6xi4vl9blcj4.png)

Now you'll choose a good name and URL for our mocked API, I'll go with `Insane Goat`:

![Fill "Project name" and click "CREATE"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhco8m7igqijm389ycm4.png)

## Step 2: Create your first Mock

Now that you have a dummy API created, it's time to create your first mock like so:

![Click the "NEW MOCK" button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogs0xur9xjncs8csqgy5.png)

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`:

![Fill mock data and click "SAVE & DEPLOY"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9xyy6tk5g31tf7r3bdn.png)

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:

![Copy project URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4ixqiv6are7bjvi5isr.png)

In my case, I can see mine in the URL:
[https://insane-goat.free.mockoapp.net/hello](https://insane-goat.free.mockoapp.net/hello)

## Step 3: Create a dynamic mock

You can use [Bigodon](https://github.com/gabriel-pinheiro/bigodon/blob/main/LANGUAGE.md) 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:

![Click "NEW MOCK"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgs2ff3fkfnp8f7l93dv.png)

![Fill mock data and click "SAVE & DEPLOY"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zavvteslnns5mrdekq7.png)

Now, any parameter you pass in the URL gets used by the template:

![Template uses URL param](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1udosjdifl23f3u1dn1l.png)

To zhuzh it up even more, you can use [Bigodon helpers](https://github.com/gabriel-pinheiro/bigodon/blob/main/HELPERS.md) to transform data, iterate over arrays, run conditions and a lot more. Here's an example:
```hbs
Hello, {{capitalize request.params.name}}!
```

## Step 4: Create an advanced template

As shown above, you can use [conditionals](https://github.com/gabriel-pinheiro/bigodon/blob/main/LANGUAGE.md#conditional-blocks), [loops](https://github.com/gabriel-pinheiro/bigodon/blob/main/LANGUAGE.md#loop-blocks), [helpers](https://github.com/gabriel-pinheiro/bigodon/blob/main/LANGUAGE.md#helpers), [custom helpers](https://mocko.dev/docs/templating/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:

```hbs
{{#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/george)
[https://insane-goat.free.mockoapp.net/users/alice](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:

![Proxy settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3ig6hdcigam5489eutd.png)

## 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](https://github.com/mocko-app/mocko/stargazers) and [Bigodon](https://github.com/gabriel-pinheiro/bigodon/stargazers) 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 😃