[Python] How to render CSS/JS/Images along with HTML file in FastAPI?

I am facing an issue while rendering the HTMl file in FastAPI.

main.py file

static_dir = os.path.join(os.path.dirname(__file__), "static")
app.mount("/",StaticFiles(directory=static_dir, html=True),name="static")

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


While running the above file using uvicorn I am able to render the HTML file at http://127.0.0.1:8765/, but the static files, such as css, js and images, are not getting rendered.

index.html: some code of HTML File (which is build from Angular JS)

<link rel="stylesheet" href="styles.87afad25367d1df4.css" media="print" onload="this.media='all'"><noscript>
<link rel="stylesheet" href="styles.87afad25367d1df4.css"></noscript></head>
<body class="cui">
test
<app-root></app-root>
<script src="runtime.7f95ee6540776f88.js" type="module"></script>
<script src="polyfills.a246e584d5c017d7.js" type="module"></script>
<script src="main.4f51d0f81827a3db.js" type="module"></script>

</body></html>


File Structure:

modulename
- static
- index.html
- styles.87afad25367d1df4.css
- runtime.7f95ee6540776f88.js
- polyfills.a246e584d5c017d7.js
- main.4f51d0f81827a3db.js

- main.py
- __init__.py


When I open the browser console it show like below:

The CSS/js should be render without static included in it e.g. http://127.0.0.1:8765/styles.87afad25367d1df4.css but it run on browser it loads from http://127.0.0.1:8765/static/styles.87afad25367d1df4.css.

I am not sure how to fix this any help will be appreciated.

Update: Adding below code to explain it better

main.py

import uvicorn
import os
import webbrowser
from fastapi import FastAPI
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import HTMLResponse

app = FastAPI(
title="UI",
description="This is to test",
)

app.add_middleware(
CORSMiddleware,
allow_origins=['*'],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)

static_dir = os.path.join(os.path.dirname(__file__), "static")
app.mount("/",StaticFiles(directory=static_dir, html=True),name="static")

def start_server():
# print('Starting Server...')

uvicorn.run(
"ui.main:app",
host="0.0.0.0",
port=8765,
log_level="debug",
reload=True,
)
# webbrowser.open("http://127.0.0.1:8765/")

if __name__ == "__main__":
start_server()


Running this file as package/module in test.py file:

from ui import main

if __name__ == "__main__":
main.start_server()


index.html:

<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>WingmanUi</title>
<base href="static/">
<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.87afad25367d1df4.css" media="print" onload="this.media='all'">
</head>
<body>
This is to test
<script src="runtime.7f95ee6540776f88.js" type="module"></script>
<script src="polyfills.a246e584d5c017d7.js" type="module"></script>
<script src="main.4f51d0f81827a3db.js" type="module"></script>

</body>
</html>


File structure:

ui
- static
- index.html
- styles.87afad25367d1df4.css
- runtime.7f95ee6540776f88.js
- polyfills.a246e584d5c017d7.js
- main.4f51d0f81827a3db.js

- main.py
- __init__.py

Continue reading...