Static files — CSS, JS, images

Mount a directory as a static file server. Files are served as-is, no processing.

main.py v3.1

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()

# Mount a directory at a URL prefix
# Files in app/static/ are served at /static/
app.mount('/static', StaticFiles(directory='app/static'), name='static')

templates = Jinja2Templates(directory='app/templates')

@app.get('/', response_class=HTMLResponse)
async def home(request):
    return templates.TemplateResponse('home.html', {'request': request})

# app/templates/home.html:
"""
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/static/style.css">
</head>
<body>
  <h1>Hello</h1>
  <script src="/static/app.js"></script>
</body>
</html>
"""

# app/static/style.css:
"""
body { font-family: sans-serif; margin: 2rem; }
h1 { color: #a0c000; }
"""

# app/static/app.js:
"""
console.log('Page loaded');
document.querySelector('h1').addEventListener('click', () => {
  alert('You clicked the h1!');
});
"""

# Now /static/style.css, /static/app.js are accessible.
# The browser can fetch them via <link> and <script> tags.

API simulator click Simulate

Click "Simulate" to see what this FastAPI app does.

🧠 How it works

app.mount('/prefix', StaticFiles(directory='path'), name='static') — serves every file in 'path' at '/prefix/filename'. The directory path is RELATIVE TO your CWD when you run uvicorn, not relative to main.py. name='static' is for URL reversing (rarely used). Files are served with the correct Content-Type based on extension (.css → text/css, .js → application/javascript). StaticFiles does NOT do any processing — what's in the file is what's served. For production: use a CDN or nginx for static files — they're faster than FastAPI. But for dev, mounting them in FastAPI is fine and convenient.

✏️ Try these changes

Change mount path from '/static' to '/assets'
→ URLs change to /assets/style.css
Add a new file app/static/logo.png and reference it with <img src="/static/logo.png">
→ image appears
Change the directory to 'static_files' and create that folder
→ files served from new location

← Previous lab

Forms — Form() instead of JSON body

Next lab →

WebSocket — real-time bidirectional