Airflow 3 UI breaks when mounted as a FastAPI sub-application due to static assets and root_path handling

[hibiki1980]

I'm encountering an issue when trying to mount Airflow 3 as a sub-application inside a FastAPI app. The Airflow UI breaks and static assets are not loaded correctly, resulting in a broken interface.

In Airflow 2, this integration worked fine by setting the webserver_url environment variable to specify the base path. However, in Airflow 3, this variable seems ignored or ineffective.

After inspecting the Airflow 3 code, particularly airflow.api_fastapi.app, I noticed that the root_path is set based on the base_url configuration. When running the Airflow webserver standalone and setting the base_url to something like /airflow, everything works as expected.

However, mounting Airflow 3 as a subapp under FastAPI at a subpath (e.g., /airflow) breaks the UI. The problem appears related to React's routing and the handling of static files under a subpath. React does not seem to respect the root_path set via base_url when the app is embedded inside another FastAPI app.

Minimal example of the FastAPI mounting:

from fastapi import FastAPI
from airflow.api_fastapi.app import create_app as create_airflow_app

app = FastAPI()

# Create the Airflow app instance
airflow_app = create_airflow_app()

# Mount Airflow under /airflow
app.mount("/airflow", airflow_app)

Any guidance or suggestions to address this would be greatly appreciated.