static files & frontend

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Default documentation uses Swagger UI and ReDoc from CDN

FastAPI's API documentation uses Swagger UI and ReDoc by default. Each requires JavaScript and CSS files, which are served from a Content Delivery Network (CDN) by default. This can be customized to use a different CDN or to self-host the files.

Disable automatic documentation by setting URLs to None

To disable automatic documentation and use custom documentation, set the documentation URLs to None when creating the FastAPI app. This is done by passing None for swagger_ui_url, redoc_url, and related parameters to the FastAPI constructor.

Custom CDN configuration for Swagger UI

When creating custom documentation path operations for Swagger UI, use the following parameters: openapi_url (the URL to retrieve the OpenAPI schema), title (API title), oauth2_redirect_url (can use app.swagger_ui_oauth2_redirect_url), swagger_js_url (custom CDN URL for the JavaScript file), and swagger_css_url (custom CDN URL for the CSS file).

Download Swagger UI static files

Swagger UI requires two files to be downloaded: swagger-ui-bundle.js (from https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui-bundle.js) and swagger-ui.css (from https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui.css).

Download ReDoc static file

ReDoc requires one file to be downloaded: redoc.standalone.js (from https://cdn.jsdelivr.net/npm/redoc@2/bundles/redoc.standalone.js).

Mount StaticFiles to serve documentation assets

To serve static documentation files, import StaticFiles from fastapi.staticfiles and mount a StaticFiles() instance at a specific path in the FastAPI application. This allows the application to serve the downloaded JavaScript and CSS files locally.

Project structure for self-hosted static files

When self-hosting documentation static files, create a static/ directory in the project root. Download the required files (swagger-ui-bundle.js, swagger-ui.css, redoc.standalone.js) and place them in the static/ directory.

Custom CDN use case: restricted URLs

Using a custom CDN or self-hosting documentation files can be useful when certain URLs are restricted in the user's country or region, allowing the API documentation to function in environments with network restrictions.

Self-hosted documentation for offline functionality

Self-hosting JavaScript and CSS files for documentation allows the API to function offline without internet access or in local networks, making the documentation accessible even when internet connectivity is not available.

Give your agent this brain