Serving static files in FastAPI - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when accessing a static file URL?

Given this FastAPI app code, what will be the HTTP response status code when accessing /static/example.txt if the file exists in the static folder?

FastAPI

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

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

A 500 Internal Server Error

B 200 OK with the contents of example.txt

C 302 Redirect to /static/

D 404 Not Found error

💡 Hint

Think about what happens when a static file exists and is served by StaticFiles.

When a file exists in the mounted static directory, FastAPI serves it with a 200 OK status and the file content.

📝 Syntax

intermediate

Which option correctly mounts a static directory in FastAPI?

Select the code snippet that correctly mounts the 'assets' folder at the URL path '/assets' using FastAPI.

A app.mount("/assets", StaticFiles(directory="assets"))

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

C app.mount("/assets", StaticFiles(directory="assets"), name="assets")

D app.mount("/assets", StaticFiles(path="assets"), name="assets")

💡 Hint

Check the parameter names and URL path format.

The mount method requires the URL path starting with a slash and the directory parameter to specify the folder.

🔧 Debug

advanced

Why does this FastAPI app return 404 for static files?

Consider this code snippet: from fastapi import FastAPI from fastapi.staticfiles import StaticFiles app = FastAPI() app.mount("/static", StaticFiles(directory="static_files"), name="static") The folder 'static_files' exists and contains 'image.png'. Accessing '/static/image.png' returns 404. What is the most likely cause?

A StaticFiles requires an absolute path, not a relative one.

B The file 'image.png' is not readable by the server.

C The app must include a route to serve static files explicitly.

D The folder name 'static_files' is incorrect or misspelled.

💡 Hint

Check the folder name and path carefully.

If the folder name given to StaticFiles does not match the actual folder name, FastAPI cannot find the files and returns 404.

❓ state_output

advanced

What happens if you mount two static directories on the same path?

Given this FastAPI code: app.mount("/static", StaticFiles(directory="static1"), name="static1") app.mount("/static", StaticFiles(directory="static2"), name="static2") What will be the behavior when accessing '/static/file.txt'?

A The second mount overrides the first; files served from 'static2'.

B Files are served from both directories merged together.

C FastAPI raises an error on app startup due to duplicate mounts.

D Files are served from 'static1' only; second mount ignored.

💡 Hint

Think about how mounting the same path twice works.

Mounting the same path twice causes the second mount to override the first one, so files come from the second directory.

🧠 Conceptual

expert

Which statement about FastAPI StaticFiles is true?

Choose the correct statement about serving static files with FastAPI's StaticFiles.

A StaticFiles automatically sets correct MIME types based on file extensions.

B StaticFiles requires manual setting of Content-Type headers for each file.

C StaticFiles can only serve files from the root directory of the project.

D StaticFiles disables caching by default to always serve fresh files.

💡 Hint

Think about how web servers handle file types.

StaticFiles uses Starlette's implementation which sets MIME types automatically based on file extensions.

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