Apidog

All-in-one Collaborative API Development Platform

API Design

API Documentation

API Debugging

API Mocking

API Automated Testing

Swagger UI Localhost Tutorial: How to Use Swagger UI Locally?

Swagger UI also provides offline and online versions for you, but for various reasons, you may need to use Swagger UI locally. In this article, we will show you how to use Swagger UI locally.

David Demir

David Demir

Updated on November 29, 2024

Swagger UI is a tool that allows you to view the API documentation generated in Swagger specification (OpenAPI Specification). Swagger UI also provides offline and online versions for you, but for various reasons, you may need to open the generated Swagger specification file with Swagger UI locally. In this article, we will show you how to run Swagger UI locally, if you encounter some problem in this process, follow up.

💡
We also recommend Apidog, an easier-to-use API client tool than Swagger UI, to manage your APIs more efficiently. This tool can also generate cleaner API specifications than Swagger UI and also has very powerful testing and mocking capabilities.
button

What is Swagger UI?

Swagger UI is a tool that allows you to interactively display and verify API definitions written in the OpenAPI Specification (formerly Swagger Specification). By setting up a Swagger UI in a local environment and importing the API definition, developers can develop while checking the API specifications in real time.

Why use Swagger UI locally?

While Swagger UI offers a SaaS version, many users prefer to install it on their local machines and set up a local web server. Consequently, many users are accessing Swagger UI on their localhost. So, what are the advantages of using Swagger UI locally? Let's explore these benefits in detail.

The primary reasons for utilizing Swagger UI in a local environment include:

  • Real-Time API Development: When developing an API locally, it's essential to have the capability to check the API definition in real time.
  • Offline Documentation Reference: Local usage allows you to reference API documentation offline, eliminating the need for a network connection.
  • Enhanced Privacy: Local usage ensures that your in-development API remains private, without the need for external publication, keeping it away from third-party access.
  • Mock Server Testing: You can set up and test a local Mock server to verify your API's functionality.
  • Iterative API Definition: Local usage enables you to make iterative changes to the API definition and check its impact each time.
  • CI/CD Pipeline Validation: Local validation becomes a part of your CI/CD pipeline, ensuring the reliability and quality of your API during development.

Advantages of using Swagger UI locally

The advantages of using Swagger UI in a local environment are listed below, but it is best to decide whether to use a cloud-based service or use it locally depending on the specific situation.

  • Can be used offline as it does not depend on the internet environment
  • Easy development because you can check local API definitions in real time
  • There is no need to expose the API under development to the outside world.
  • You can set up a mock server locally, so you can check the operation.
  • The response is fast because it does not depend on the specifications of the development machine.
  • Increase productivity by developing at your own pace
  • More secure than using a shared server
  • Easy to synchronize API definition and implementation

How to Use Swagger UI Locally?

So what should I do if I want to use Swagger UI locally? Next, I will explain in detail how to use Swagger UI locally.

Install Swagger UI and setup the Dev environment

First, you need to download Swagger UI and install it on your local machine. The latest version is prefer. The Swagger UI repository is managed on GitHub, so please install it using the following command.

git clone https://github.com/swagger-api/swagger-ui.git

Then set up your Dev environment using commands like:

cd swagger-ui
npm run dev

The Swagger UI will be launched by accessing http://localhost:3200/ in your browser.

Set up a local web server

Next, in order to launch Swagger UI, you need to prepare a web server using the following command line. Here we will use Node.js' http-server module.

npm install -g http-server 

Start HTTP-server and launch Swagger UI

Navigate to the directory where the Swagger Specification file is located, start http-server in that directory, and enable CORS using a command like the following:

cd {your-oas-document-dir}
http-server --cors

Then, http://localhost``:8080when you access it in your browser, the Swagger UI will launch.

Prepare the Swagger specification file

Next, prepare the Swagger Specification file. Generally, Swagger specification files are written in Json or Yaml format. For example, swagger.yaml suppose you write it in a file called. The URL of Swagger's spec file is http://localhost:8080/swagger.yaml.

