It is suggested to change the CDN of Swagger and Redoc

[haitanghuadeng]

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.

Commit to Help

• I commit to help with one of those options 👆

Example Code

https://cdn.jsdelivr.net/npm/swagger-ui-dist@4/swagger-ui.css
https://cdn.jsdelivr.net/npm/swagger-ui-dist@4/swagger-ui-bundle.js

Description

Two years later, I still have trouble loading 'Swagger' resources. First step, I looked up the article about 'FastAPI' and 'Swagger' not loading. Some friends suggest using 'CSS' and 'JavaScript' files stored in the 'static' folder of your project, And modify the Python 'Lib/site-package/fastapi/openapi/docs.py' the 'url' for the relative path. However, I don't think it's a good idea to modify your own source code.

Operating System

Windows

Operating System Details

Windows11(22H2.25120.1010)

FastAPI Version

0.78.0

Python Version

3.10.0

Additional Context

So, when I looked through the official use case of 'Swagger', I realized that it might have something to do with 'CDN'. Therefore, it is recommended to use a modified CDN. Thank you very much!
CSS Link https://unpkg.com/swagger-ui-dist@4/swagger-ui.css
JavaScript Link https://unpkg.com/swagger-ui-dist@4/swagger-ui-bundle.js

[coolmian]

Here's a quick solution

You can read #4307

Download from:
https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.52.4/swagger-ui-bundle.js
https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.52.4/swagger-ui.css

Create dir ./static/swagger-ui/ on your project, and put these files in.

Provides static file services：

from fastapi import applications
from fastapi.staticfiles import StaticFiles
from fastapi.openapi.docs import get_swagger_ui_html

app.mount("/static", StaticFiles(directory="./static"), name="static")
def swagger_monkey_patch(*args, **kwargs):
    return get_swagger_ui_html(
        *args,
        **kwargs,
        swagger_js_url="/static/swagger-ui/swagger-ui-bundle.js",
        swagger_css_url="/static/swagger-ui/swagger-ui.css",
    )
applications.get_swagger_ui_html = swagger_monkey_patch

Originally posted by @SangYuming in #4307 (comment)

[ahmetoner]

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.