Creating web applications with FastAPI is a lot of fun. One essential thing you need to handle is serving static files like JavaScript, CSS, and images. FastAPI makes this super easy with its StaticFiles middleware. Let’s dive into how you can do this efficiently.
First off, setting up your project structure is key. Imagine your project looking something like this:
├── app
│ ├── __init__.py
│ ├── main.py
└── static
├── js
│ └── script.js
├── css
│ └── styles.css
└── images
└── logo.png
So, the static directory will house your JavaScript, CSS, and image files.
To serve these static files, you’ll need to configure your FastAPI application. Here’s the magic code:
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
In this snippet, app.mount("/static", StaticFiles(directory="static"), name="static") essentially mounts your static directory at the /static path. This means you can now access files in the static directory via URLs like /static/js/script.js and so on.
The directory parameter pinpoints where your static files are stored (here it’s "static"), and the name is just an internal identifier for FastAPI, set to "static" in this example.
Sometimes, you might need to serve specific files that aren’t in a fixed static directory. That’s where FileResponse comes in handy:
from fastapi import FastAPI, FileResponse
app = FastAPI()
@app.get("/index", response_class=FileResponse)
async def index():
return FileResponse("static/index.html", headers={"Cache-Control": "no-cache"})
This snippet shows how to serve an index.html file directly using FileResponse. It’s perfect when you want more control over serving specific files.
If you’re dealing with a Single Page Application (SPA), handling 404 errors and redirecting users to your index.html file is pretty common. Check out this middleware trick:
from fastapi import FastAPI, Request, Response
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
app = FastAPI()
STATIC_FILES_DIR = "./static/"
index_file = FileResponse(STATIC_FILES_DIR + "index.html", headers={"Cache-Control": "no-cache"})
@app.middleware("http")
async def add_default_404(request: Request, call_next):
response = await call_next(request)
if response.status_code == 404:
return index_file
else:
return response
app.mount("/", StaticFiles(directory=STATIC_FILES_DIR, html=True), name="index")
In this setup, the middleware intercepts requests, checks for 404 errors, and redirects to the index.html if one occurs. This keeps your SPA functioning smoothly, even when users stumble upon non-existent routes.
Let’s piece it all together with a simple example. Imagine you have a web app displaying a logo and a text. Here’s how to do it:
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles
app = FastAPI()
templates = Jinja2Templates(directory="templates")
app.mount("/static", StaticFiles(directory="static"), name="static")
@app.get("/hello/{name}", response_class=HTMLResponse)
async def hello(request: Request, name: str):
return templates.TemplateResponse("hello.html", {"request": request, "name": name})
Your hello.html template would look something like this:
<html>
<body>
<h2>Hello {{ name }}. Welcome to FastAPI</h2>
<img src="{{ url_for('static', path='images/logo.png') }}" alt="" width="300">
</body>
</html>
When you run your FastAPI app and head over to http://localhost/hello/Vijay, you’ll see the logo and a personalized greeting.
Now, when it’s time to deploy your FastAPI app, ensure that your static files are served correctly. This usually means making sure your directory paths are set up properly based on your deployment environment.
So, serving static files in FastAPI? Absolutely straightforward. With the StaticFiles middleware, including your frontend assets in the application becomes a breeze. Whether you’re building a simple site or a complex SPA, FastAPI’s got your back for handling static files effortlessly.
