Effortless Swagger UI Installation
In this blog, we will see a quick and easy way to kick off Swagger UI on your machine.
As a 🚀 Vice President with over 12 years of experience, I am a seasoned software architect known for designing and leading teams of engineers to deliver high-quality software products promptly and within budget.
Throughout my career, I have spearheaded the end-to-end design of 7 innovative software products 🎯.
From conceptualization to deployment planning, I have successfully guided teams through requirements gathering, prototyping, testing, and deployment phases, ensuring exceptional outcomes.
I take pride in my industry recognition, including being honored as a 💎 Microsoft Most Valuable Professional, 💡 CodeProject Most Valuable Professional, and 🏆 DZone Most Valuable Blogger.
Additionally, my expertise has been acknowledged by BookAuthority, which recognized my books on ASP.NET, REST API, Vue.js, and Dependency Injection as the 📚 best of all time.
In addition to my professional achievements, I am passionate about mentorship and have been privileged to serve as a 🌟 Young Mentor at IndiaMentor, guiding aspiring professionals in their career journeys.
For further information about my work and insights, please visit my website at 🌐 http://taditdash.com.
You can also connect with me on 🐦 Twitter at https://twitter.com/taditdash, 👍 Facebook at https://www.facebook.com/taditdash, and 💼 LinkedIn at https://www.linkedin.com/in/taditdash.
I am always open to networking and discussing opportunities, so feel free to reach out and connect.
Let's explore how we can collaborate and drive innovation in the ever-evolving world of software architecture and development.
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.
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.
- First of all, we need to go to the Swagger UI Github Page.
- 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!.
- You will land on the particular release page with the Assets containing the source code. See the below screenshot.
- We are interested in the
zipfile. Let's download that and then extract it. Here it is how it will look on your system.
- Now that we got the whole source code, let's dig inside. You will see a
distfolder and anindex.htmlfile inside that.
- 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.
- 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-servernpm package. Then it is just a matter of running the following command.http-server swagger-ui
- Now when you open the URL mentioned in the command prompt and append
distto it, it will open the same UI that we saw earlier.
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.
