DEV Community: FastapiTutorial-com

Serving Static Files in FastAPI

FastapiTutorial-com — Fri, 16 Apr 2021 16:22:05 +0000

Ok, the navbar was good, but something is missing,our brand logo, no? In this post, we will be adding an image/logo to our navbar. Before that lets understand static and media files in a hurry. When we fill a form, say a form that asks for an image upload from a computer. Then the image uploaded by us is called a media.
But when a webpage shows us an image or provides CSS, js file to the browser, it's a static file. Ok, now lets add a our logo to navbar. For serving static files, we will make use of a library named aiofiles. Lets add this to our requirements.txt file.

fastapi
uvicorn


#for template
jinja2


#for static files
aiofiles

Now, install aiofiles with pip install -r requirements.txt. Now, since this static files configuration is not specific for a particular route, I am going to modify our main.py file to support static files.

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles #new
from core.config import settings
from apis.general_pages.route_homepage import general_pages_router


def include_router(app):
    app.include_router(general_pages_router)


def configure_static(app):  #new
    app.mount("/static", StaticFiles(directory="static"), name="static")


def start_application():
    app = FastAPI(title=settings.PROJECT_NAME,version=settings.PROJECT_VERSION)
    include_router(app)
    configure_static(app) #new
    return app

app = start_application()

Basically, we are informing fastapi that we are going to keep all our static files in a folder named 'static' and whenever it has to search for a static file, say an image, don't search here and there. It will be inside static folder only.

Ok, this part is complete, now lets put an image in the path static > images > logo.png.

backend/
├─apis/
│ └─general_pages/
│   └─route_homepage.py
├─core/
│ └─config.py
├─main.py
├─requirements.txt
├─static/         #new
│ └─images/       #new
│   └─logo.png    #new
└─templates/
  ├─components/
  │ └─navbar.html
  ├─general_pages/
  │ └─homepage.html
  └─shared/
    └─base.html

To include a static file in template we make use of url_for template tag. e.g.

<img src="{{ url_for('static', path='images/jb.png') }}" alt="" width="30" height="24"> 

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

Ok, now let's modify our navbar.html file to have a brand image.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="{{ url_for('static', path='images/logo.png') }}" alt="" width="30" height="24">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Now, you should have a logo in the navbar. e.g. the image named 'JB' in this case in the bottom left.

Final git commit : https://github.com/nofoobar/JobBoard-Fastapi/commit/119ccd1d2b1d29c493389c9a67a64471116c80ab.

FastAPI Startup and Shutdown Events

FastapiTutorial-com — Fri, 16 Apr 2021 15:22:27 +0000

"Currently in our start_application function in main.py, We are just trusting that our database would be connected and in case the required tables are missing then those tables will be created." But as a developer it is our responsibility to handle the corner cases. We should verify database accessibility as well as if we can execute a query or not.

Let's Implement a logic that runs every time our server reloads and verifies if the database connection is working or not. We are adopting some async logic from now on, lets add these 2 modules in our requirements.txt file and do a pip install -r requirements.txt.

#Databases gives asyncio support for a range of databases.
databases
asyncpg  #For postgres async support

Now, We will be creating a startup event, This event runs after our app is initialized. Since we are making an async function so we need to add async keyword before the def keyword and we need to await the results of async tasks inside this function. In very simple words async tasks are used to resolve blocking requests. It's like if you are copying 80GB of files from your laptop to hard disk, In the meantime you can do other tasks also,You need not sit down and wait for copying to complete. Let's put this async function in our main.py file.

...
from fastapi.staticfiles import StaticFiles
from db.utils import check_db_connected             #new
...


def start_application():
    app = FastAPI(title=settings.PROJECT_NAME, version=settings.PROJECT_VERSION)
    ...


app = start_application()


@app.on_event("startup")              #new
async def app_startup():
    await check_db_connected()

and our check_db_connected function in db > utils.py would be:

import databases
from db.session import SQLALCHEMY_DATABASE_URL

async def check_db_connected():
    try:
        if not str(SQLALCHEMY_DATABASE_URL).__contains__('sqlite'):
            database = databases.Database(SQLALCHEMY_DATABASE_URL)
            if not database.is_connected:
                await database.connect()
                await database.execute("SELECT 1")
        print("Database is connected (^_^)")
    except Exception as e:
        print("Looks like there is some problem in connection,see below traceback")
        raise e

# Note for sqlite it might not work, reason:
# For newer version of sqlalchemy (1.3.24 +), We might get 'RowProxy ImportError', It is not recommended to move backward as sqlalchemy newer versions are supporting async while 1.3.* versions are not async compatible.

