Menu
How to embed Swagger UI into a webpage? Basically I want an API endpoint test environment to embed into my webpage.
946
Go to http://localhost:8000/ in your address bar. This address lets you view the local web server. By default, web servers default to the index. html file in the directory, so it will show the Swagger UI file automatically.
By default, Swagger UI is accessible at /q/swagger-ui . The value / is not allowed as it blocks the application from serving anything else. A value prefixed with '/' makes it absolute and not relative. Once your application is started, you can go to http://localhost:8080/q/swagger-ui and play with your API.
This will be located at localhost:8080/swagger-ui. html. Swagger will display the API endpoints which you have configured it to generate documentation for. From here, the user can make the API calls from this location eliminating the need for a separate REST client.
The answer depends on whether you have a plain web page you edit directly, or use a framework like Node.js or React. For simplicity, I'll assume the former.
Download (or clone) the Swagger UI repository. You'll need the following files from the dist folder:
swagger-ui.css swagger-ui-bundle.js swagger-ui-standalone-preset.js In the <head> section of your web page, add:
<link rel="stylesheet" type="text/css" href="swagger-ui.css"> Inside the <body>, add:
<div id="swagger-ui"></div> <script src="swagger-ui-bundle.js"></script> <script src="swagger-ui-standalone-preset.js"></script> <script> window.onload = function() { const ui = SwaggerUIBundle({ url: "https://yourserver.com/path/to/swagger.json", dom_id: '#swagger-ui', presets: [ SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset ] }) window.ui = ui } </script> <div id="swagger-ui"></div> is the DOM node inside which Swagger UI will be rendered. The SwaggerUIBundle constructor initializes Swagger UI. This is where you specify your spec URL and other parameters.
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
