Quickly and easily mock a REST API with Restapify
Tags: javascript, node, api, rest
Published: 2021-03-09 11:01:59

Hey devs :wave:

Often when you start developing a new frontend project that consume a REST API, the backend is not yet ready. However, very often this one is at first basic and you only want to receive faked data to see how the application behaves. That's when you decide to use a tool to mock your API like [postman](https://www.postman.com/) or library like [json-server](https://github.com/typicode/json-server), [mocker-api](https://github.com/jaywcjlove/mocker-api) or [http-fake-backend](https://github.com/micromata/http-fake-backend). These tools are really good but there still have some negative points. Postman for example is not entirely free to use and needs to login, mocker-api define all routes in a single javascript file and json-server is at some point very restrictive for edge-cases. 

So I decided to work on a new API mocker tool that should be able to handle all cases and that within a nice developer experience flow: [Restapify](https://restapify.vercel.app/).

Restapify is a nodejs based CLI that allows you to quickly and easily deploy a local REST API by using an intuitive and developer friendly JSON file structure like you will see in NextJS or Sapper. Lets describe how it works by creating a simple mocked API that should serve the following:

```
GET  /me
GET  /posts
GET  /users
GET  /users/:userid
POST /users/:userid
DEL  /users/:userid
GET  /users/:userid/comments
```

## Create the endpoints

The starting point is the creation of the folder that will contain your route json file, I will call it `/api`. Then we can add some routes to be served. Creating a route means to add a `.json` file where its filename describe the endpoint, the method and the status code and its content the response body. So to create the `GET /me` endpoint with the status code `200` just create the following file:

```
📂 api
┣ 📜 me.GET.200.json
``` 

Since `GET` and `200` are the default value for the method and the status code, you can simplify the filename to:

```
📂 api
┣ 📜 me.json
```

The response should contain a `firstname`, a `lastname` and an `email`, so the file content of `/api/me.json` would be something like:

```json
{
  "firstname": "Janie",
  "lastname": "Hermann",
  "email": "Jo.Kessler@yahoo.com"
}
```

Then lets add the endpoints for `/users`. Since there are a few of them we can group them in the same folder `users`

```
📂 api
┣ 📂 users
┃ ┗ 📜 _.json
┃ ┣ 📂 [userid]
┃ ┃ ┗ 📜 _.json
┃ ┃ ┗ 📜 _.POST.201.json
┃ ┃ ┗ 📜 _.DELETE.201.json
┣ 📜 me.json
```

The folder `[userid]` indicate that this route is dynamic. You can then in the JSON file content consume this variable by using the syntax `[userid]`. Example in the file `/api/users/[userid]/_.json`:

```json
{
  "id": "[userid]",
  "email": "Jo.Kessler@yahoo.com"
}
```

If you call then `GET /users/42` you will get the response:

```json
{
  "id": "42",
  "email": "Jo.Kessler@yahoo.com"
}
```

> Here to get the `id` as a number, just cast the variable by using the syntax `n:[var]` like `"id": "n:[userid]"`. [Variable casting docs](https://restapify.vercel.app/docs#routes-variable-casting)

Restapify provide a syntax to use the famous [fakerjs](https://github.com/marak/Faker.js/) library to easily populate your response's body (checkout the [docs](https://restapify.vercel.app/docs#fakerjs-integration)):

```json
{
  "firstname": "[#faker:name:firstName]",
  "lastname": "[#faker:name:lastName]",
  "email": "[#faker:internet:email]"
}
```

You can also easily create a waste amount of data by using the [for-loop syntax](https://restapify.vercel.app/docs#for-loops). So if you want to get 10 comments with the request `GET /users/:userid/comments` just write this in the JSON file `/api/users/[userid]/comments.json`:

```json
[
  "#for i in range(10)",
  {
    "id": "n:[i]",
    "creatorId": "n:[userid]",
    "content": "[#faker:lorem:sentences]"
  },
  "#endfor"
]
```

So now we have created all the endpoints of the API that send a succeeded response. But what if we want to test the behaviour of the application when the user doesn't exist in `GET /users/:userid` for example. A real API would probably return a `404` without any content. To mock this behaviour, Restapify implement the concept of [endpoint states](https://restapify.vercel.app/docs#routes-state). To do this you just have to create a new file for each different state by adding at the end of the file the syntax `{STATE_NAME}` separated by a dot. So lets create a new state for `GET /users/:userid`:

```
📂 api
┣ 📂 users
┃ ┣ 📂 [userid]
┃ ┃ ┗ 📜 _.json
┃ ┃ ┗ 📜 _.404.{NOT_FOUND}.json
```

To return no-content in Restapify you have to use this syntax as file content:

```json
[null]
```

> An empty file would be more convenient but it's not valid for a JSON file according to the [ECMA-404](https://www.ecma-international.org/publications-and-standards/standards/ecma-404/) standard.

Now that you have created your endpoints, it's time to serve the mocked API. For that install the Restapi CLI...

```bash
yarn global add restapify 
# or npm install -g restapify
```

...and then serve the `api/` folder:

```bash
restapify serve api/
```

It will then open a dashboard in your browser that give you an overview of the mocked API.

![dashboard screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0i3enl3r1k7s2638ajoh.png)

You can in this dashboard consult the endpoints and their content, fetch them and more important select which state of the endpoints you want to serve.

So if you click on the state button `NOT_FOUND`, it will update the API to serve this state of the endpoint, so if you directly after request `GET /users/42` you will receive a `404`. This is really helpful to test your frontend (for example a login forms) and you can create so much several state as you want to fit all you need and edge cases.

So I presented the most important features of Restapify but I really encourage you to check the [official documentation](https://restapify.vercel.app/docs) of it to see other use cases like [query string](https://restapify.vercel.app/docs#consume-routes-query-string-variables), [route variable in for-loops](https://restapify.vercel.app/docs#use-routes-variables-in-sequence) or the [fakerjs integration](https://restapify.vercel.app/docs#fakerjs-integration) in more details.

You can find some prepared examples of mocked API in https://restapify.vercel.app/examples so that you can directly play and see how it feel. If you have any question or feedback feel free to post it in the discussion and if you want to checkout the source code, here is the GitHub repository: 

{% github johannchopin/restapify no-readme %}

Have a good day :star: