Tadit Dash
Tadit Dash

Follow

Tadit Dash

Follow
Effortless Swagger UI Installation

Effortless Swagger UI Installation

In this blog, we will see a quick and easy way to kick off Swagger UI on your machine.

Tadit Dash's photo
Tadit Dash
ยทNov 5, 2022ยท

3 min read

Table of contents

  • Background ๐Ÿ’ญ
  • What is Swagger UI? ๐Ÿค”
  • Quick Installation ๐Ÿ‘‡
  • Next Steps ๐Ÿชœ
  • Feedback ๐Ÿ™Œ

Background ๐Ÿ’ญ

I am working on a blog on the concepts of Open API Specification, where I came across Swagger UI and Swagger Editor. I needed these two tools on my machine so that I could make my hands dirty trying our APIs. Let's see how we can install Swagger UI in an effortless manner.

What is Swagger UI? ๐Ÿค”

APIs are magic. When invoked, they just perform specific tasks that the invoker has said them to. It is not easy to explain this to anyone in an organization unless we provide them with an interface to actually see and try them out.

That is where Swagger UI comes into the picture. It is an open-source tool. When you configure Swagger with your API, it can beautifully present everything about it like what methods it follows, what URLs are supported, and what data it expects, everything.

See the screenshot of the demo pet store API UI by Swagger. Swagger UI Pet Store Demo Notice the URL - https://petstore.swagger.io/. It is running on the Swagger domain. As we know, it is open-source, so why can't we run it locally and see if it working?

Let's get started.

Quick Installation ๐Ÿ‘‡

Here are the steps that we can follow.

  1. First of all, we need to go to the Swagger UI Github Page.
  2. Now move to the Releases on the right side section and click on the Latest Release number. At the time of writing this blog, it is saying Swagger UI v4.15.2 Released!. Swagger UI Releases Section
  3. You will land on the particular release page with the Assets containing the source code. See the below screenshot. Swagger UI v4.15.2 Release Page
  4. We are interested in the zip file. Let's download that and then extract it. Here it is how it will look on your system. Swagger UI Zip and Extract.png
  5. Now that we got the whole source code, let's dig inside. You will see a dist folder and an index.html file inside that. image.png
  6. If you open this file on a browser, it will display the pet store API details as we saw earlier online. Here is the screenshot. Swagger UI Pet Store running on Local
  7. If you want to run a server and host locally, then open a command prompt and move to the folder where you have the Swagger UI extracted. The prerequisite will be to install http-server npm package. Then it is just a matter of running the following command.
    http-server swagger-ui
    
    http-server running Swagger UI
  8. Now when you open the URL mentioned in the command prompt and append dist to it, it will open the same UI that we saw earlier. Swagger UI Running on http-server.png

Next Steps ๐Ÿชœ

Going forward, we will install Swagger Editor to edit an API and see the changes running on the Swagger UI. Interesting time ahead! Stay tuned.

Feedback ๐Ÿ™Œ

If you liked my blog, don't forget to like and share.

MilkaMilkaTenderWordsGIF.gif

Did you find this article valuable?

Support Tadit Dash by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this