Activity 4c: Create a Swagger UI display
Activity 4c: Create a Swagger UI display with an OpenAPI spec document
In this activity, you’ll create a Swagger UI display for an OpenAPI specification document. If you’re using one of the pre-built OpenAPI files, you can see a demo of what we’ll build here: OpenWeatherMap Swagger UI.
First, you’ll make sure you can view Swagger locally. Then you’ll switch the Petstore OpenAPI document URL with an OpenWeatherMap OpenAPI document URL.
- Go to the Swagger UI GitHub project.
Click Clone or download, and then click Download ZIP. Download the files to a convenient location on your computer and extract the files.
The only folder you’ll be working with in the downloaded zip is the
distfolder (short for distribution). Everything else is used only if you’re recompiling the Swagger files, which is beyond the scope of this tutorial. If desired, you can drag the
distfolder out of the
swagger-ui-masterfolder so that it stands alone.
In your Chrome browser, press Cmd+O (Mac) or Ctrl+O (Windows), browse to the
distfolder, and select the
You should see the Petstore Swagger content. Now you’ll customize the OpenAPI spec file with another file.
- Inside your
index.htmlin a text editor such as Sublime Text.
Look for the following code:
https://idratherbewriting.com/learnapidoc/docs/rest_api_specifications/openapi_openweathermap.ymland then save the file.
index.htmlfile in your Chrome browser. The content should show the OpenWeatherMap API content instead of Swagger Petstore content.
When you’re ready to publish your Swagger UI file, you just upload the
distfolder (or whatever you want to call it) to a web server and go to the
index.htmlfile. For example, if you called your directory
dist(leaving it unchanged), you would go to
For more instructions in working with Swagger UI, see the Swagger.io docs.
10/150 pages complete. Only 140 more pages to go.
Want to buy me lunch? Click the Donate button below to donate any amount through Paypal.