How to open local json file in Swagger UI

Swagger UI is a visual interface for viewing and interacting with RESTful APIs described using the OpenAPI Specification.

To open a local JSON file in Swagger UI, we need to use a local HTTP server to serve the file and make it accessible to the Swagger UI interface. Any HTTP Server should work. In this post, we will use the Node.js http-server npm package.

Here’s how you can do this:

Step 1: Make sure first Node.js is installed on your machine.

Step 2: Install the http-server npm package.

npm install -g http-server

Step 3: Once the http-server npm package is installed, open your command line and go to the folder where the OpenAPI Specification JSON file is in your machine, then run the below command.

http-server --cors

Step 4: Open your web browser and access the JSON file
at, http://localhost:8080/<filename>.json

Where <filename> is the name of your JSON file. For example, if your JSON file is named openapi.json, you can access it at http://localhost:8080/openapi.json.

Step 5: Go to the dist folder in Swagger UI folder on your machine and open index.html. Replace the default URL with http://localhost:8080/<filename>.json as shown below.

Click the Explore button. Now you should see your API specification and interact with it.