Home > Article > Backend Development > 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!