Serving static files in FastAPI - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the class needed to serve static files in FastAPI.

FastAPI

from fastapi.staticfiles import [1]

Drag options to blanks, or click blank then click option'

AStaticFiles

BFileResponse

CStaticPath

DFileStatic

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing FileResponse which is for sending single files, not mounting static directories.

Using StaticPath which does not exist.

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

2fill in blank

medium

Complete the code to mount the static files directory at the URL path '/static'.

FastAPI

app.mount("/static", [1](directory="static"), name="static")

Drag options to blanks, or click blank then click option'

AStaticFiles

BFileResponse

CStaticPath

DFileStatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using FileResponse which is for single files, not directories.

Using a non-existent class like StaticPath.

The StaticFiles instance is mounted on the app to serve files from the 'static' directory at the '/static' URL path.

3fill in blank

hard

Fix the error in the code to correctly serve static files from the 'assets' folder at '/assets'.

FastAPI

app.mount("/assets", StaticFiles(directory=[1]), name="assets")

Drag options to blanks, or click blank then click option'

Aassets

Bstatic

C"assets"

D"static"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong folder name.

Not using quotes around the folder name string.

The directory argument must be a string with the folder name. Here, it should be "assets" to match the folder.

4fill in blank

hard

Fill both blanks to create a FastAPI app that serves static files from 'public' at '/public'.

FastAPI

from fastapi import FastAPI
from fastapi.staticfiles import [1]

app = [2]()
app.mount("/public", StaticFiles(directory="public"), name="public")

Drag options to blanks, or click blank then click option'

AStaticFiles

BFastAPI

CApp

DStaticPath

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong class names like StaticPath or App.

Not calling FastAPI as a function.

You import StaticFiles to serve static files and create the app with FastAPI().

5fill in blank

hard

Fill all three blanks to serve static files from 'assets' at '/assets' with a FastAPI app.

FastAPI

from fastapi import [1]
from fastapi.staticfiles import [2]

app = [3]()
app.mount("/assets", StaticFiles(directory="assets"), name="assets")

Drag options to blanks, or click blank then click option'

AFastAPI

BStaticFiles

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up import names.

Not calling FastAPI as a function.

Import FastAPI and StaticFiles, then create the app with FastAPI().

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