Check Swagger API Specs without hosting Swagger UI
In this article, we will be sharing a nice cool trick to check Swagger API specs using local swagger json/yaml file and without setting up swagger UI locally.
When we use Swagger to define API specs, we either define Swagger json/yaml manually or generate it using some tools like Java annotations etc. Then we need Swagger UI to view nice User Interface for rendering spec files. There are multiple ways of viewing our spec json/yaml in Swagger UI. We will explain couple of them and you can choose whatever fits the bill.
Online Swagger Editor
Swagger provides an online editor (https://editor.swagger.io/) in which we can paste your json/yaml spec and it will render UI for given spec. Similarly, we can also provide a URL from which it will import the spec definition and render it in UI.
Downside — For every change in json/yaml spec, we have to copy paste spec content everytime, because it stores the spec definition in localstorage and render UI from it. There is no live reload functionality even when you import spec from a URL.
Using Requestly — Redirect Rule
Swagger has a subproject where a simple and famous petstore api spec is explained. It is available at http://petstore.swagger.io/. It fetches spec json from server (http://petstore.swagger.io/v2/swagger.json) and renders it on UI. Trick is very simple — Just redirect petstore spec json to your local hosted json and you can use Petstore UI to render your spec files.
Good news is for any change in your local spec, it will be automatically reflected in petstore swagger UI. You just need to refresh the page.
This is not exactly live reload but this is better than copy pasting spec files every time you make some change in spec. Here are the steps for setting up:
- Install Requestly for Chrome or Firefox.
- Create Redirect Rule (Click on + icon in toolbar and then click on Redirect rule card)
- Select Source Url Equals http://petstore.swagger.io/v2/swagger.json
- Destination: <your_localhost_spec_url>
That’s it! Just hit save rule and refresh http://petstore.swagger.io/. Here are some screenshots for reference.
Screenshot — Requestly Redirect Rule
Screenshot — PetStore UI showing specs for different json (based on Redirect Rule)
Tips for running server locally —
- Install node and npm
- Install http-server (npm install -g http-server)
- Serve files from your filesystem using (http-server — cors) command.
Hope it helps and solves a bit of problems for Swagger users. Follow us on twitter and medium Requestly for more cool tips and tricks. Feel free to reach out on requestly.extension@gmail.com for any questions and suggestions.