Done, now every time our unicorn server reloads, the startup event would check if the database is connected or not as well as if we can execute a query or not? See the below image for reference.

Serving HTML with FastAPI

FastapiTutorial-com — Fri, 02 Apr 2021 12:15:33 +0000

This is a part of my series on FastAPI. The complete series is available at : https://www.fastapitutorial.com/blog/fastapi-course/

I have a habit of developing monolithic web apps for a long time. So, if I don't see anything on the UI, it doesn't look good to me. So, what I am going to do next is to implement a navbar and a simple message on our homepage. I know FastAPI follows API first approach but just to satisfy my cravings I am going to serve a template in UI. The other thing is if someone hits our home/index endpoint they won't understand anything. So, the template is necessary. The second point I wrote just to justify me to myself !!
We will be using Jinja as our templating language. Before that, we need to make some folders and files. Notice the below folder structure of mine, the names 'apis/', 'templates/' are ending with a '/', so these are folders and others are simple .py or .html files. I have added a comment '#new' for the new files and folders that need to be created.

learning_fastapi/
├─.gitignore
└─backend/
  ├─apis/  #new
  │ └─general_pages/ #new
  │   └─route_homepage.py  #new file
  ├─core/
  │ └─config.py
  ├─main.py
  ├─requirements.txt
  └─templates/  #new
    ├─components/  #new folder
    │ └─navbar.html  #new
    ├─general_pages/  #new folder
    │ └─homepage.html  #new
    └─shared/   #new
      └─base.html   #new

Now, enter the below lines in 'route_homepage.py'.

#route_homepage.py

from fastapi import APIRouter
from fastapi import Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates


templates = Jinja2Templates(directory="templates")
general_pages_router = APIRouter()


@general_pages_router.get("/")
async def home(request: Request):
    return templates.TemplateResponse("general_pages/homepage.html",{"request":request})

We imported the necessary modules.
We created an object of Jinja2Templates and instantiated it with directory/folder name templates. So, now Jinja2 understands that it has to search for HTML files inside the templates folder.
We created an instance of APIRouter named general_pages_router. But why? We could have kept all this code in the main.py file but as our codebase grows we will find it to be messy. So, we are trying to keep our codebase clean from the beginning and so, we are utilizing the APIRouter of fastapi.
Next is a home function, we have made it async but don't concentrate too much on it. We will learn it later. It is not necessary for this function. In this function, we are basically capturing the actual request and returning an HTMLResponse with the request in a dictionary. This dictionary is called a context dictionary.
Always ask why and also we need to find answers to why. Why are we capturing request and passing it in the context dictionary. The answer lies in request only, If we add a print statement print(dir(request)) ,we see that request has many important attributes like 'user','cookies', 'form', 'get', 'headers', 'path_params', 'query_params', ' 'url','url_for','values' which might be used in templates. E.g. It is very common to use request.user in template file. Next, we need to concentrate on homepage.html. Copy the below code in this file.

{% extends "shared/base.html" %}


{% block title %} 
  <title>Job Board</title>
{% endblock %} 

{% block content %} 
  <div class="container">
    <h1 class="display-4">Find Jobs...</h1>
  </div>
{% endblock %}

I am using template inheritance here. Basically, there is some base.html file that has some empty blocks/space. We are asking jinja to find the base.html file and insert the code in the block of homepage to block inside base.html.
But why am I complicating all of this? This I am doing to follow the DRY(Don't Repeat Yourself) principle. There are some common lines which we don't need to write again and again. Consider bootstrap cdn links, we are going to use bootstrap for all the html, So, why to keep these links on all the pages. So, we have base.html which will be shared by other HTML files. This is our base.html file.

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="nofoobar.com" content="Nofoobar">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    {% block title %}
    {% endblock %}
</head>

<body>
    {% block content %}
    {% endblock %}

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    {% block scripts %}
    {% endblock %}


</body>
</html>

Done? No! there are still some things left. One is our main.py file has app, which does not know about all of these. So, we are going to inform our main.py file to include this general_pages_router.

#main.py 

from fastapi import FastAPI
from core.config import settings
from apis.general_pages.route_homepage import general_pages_router


def include_router(app):
    app.include_router(general_pages_router)


def start_application():
    app = FastAPI(title=settings.PROJECT_NAME,version=settings.PROJECT_VERSION)
    include_router(app)
    return app 


app = start_application()

Ok, one last thing, I promise last. We don't have Jinja2, So, add the below line in requirements.txt:

fastapi
uvicorn


#for template  #new
jinja2

Now, install Jinja2 like with pip install -r requirements.txt. All done, not start the server with uvicorn main:app --reload and visit http://127.0.0.1:8000/. You should see a template response as: