How to Serve a Specific HTML File in FastAPI Root Path While Using StaticFiles

When using FastAPI along with StaticFiles to serve static files, you might encounter scenarios where you want to load a different HTML file (e.g., custom.html) in the root path instead of the default index.html. This can be achieved by understanding certain aspects of FastAPI's routing and StaticFiles functionality.

Understanding StaticFiles

As per Starlette's documentation, StaticFiles is a middleware that handles serving static files from a specified directory. When html=True is set, it automatically looks for index.html files in directories and serves them accordingly.

Mounting Order

The order of mounting StaticFiles and defining your endpoints plays a crucial role. If StaticFiles is mounted to the root path (i.e., /) and defined before any endpoints, it will take precedence and handle all requests, even if custom endpoints are defined later.

Customizing the Root Path

To serve a specific HTML file in the root path, you need to follow these steps:

1. Mount StaticFiles to a separate path (e.g., /static):

   app.mount('/static', StaticFiles(directory='static'))

2. Create a custom endpoint that returns the desired HTML file:

   @app.get('/')
   async def index():
       return FileResponse('custom.html')

3. Mount StaticFiles after defining the custom endpoint to ensure endpoint precedence.

Additional Considerations

• Ensure that custom.html is located in the correct directory specified in the StaticFiles mount path.
• Understand that if StaticFiles handles a request and does not find a file with the requested path, it will return a 404 Not Found response.
• Using Templates instead of FileResponse provides more flexibility for dynamically updating HTML files.