Hey devs 👋

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 or library like json-server, mocker-api or 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.

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:

{
  "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:

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

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

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

Restapify provide a syntax to use the famous fakerjs library to easily populate your response's body (checkout the docs):

{
  "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. 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:

[
  "#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. 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:

[null]

An empty file would be more convenient but it's not valid for a JSON file according to the ECMA-404 standard.

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

yarn global add restapify 
# or npm install -g restapify

...and then serve the api/ folder:

restapify serve api/

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

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 of it to see other use cases like query string, route variable in for-loops or the 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:

Have a good day ⭐