FAST API : .mount()

Back FAST API : .mount() 08 Oct, 2025

ABHISHEK AGNIHOTRI

🔹 Full Line:

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

🌐 1. What is `.mount()` in FastAPI?

In FastAPI,
app.mount() is used to attach another application or a static file directory to a specific path inside your main app.

✅ You use it when you want to serve:

Static files (images, CSS, JavaScript)
Or even another FastAPI app under a subpath

📁 2. What is `/static`?

This is the URL path prefix.

👉 It means:

Whenever a user visits a URL that starts with /static,
FastAPI will look inside the static files folder to serve that file.

Example:
If you open

http://localhost:8000/static/style.css

FastAPI will fetch the file:

BASE_DIR/static/style.css

📂 3. What is `StaticFiles(directory=...)`?

StaticFiles is a FastAPI (actually Starlette) class that helps serve static assets.

You tell it which folder holds those static files:

StaticFiles(directory=str(BASE_DIR / "static"))

Here:

BASE_DIR → your project’s main directory (usually defined earlier as BASE_DIR = Path(__file__).resolve().parent.parent)
BASE_DIR / "static" → creates a path like
D:\project_folder\static (Windows)
or
/home/user/project/static (Linux/Mac)

str() just converts that path to a string.

🏷️ 4. What is `name="static"`?

This gives the mounted app (or directory) an internal name — useful when generating URLs dynamically inside templates.

For example, in a Jinja2 template:

<link rel="stylesheet" href="{{ url_for('static', path='style.css') }}">

This will automatically generate:

/static/style.css

🎯 In short:

This line tells FastAPI:

“Mount a folder called static (inside my project) to serve files at the URL path /static.”

🧩 Visual Summary

Part	Meaning
`/static`	URL prefix where static files are accessible
`StaticFiles(directory=...)`	Points to the folder containing static files
`name="static"`	Used to reference in templates
`.mount()`	Attaches this static folder to FastAPI app

🖼️ Example Folder Structure

project/
│
├── main.py
├── templates/
│   └── index.html
└── static/
    ├── style.css
    ├── script.js
    └── logo.png

Now, visiting
👉 http://localhost:8000/static/logo.png
will show your image directly.

Real-World FastAPI usage.
Let’s break it down practically and visually 👇

🧠 Concept Recap

In FastAPI, we often use:

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

This allows our app to serve static files (like images, CSS, or JS) that don’t change dynamically.

🧩 When and Why We Use URLs Like

👉 http://localhost:8000/static/logo.png

🎯 1. When You Build a Web Page (Frontend + Backend Integration)

If your backend (FastAPI) is serving a webpage using templates like Jinja2,
you’ll often include images, CSS, or JavaScript in your HTML file.

✅ Example:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="/static/style.css">
</head>
<body>
  <h1>Welcome to My App</h1>
  <img src="/static/logo.png" alt="App Logo">
</body>
</html>

Here 👇

/static/logo.png → tells the browser to fetch the image from FastAPI’s static folder.
The server internally maps /static/... → to your local static/ directory.

💡 Why Not Just Use a Folder Path Like `C:\project\static\logo.png`?

Because the browser can’t access your local machine’s file system.
Only URLs (like /static/...) exposed by the server are accessible to the browser.

So FastAPI serves that folder content through HTTP.

🧑‍💻 2. When You’re Developing Locally

When running locally:

uvicorn main:app --reload

Your FastAPI app runs at:

http://localhost:8000

Now you can test your assets easily:

http://localhost:8000/static/logo.png
http://localhost:8000/static/style.css

This helps you verify that your website resources load properly before deployment.

🚀 3. When You Deploy the App

Once you deploy (e.g., to AWS, Render, or Vercel), the same logic holds:

https://myapp.com/static/logo.png

This path is used by:

HTML templates
CSS files importing images
JS scripts fetching icons
Or even third-party libraries referencing assets

📦 4. Typical Folder Structure

project/
│
├── main.py
├── templates/
│   └── index.html
└── static/
    ├── logo.png
    ├── style.css
    └── script.js

🧠 Summary Table

Purpose	Description
`/static/`	Public URL path for static assets
`StaticFiles(directory="static")`	Tells FastAPI which local folder to use
`logo.png`	Example file being served
`http://localhost:8000/static/logo.png`	Browser-accessible URL to fetch the file

✅ Real-world Analogy

Think of /static/ like a public counter in a store:

Your backend (FastAPI) is the store.
/static/ is the shelf where people can freely pick up flyers (images, CSS, etc.).
The templates/ directory is like the shop interior — dynamic, interactive content.