Activity: Create your own Swagger UI display
In the Swagger tutorial, you explored the Swagger Petstore site, learned how the Swagger Editor works, and how to download and integrate your OpenAPI specification document into Swagger UI. Now it’s time to put this learning into practice by integrating the specification document into your own Swagger UI site.
Integrate your OpenAPI spec into Swagger UI
- If you completed the OpenAPI specification document activity, you should have a functional specification document from an API. If you don’t, you can use the openapi_sunrise_sunset.yml. This spec’s information comes from the Sunset and sunrise times API. Download the file to your computer.
- Go to the Swagger UI GitHub project and click Clone or download, then click Download ZIP.
- Uncompress the downloaded swagger-ui-master.zip and move the dist folder into another directory on your computer. Give the dist folder a more meaningful name, such as “swagger.”
- Move your OpenAPI specification document (e.g., openapi_sunrise_sunset.yml) into the folder.
Open the index.html file in the folder and update the reference to swagger.json to your own specification document.
Run a Local Web Server
A local web server simulates a web server on your local machine. To run a simple Python web server in the directory, you can follow use this simple HTTP server.
- Check that you have Python installed by opening a terminal prompt and typing
Python -V. If you don’t have Python, download and install it.
- Using your terminal,
cdinto the same directory as your Swagger UI project.
Do one of the following:
If you have Python 2.x, run the following command:
python -m SimpleHTTPServer 7800
If you have Python 3.x, run the following command:
python -m http.server 7800
Open a browser (such as Chrome), and go to
http://localhost:7800/. The web server serves up the index.html file in that directory by default. You should see your Swagger UI project load the spedification document.
Test your Swagger UI project
Make a request with the Swagger UI display to make sure it’s working. If you’re using the Sunset and sunrise times API example, you can use these values for latitude and longitude:
69/96 pages complete. Only 27 more pages to go...
If you would like to contribute back to say thank you for the API documentation course, click the Donate button below. Alternatively, to contribute content, such as a tutorial or a new section, contact me with your ideas. You can also submit a pull request in the GitHub repo to make your contribution. Even if you want to just fix a typo or add a sentence here and there, it's always welcome.
I'd Rather Be Writing Newsletter
Get new posts delivered straight to your inbox.