Add custom js url to get_swagger_ui_html

[Altabeh]

First check

• I added a very descriptive title to this issue.
• I used the GitHub search to find a similar issue and didn't find it.
• I searched the FastAPI documentation, with the integrated search.
• I already searched in Google "How to X in FastAPI" and didn't find any information.
• I already read and followed all the tutorial in the docs and didn't find an answer.
• I already checked if it is not related to FastAPI but to Pydantic.
• I already checked if it is not related to FastAPI but to Swagger UI.
• I already checked if it is not related to FastAPI but to ReDoc.
• After submitting this, I commit to:
  • Read open issues with questions until I find 2 issues where I can help someone and add a comment to help there.
  • Or, I already hit the "watch" button in this repository to receive notifications and I commit to help at least 2 people that ask questions in the future.
  • Implement a Pull Request for a confirmed bug.

I would like to see a parameter like custom_js_url in get_swagger_ui_html in FastAPI for more control over the docs page.
This can help if we want to insert certain missing components to the docs or be able to save tokens to the browser on redirect, etc. Furthermore, this gives us the freedom to choose to stick with CDN for serving swagger UI js and have more client-side flexibility.

A similar thing can be done for CSS files.

def get_swagger_ui_html(
    *,
    openapi_url: str,
    title: str,
    swagger_js_url: str = "https://cdn.jsdelivr.net/npm/swagger-ui-dist@3/swagger-ui-bundle.js",
    swagger_css_url: str = "https://cdn.jsdelivr.net/npm/swagger-ui-dist@3/swagger-ui.css",
    swagger_favicon_url: str = "https://fastapi.tiangolo.com/img/favicon.png",
    oauth2_redirect_url: Optional[str] = None,
    init_oauth: Optional[Dict[str, Any]] = None,
    custom_js_url: Optional[str] = None,
) -> HTMLResponse:

...


    if custom_js_url:
        html += f"""<!-- custom javascript code goes here-->
                  <script src="{custom_js_url}"></script> 
                  """
    html += """</body></html>"""

    return HTMLResponse(html)

[ricky-sb]

You mean like this?

https://fastapi.tiangolo.com/advanced/extending-openapi/#include-the-custom-docs

[Altabeh]

You mean like this?

https://fastapi.tiangolo.com/advanced/extending-openapi/#include-the-custom-docs

But this assumes that the user is always using bundle tools like Webpack in building the final script at swagger_js_url.

[gyKa]

So original problem is not how to add custom js file url, but how to build custom swagger js file?

[Altabeh]

My problem is two-fold. If I want to keep the CDN to be the provider of the main swagger js file, for obvious reasons, I need to somehow import that from an external HTTP during the build. I don't know an easy way of doing it. But, also wouldn't it be easier to inject certain small serverside scripts without having to host everything locally?

[ahmetoner]

My problem is two-fold. If I want to keep the CDN to be the provider of the main swagger js file, for obvious reasons, I need to somehow import that from an external HTTP during the build. I don't know an easy way of doing it. But, also wouldn't it be easier to inject certain small serverside scripts without having to host everything locally?

I created a repository which is called 'Fastapi Offline Swagger UI' to which is only download js and css files for offline usage. You can find here ahmetoner/fastapi-offline-swagger-ui

Install

You can install this software via pip or poetry.

pip3 install git+https://github.com/ahmetoner/fastapi-offline-swagger-ui

or pyproject.toml

[tool.poetry.dependencies]
...
fastapi-offline-swagger-ui = {git = "https://github.com/ahmetoner/fastapi-offline-swagger-ui"}

Usage Examples

After installing the module, create a python file. Copy and run following.

from fastapi import FastAPI, File, UploadFile, Query, applications
from fastapi.responses import StreamingResponse, RedirectResponse
from fastapi.staticfiles import StaticFiles
from fastapi.openapi.docs import get_swagger_ui_html
import fastapi_offline_swagger_ui

app = FastAPI()

''' This following code block necessary to switch offline cdn files via fastapi_offline_swagger_ui module
'''
assets_path = fastapi_offline_swagger_ui.__path__[0]
if path.exists(assets_path + "/swagger-ui.css") and path.exists(assets_path + "/swagger-ui-bundle.js"):
    app.mount("/assets", StaticFiles(directory=assets_path), name="static")
    def swagger_monkey_patch(*args, **kwargs):
        return get_swagger_ui_html(
            *args,
            **kwargs,
            swagger_favicon_url="",
            swagger_css_url="/assets/swagger-ui.css",
            swagger_js_url="/assets/swagger-ui-bundle.js",
        )
    applications.get_swagger_ui_html = swagger_monkey_patch

Live Example

Alternatively you can browse ahmetoner/whisper-asr-webservice repository to see how it is implemented.