Airflow front-end is broken in local development environment

[Prashant15887]

Hi all. I am running a local development environment of Apache Airflow 2.10.4 in my Mac laptop. Its frontend is broken like runs are not getting populated, links to DAG and task run details, logs and charts are not populating. I had built the front-end assets in www/static directory following the INSTALL instructions.

yarn install --frozen-lockfile
yarn run build

The webserver logs show a lot of 404 status codes for CSS and JS files. These files are preset in (AIRFLOW_HOME/www) /static/css or /static/js directory. However, the webserver log shows that Airflow is looking for these files in /static directory. The paths for these files seem to be correctly configured in webpack.config.js, tsconfig.json and jest.config.js. I am wondering if the Airflow code on my machine is skipping these config files for some reason. The full webserver log is present here.

127.0.0.1 - - [16/Feb/2025:00:59:45 +0530] "GET /static/flash.css HTTP/1.1" 404 456 "http://localhost:8080/home" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36"
127.0.0.1 - - [16/Feb/2025:00:59:45 +0530] "GET /static/moment.js HTTP/1.1" 404 456 "http://localhost:8080/home" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36"

Appreciate any guidance on how to debug the issue further.

[potiuk]

The build should result with dist folder - and you utilize pre-commit run --hook-stage manual compile-www-assets --all-files if you build airflow from sources. Possibly your build failed for some reason or you have wrong version of tools, pre-commit - once you install it - should install and use the right version of those tools

[Prashant15887]

Thanks a lot. Let me try this out.

[Prashant15887]

I had skipped the build-using-Hatch steps from the Install instructions because of which my frontend build was giving more problems. Went and installed Hatch, ran pre-commit and then hatch build. UI appears to be working fine now. Thanks a lot!

[potiuk]

Cool. Glad I could help - this is why pre-commit is cool as it does not make assumptions about what is instaled and what not, it will automatically and install the tooling precisely with the right version of node and other tools needed.

I am happy we thought about it and I could point you to the right instructions.