Also, if you want to know more about Swagger Spec files or change the default path of Swagger UI URL, please refer to the following articles:

How to Change Swagger UI URL Defauth Path
Swagger UI is a great tool for visualizing and interacting with OpenAPI specs. As you work with Swagger UI, you’ll notice URLs play an important role in configuring and accessing the API documentation. In this post, we’ll demystify Swagger UI URLs to help you use them more effectively.

Enter the URL of the Swagger specification file and open it in the Swagger UI

Then, on the Swagger UI screen, enter the swagger.yaml URL in the above SPEC URL in the input box at the top, and click the Explore button to display the local API definition document.

Swagger

Apidog: Manage Your APIs more efficiently

When using Swagger UI, you need to build a server and set a URL, which can be quite a pain. If you're looking for an easier solution, we recommend using Apidog, an easy-to-use API management tool.

button

Apidog can read Swagger Json and Yaml files directly and quickly test your API. You can also use its sharing feature to generate and share beautiful API documentation.

Share docs

Easily import JSON and YAML into Apidog

Apidog supports importing data with YAML and JSON, so you can fully parse these files and fully import your API's data into Apidog for testing.

Open your project settings in Apidog, click Import Data, select OpenAPI/Swagger, and drag the YAML file into Apidog.

Import Data

Test your API with Apidog

Once you have imported your API's data into Apidog, you can view the imported API by clicking the APIs tab on the left. If you want to test a specific API endpoint, you can click on it, fill in the parameters in an intuitive UI, "send" the request, and get the response.

Send API

Generating and sharing API documentation is also very easy using Apidog. The following is a sample API documentation generated by Apidog:

How to Generate API Documentation Using Apidog
API documentation plays a pivotal role in contemporary software development, serving as a vital resource for understanding how to effectively utilize a RESTful API.

FAQs about Swagger UI Localhost

How to access Swagger UI on localhost?

  • Run your API project locally, then navigate to http://localhost``:<port>/swagger in your browser. The port is usually 5000 or 5001.

What is the URL for the Swagger local host?

  • The default URL is http://localhost:/swagger where the port your API is running on locally.

How do you host Swagger documentation locally?

  • Enable Swagger in your startup code, launch the API project, and navigate to the /swagger endpoint to view the UI.

What is the Swagger URL for localhost .NET core?

  • For .NET Core APIs, the Swagger URL is typically http://localhost:/swagger/v1/swagger.json

Summary

Swagger UI is a useful tool when developing APIs, but it has limitations for more advanced API lifecycle management. Apidog provides one-stop functionality for API development, such as API definition, automatic document generation, testing, monitoring, and sharing.

Apidog allows you to import Swagger and OpenAPI specification files and interactively test your API. Share features allow you to create beautiful documents and share them with your team. If you want to streamline your API development process, Apidog is the solution for you. By using it in conjunction with Swagger UI, you will be able to achieve more powerful API lifecycle management.

button

How to Install Newman and Run Postman Collections in NewmanTutorials

How to Install Newman and Run Postman Collections in Newman

By following this guide, you will learn how to install Newman and execute Postman collections, enabling you to automate your API testing process. A recommend Apidog as a powerful alternative.

David Demir

December 5, 2024

How to Fetch GraphQL with API?Tutorials

How to Fetch GraphQL with API?

Discover how to fetch GraphQL data efficiently using the Fetch API and Apidog. Learn advanced techniques, optimize performance, and secure your API for robust applications. Download Apidog for free to streamline your API workflows.

Ashley Innocent

November 28, 2024

What is Faker.js and How You Can Use It in Apidog for Generating Mocking DataTutorials

What is Faker.js and How You Can Use It in Apidog for Generating Mocking Data

Discover what Faker.js is and how to use it in Apidog to generate mock data for API testing. Learn step-by-step instructions, practical examples, and best practices.

Ashley Innocent

November 27, 2024