Serving static files in FastAPI - Step-by-Step Execution

Concept Flow - Serving static files

Start FastAPI app

↓

Mount StaticFiles at path

↓

Client requests static file URL

↓

StaticFiles checks file exists

Yes No↓

Serve file

↓

Client receives file or error

The app mounts a folder to serve files. When a client asks for a file, the server checks if it exists and sends it or returns 404.

Execution Sample

FastAPI

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")

This code sets up FastAPI to serve files from the './static' folder at the '/static' URL path.

Execution Table

Step	Client Request URL	File Exists?	Action	Response
1	/static/image.png	Yes	Serve file './static/image.png'	200 OK with file content
2	/static/style.css	Yes	Serve file './static/style.css'	200 OK with file content
3	/static/missing.js	No	Return 404 Not Found	404 Not Found error
4	/other/path	N/A	No static route matched	404 Not Found error

💡 Requests outside '/static' or for missing files return 404; existing files under '/static' are served.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
requested_url	None	/static/image.png	/static/style.css	/static/missing.js	/other/path
file_exists	N/A	True	True	False	N/A
response_status	None	200	200	404	404

Key Moments - 2 Insights

Why does requesting '/static/missing.js' return a 404 error?

Because the file does not exist in the mounted directory, as shown in execution_table step 3 where 'File Exists?' is No, so the server returns 404.

What happens if a request URL does not start with '/static'?

The static files route does not match, so FastAPI returns a 404 error, as shown in execution_table step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is the response status when requesting '/static/style.css'?

A 200 OK

B 404 Not Found

C 500 Internal Server Error

D 301 Redirect

💡 Hint

Check execution_table row 2 under 'Response' column.

At which step does the server return a 404 because the file does not exist?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at 'File Exists?' column in execution_table.

If you add a file 'logo.svg' inside './static', what would happen when requesting '/static/logo.svg'?

A Return 404 Not Found

B Serve the 'logo.svg' file with 200 OK

C Return 500 Internal Server Error

D Redirect to '/'

💡 Hint

Refer to how existing files are served in execution_table steps 1 and 2.

Concept Snapshot

Serving static files in FastAPI:
- Use app.mount(path, StaticFiles(directory=folder))
- Requests to 'path/filename' serve files from 'folder/filename'
- If file missing, returns 404 error
- Only URLs under mounted path serve static files
- Useful for images, CSS, JS in web apps

Full Transcript

This example shows how FastAPI serves static files. First, the app mounts a folder './static' at the URL path '/static'. When a client requests a URL starting with '/static', FastAPI checks if the requested file exists in the folder. If it does, the file is sent with a 200 OK response. If not, FastAPI returns a 404 Not Found error. Requests outside '/static' also return 404 because no route matches. This setup helps serve images, stylesheets, and scripts easily in web apps.