Mock API Responses During Development with Requestly
- First, install “Redirect URL, Modify Headers & Mock APIs” add-on to your browser. For Chrome, you can install from this link.
For other type of browsers, you can directly visit Requestly’s official site. The page will direct you to download the extension for different platform and browser combinations.
- Sign up Requestly for free to save (and sync) your rules. You can visit here to see free usage limits (max active rules count is 3).
- After signing up, under Rules — HTTP Rules section, click on “Create your first rule” button.
- Click on “Modify API Response” menu from the left side. After that, click on “Create Rule” button on the right side.
- Find the API request of the response which we want to modify from Developer Tools / Network tab. I wanted to mock a config API response. I copied “/v1/configs/list” because I want to mock the response in each deployment environment (test, preprod, etc.).
Then, navigate to “Response” tab in Developer Tools and copy its content.
- Go back to Requestly page and fill the screen like the print screen below with the url parts and response body you copied.
Give name to your rule. Paste your request url parts with “URL” and “Contains” choices selected. Paste the response body and use “Pretty Print” link (which changes to “View Raw” afterwards) to beautify json response.
Now, you can modify your response fields. I modified a login type flag value to 0.
As the last step, click “Create rule” button (which changes to “Save Rule” afterwards).
- Click on “Http Rules” from the left menu and now you are able to see your newly created rule under “Ungrouped” section in the list.
When you hover over your rule, some quick action icons appear. Click “Pin Rule” so that you will be able to see it in your browser add-on as well.
- You can now switch on/off your rule whenever you want.
- You can now navigate to your web page where the mocked API is called. You will find an info console log if the request is mocked successfully.
Happy Coding!
