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 some fake API services from the internet.
For Option 1 - Write Backend code. 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 an Internet connection.
- Relies on their stability, security. (is it safe to use? is it tracking your requests?)
- It may introduce breaking changes that you have to adjust your code accordingly.
- Adding a dependency to your app - will it 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, GraphQL 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.
- GraphQL endpoint to serve faker data: /graphql
- 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"}'
Open GraphQL Query Page:
open http://localhost:3003/graphql
$ curl 'http://localhost:3003/graphql' -H 'Content-Type: application/json' --data-binary '{"query":"{ todos { title } }"}'
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! :)
Top comments (0)