Serving static files in FastAPI - Mini Project: Build & Apply

Serving Static Files with FastAPI

📖 Scenario: You are building a simple web app using FastAPI. You want to serve some static files like images, CSS, or JavaScript so that users can see them in their browser.

🎯 Goal: Create a FastAPI app that serves static files from a folder called static. You will set up the data, configure the static files path, add the static files route, and complete the app so it can serve files like style.css or logo.png.

📋 What You'll Learn

Create a FastAPI app instance named app

Use StaticFiles from fastapi.staticfiles to serve files

Mount the static files directory at the URL path /static

Serve files from a folder named static in your project directory

💡 Why This Matters

🌍 Real World

Web apps often need to serve images, stylesheets, and scripts to users. Serving static files is essential for any web project.

💼 Career

Knowing how to serve static files with FastAPI is a common task for backend developers working on web applications.

1

Create FastAPI app instance

Import FastAPI from fastapi and create an app instance called app.

FastAPI

# Your code here

Need a hint?

Use app = FastAPI() to create the app instance.

2

Import StaticFiles and set static folder path

Import StaticFiles from fastapi.staticfiles and create a variable called static_folder with the string value 'static'.

FastAPI

from fastapi import FastAPI

app = FastAPI()

# Your code here

Need a hint?

Use static_folder = 'static' to set the folder name.

3

Mount static files route

Use app.mount to serve static files at the URL path /static from the folder stored in static_folder. Use StaticFiles(directory=static_folder) and set name='static'.

FastAPI

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

static_folder = 'static'

# Your code here

Need a hint?

Use app.mount('/static', StaticFiles(directory=static_folder), name='static') to serve static files.

4

Complete FastAPI app for serving static files

Ensure the full code includes importing FastAPI and StaticFiles, creating app, setting static_folder, and mounting the static files route at /static.

FastAPI

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

static_folder = 'static'

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

# Your code here

Need a hint?

Check that all parts are included to serve static files correctly.