How to Serve a Specific HTML File on the Root Path Using FastAPI and StaticFiles?

Serving Custom HTML Files in the Root Path of FastAPI with StaticFiles

While using FastAPI with StaticFiles, serving custom HTML files may differ from the expected behavior. The default configuration automatically loads index.html when a static file middleware is mounted to the root path. However, it's possible to override this and render a different HTML file by following these steps:

Mounting StaticFiles to a Different Path

To avoid the index.html loading issue, mount the StaticFiles instance to a unique path instead of the root. For example, mount it to /static:

app.mount(
    "/static",
    StaticFiles(directory="static", html=True),
    name="static",
)

Defining the Root Path Endpoint

Next, create a custom endpoint to handle the root path. This endpoint will return the desired custom HTML file:

@app.get("/")
async def index():
    return FileResponse("static/custom.html", media_type="html")

Order of Definitions

The order of definitions is crucial. If you mount StaticFiles before defining the root path endpoint, the StaticFiles application will handle all requests to the root path, including the one defined in the endpoint.

Example with Proper Order

Here's an example with the correct order of definitions:

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from fastapi.responses import FileResponse

app = FastAPI()

@app.get("/")
async def index():
    return FileResponse("static/custom.html", media_type="html")

app.mount(
    "/static",
    StaticFiles(directory="static", html=True),
    name="static",
)

By following these steps, you can serve custom HTML files in the root path of your FastAPI application while still using StaticFiles for serving static files.

The above is the detailed content of How to Serve a Specific HTML File on the Root Path Using FastAPI and StaticFiles?. For more information, please follow other related articles on the PHP Chinese website!