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.

Practice

1. What is the main purpose of using StaticFiles in a FastAPI application?

easy

A. To serve images, CSS, and JavaScript files to users

B. To handle database connections

C. To create API endpoints for data processing

D. To manage user authentication

Solution

1. Step 1: Understand StaticFiles role

   StaticFiles is used to serve static content like images, CSS, and JavaScript files in FastAPI.

2. Step 2: Compare with other options

   Database handling, API endpoints, and authentication are unrelated to static file serving.

3. Final Answer:

   To serve images, CSS, and JavaScript files to users -> Option A

4. Quick Check:

   StaticFiles serves static content = A [OK]

Hint: StaticFiles always serves static content like images or CSS [OK]

Common Mistakes:

• Confusing StaticFiles with API route handlers
• Thinking StaticFiles manages databases
• Assuming StaticFiles handles user login

2. Which of the following is the correct way to mount a static folder named 'assets' at URL path '/static' in FastAPI?

easy

A. app.route('/static').static_files('assets')

B. app.mount('/static', StaticFiles(directory='assets'), name='static')

C. app.add_static('/static', 'assets')

D. app.static('/assets', directory='/static')

Solution

1. Step 1: Recall FastAPI static file syntax

   The correct method is app.mount(path, StaticFiles(directory=folder), name=alias).

2. Step 2: Match syntax with options

   app.mount('/static', StaticFiles(directory='assets'), name='static') matches this pattern exactly, mounting 'assets' at '/static'. Others use invalid methods.

3. Final Answer:

   app.mount('/static', StaticFiles(directory='assets'), name='static') -> Option B

4. Quick Check:

   Use app.mount with StaticFiles = D [OK]

Hint: Use app.mount with StaticFiles and directory parameter [OK]

Common Mistakes:

• Using app.static or app.add_static which don't exist
• Swapping URL path and directory names
• Omitting the name parameter

3. Given this FastAPI code snippet:

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()
app.mount('/files', StaticFiles(directory='myfiles'), name='files')

What URL path should you visit in a browser to access a file named image.png inside the myfiles folder?

medium

A. /myfiles/image.png

B. /static/image.png

C. /files/image.png

D. /image.png

Solution

1. Step 1: Identify mount path and directory

   The static files are mounted at URL path '/files' serving from folder 'myfiles'.

2. Step 2: Construct URL for file

   To access 'image.png' inside 'myfiles', visit '/files/image.png' in the browser.

3. Final Answer:

   /files/image.png -> Option C

4. Quick Check:

   URL path matches mount path + filename = B [OK]

Hint: URL path equals mount path plus file name [OK]

Common Mistakes:

• Using directory name as URL path instead of mount path
• Assuming '/static' is default path
• Trying to access file without mount prefix

4. What is wrong with this FastAPI code for serving static files?

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

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

medium

A. The URL path '/static' is invalid

B. app.mount cannot be used for static files

C. The name parameter is missing

D. Nothing is wrong with this code

Solution

1. Step 1: Check StaticFiles usage

   StaticFiles('static') is correct because the first positional argument binds to the directory parameter.

2. Step 2: Validate other parts

   app.mount is correct for static files, name parameter is present, and '/static' is a valid URL path.

3. Final Answer:

   Nothing is wrong with this code -> Option D

4. Quick Check:

   StaticFiles('static') correctly sets directory='static' = A [OK]

Hint: StaticFiles accepts positional argument for directory [OK]

Common Mistakes:

• Thinking StaticFiles requires named directory parameter
• Thinking app.mount can't serve static files
• Confusing URL path with directory name

5. You want to serve two different static folders in your FastAPI app: 'images' at '/img' and 'scripts' at '/js'. Which code correctly mounts both folders?

hard

A. app.mount('/img', StaticFiles(directory='images'), name='images')
app.mount('/js', StaticFiles(directory='scripts'), name='scripts')

B. app.mount('/images', StaticFiles(directory='img'), name='img')
app.mount('/scripts', StaticFiles(directory='js'), name='js')

C. app.static('/img', 'images')
app.static('/js', 'scripts')

D. app.add_static('/img', 'images')
app.add_static('/js', 'scripts')

Solution

1. Step 1: Verify correct mount syntax

   Use app.mount(path, StaticFiles(directory=folder), name=alias) for each static folder.

2. Step 2: Match folders and paths

   app.mount('/img', StaticFiles(directory='images'), name='images') app.mount('/js', StaticFiles(directory='scripts'), name='scripts') correctly mounts 'images' at '/img' and 'scripts' at '/js'. Options A, B, D use wrong paths or invalid methods.

3. Final Answer:

   app.mount('/img', StaticFiles(directory='images'), name='images') app.mount('/js', StaticFiles(directory='scripts'), name='scripts') -> Option A

4. Quick Check:

   Mount each folder with app.mount and StaticFiles = C [OK]

Hint: Mount each folder separately with app.mount and StaticFiles [OK]

Common Mistakes:

• Swapping folder names and URL paths
• Using non-existent app.static or app.add_static methods
• Missing name parameter in mount