Swagger Offline Support

[xiaodiannao]

Hi everyone! When running the docs (Swagger) of FastAPI the UI is not rendered while offline.

Would it be possible to include the swagger-ui-bundle.js and swagger-ui.css files (which are currently loaded via a CDN in https://github.com/tiangolo/fastapi/blob/4cea311e6ef112edfa1e42fde2f63b6ab2d7e413/fastapi/openapi/docs.py) in the project so those resources are available offline as well?

Best regards

[svalouch]

Hi, support for this was added in #112, but the documentation is missing for it. I've created #557 for it, documenting the way it works for me at least. As stated in the PR, I'm not sure if it is the easiest way, though.

[xiaodiannao]

@svalouch oh yea you're absolutely right, it's already implemented. Thanks for mentioning it and they should include your example, works as advertised! Cheers

[obalenko]

Hi @svalouch. Tried to use your example and can't figure out why I'm getting 404 not found while the current files are under /static/ directory.

INFO: ('192.168.30.10', 45654) - "GET /amm/docs HTTP/1.1" 200
INFO: ('192.168.30.10', 45654) - "GET /static/swagger-ui.css HTTP/1.1" 404
INFO: ('192.168.30.10', 45656) - "GET /static/swagger-ui-bundle.js HTTP/1.1" 404

[obalenko]

Just in case that it may be helpful for someone. We need to mount static folder to make our files visible.

from starlette.staticfiles import StaticFiles
........
app.mount("/static", StaticFiles(directory="static"))

[tiangolo]

Thanks for the help here everyone! 👏 🙇

Thanks for reporting back and closing the issue 👍

The new docs are here: https://fastapi.tiangolo.com/advanced/extending-openapi/#self-hosting-javascript-and-css-for-docs

[abrouziyne]

I have used the instructions with the example of sub-applications in https://fastapi.tiangolo.com/advanced/sub-applications/, but I don't get the desired result. the 1st UI is showing correctly but not the second one, 127.0.0.1/subapi/docs and if I add the instructions at the subapi level, I have a blank page

[lesourcil]

When using swagger and redoc offline and beeing behind nginx or traefik i get an error saying "Resource interpreted as Styleshet but transferred with MIME type text/html"

Any idea how to fix it ?

[turettn]

Posting here in case anyone else finds this useful...

I have the cut-and-paste from the instructions @tiangolo posted above way too many times in the past month, and finally just made a package that includes everything: https://pypi.org/project/fastapi-offline/

[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.