Fake APIs for your UI ('til you make it)

#javascript #webdev

Many times we just want to start developing a UI Prototype quickly without too many dependencies.

But the reality is, for a usable real-world component, we often need to fetch some data and have the UI handle it then render something.

Then we will either:

Write some quick Backend code (with backend frameworks like express, koa, happy, etc.) to have a couple of APIs, routes to return some dummy data or data from a database.
Research and utilize a fake API service from the internet.

For Option 1 - write our own Backend. We have to spend a lot of time to create Backend APIs with:

dummy data, pagination support.
up-to-standard, proper API interfaces.
usually, this will lead to distractions from the initial idea and we will have less time to implement UI (this may be the reason that we keep abandon pet projects once in a while)

For Option 2 - utilize a fake API service from internet:

requires Internet connection.
relies on their stability.
they can have breaking changes that you have to adjust your code accordingly.
adding dependency - will they still be there a few years later?

But there is a better way to do that...

What if we have an easy way to launch our fake APIs locally with some dummy data ready to be consumed by UI?

Let's explore a command-line tool called API now! (api-now).
Just by typing $ npx api-now in the terminal, it will launch an API Server to serve a JSON, JS file or faker data with HTTPS support!

This saves us a lot of time tinkering in backend land so we can focus back on our beautiful UI Prototype until we have the time to invest in a backend setup.

api-now has many helpful features like:

Default datasets out-of-the-box: todos, users, posts, comments (using faker).
HTTPS support (with key, cert files).
Can take a .json or .js file.
Can serve a static directory (e.g. /dist, /public etc.) - this can replace http-server, or SimpleHTTPServer.
APIs support pagination (_page, _limit).
/echo route to respond parameters back as json.
/file route to serve any file type (including images).
/login route (POST) to respond with a dummy JWT token (using jsonwebtoken).
/todos route to return a list of todo items (follow TodoMVC specs).
/image/random to serve a random image file from a directory.
/avatar/random to serve a random avatar image.
/nature/random to serve a random nature image.

To try it, have your NodeJS ready (who doesn't?) and run this command line $ npx api-now. That's it! You can try it now (from another terminal):

$ curl http://localhost:3003/todos
$ curl http://localhost:3003/users?_page=1&_limit=5    (others: /posts /comments)

Other Useful Routes:
$ curl http://localhost:3003/echo?any=value
$ curl http://localhost:3003/file?path=YourFilePath
$ curl http://localhost:3003/image/random?path=YourDirPath
$ curl http://localhost:3003/avatar/random
$ curl http://localhost:3003/nature/random
$ curl -X POST http://localhost:3003/login -H 'Content-Type: application/json' -d '{"username": "test"}'

Below is a sample project which uses api-now for UI boilerplate:
https://newssup.com (used when developing this site)
https://github.com/ngduc/parcelui

Now you have more time to have fun tinkering with your awesome UI project! :)

Link:
https://github.com/ngduc/api-now

Top comments (5)

Jesse Phillips • Nov 22 '19

I utilize wiremock. It does not have defined mappings, but none of those you listed would be of benefit to me.

Wiremock allows for responses to be served through matches request criteria. While it can serve any data Soap would not be fun.

Duc Ng • Nov 22 '19

I never heard of wiremock but if it works for you, that's good!
As pointed out, you could use online service but it comes with other things. Different use case needs different tools.
Cheers :]