Mocking REST API for Frontend Development

TLDR: You need a chrome Plugin called Requestly and a simple npm package called json-server

I’m not a big fan of mocking data in my frontend code, it just leads to more refactoring later when the actual API surfaces. So I like to find workarounds so my code remains clean. This workaround helps us talk to an actual API endpoint (well a version of it) and receive data to work with.

Firstly you will need to install a little chrome plugin called Requestly, this plugin allows us to point any URL to any other URL, so if we have a future endpoint available at http://www.test.com/data/i/want we can then point this to an address on our http://localhost:3000/mock/data

Here is an example URL rewrite with Requestly

Secondly, we will need to install an npm/ yarn package called json-server, this allows us to expose a very simple JSON API on our localhost with minimal effort. Once you have created a JSON with the response you can run it with this simple command.

Now you can develop your Frontend Application using an active API while waiting on the actual API to appear.