Currently, We just have a navbar, and we are able to serve templates and static files as discussed in the FastAPI Course.

That's all !, we do have an API but the reality is most of our users want to visit a site e.g. www.example.com and want to see a list of available jobs. I have never seen my friends firing up postman and making a get request to API to fetch a list of jobs!
That's why we want to convert our project to have a web app version as well.

There are several architectures for creating a webapp. Some people use MVT(Model-View-Template),some use View-Model architecture, there are hundreds of different architecture. Since, we are familiar with the routing method that we were using to build apis, I will stick to the same routing structure. We do need to create some new files and folders to hold our webapp.

backend/
├─.env
├─apis/
│ ├─base.py   # Needs modification, we will remove general_pages_router, webapp will serve homepage
│ └─version1/
│   ├─route_jobs.py
│   ├─route_login.py
│   └─route_users.py
│   └─route_general_pages.py     #no longer needed, we will use its content in webapp
├─core/
├─db/
│ ├─base.py
│ ├─base_class.py
│ ├─models/
│ ├─repository/
│ ├─session.py
│ └─utils.py
├─main.py
├─requirements.txt
├─schemas/
├─sql_app.db
├─static/
├─templates/
├─tests/
├─test_db.db
└─webapps/   #new dir
  ├─base.py  #new file
  └─jobs/    #new dir
     └─route_jobs.py    #new file

Currently, this navbar/homepage is served by api > route_general_pages.py  but since it is not really an api, I will be moving it inside webapps > jobs > route_jobs.py. Copy the below lines to webapps > jobs > route_jobs.py

from fastapi import APIRouter
from fastapi import Request,Depends
from fastapi.templating import Jinja2Templates
from sqlalchemy.orm import Session

from db.repository.jobs import list_jobs
from db.session import get_db



templates = Jinja2Templates(directory="templates")
router = APIRouter(include_in_schema=False)


@router.get("/")
async def home(request: Request,db: Session = Depends(get_db)):
    jobs = list_jobs(db=db)
    return templates.TemplateResponse(
        "general_pages/homepage.html", {"request": request,"jobs":jobs}
    )

Since, It is not an API, It does not makes much sense to see the result of this router in the OpenAPI documentation. That's why we have made include_in_schema = False. This home route makes use of our pre-existing repository to fetch list of jobs from the database. It could have been better, If we were able to use the JSON response only to make the homepage because this route is duplication of our pre-existing API route to fetch list of jobs.
Add the following lines in webapps > base.py

from webapps.jobs import route_jobs
from fastapi import APIRouter


api_router = APIRouter()
api_router.include_router(route_jobs.router, prefix="", tags=["job-webapp"])

Remove the file apis > version1 > route_general_pages.py. and modify the file apis > base.py

# Removed general_pages_router part from this file (apis > base.py)

from apis.version1 import route_jobs
from apis.version1 import route_login
from apis.version1 import route_users
from fastapi import APIRouter


api_router = APIRouter()
api_router.include_router(route_users.router, prefix="/users", tags=["users"])
api_router.include_router(route_jobs.router, prefix="/jobs", tags=["jobs"])
api_router.include_router(route_login.router, prefix="/login", tags=["login"])

Still, our fastapi app in main.py file has no idea about any of these changes. So, we need to inform in main.py file.

from apis.base import api_router
from webapps.base import api_router as web_app_router #new


def include_router(app):
    app.include_router(api_router)
    app.include_router(web_app_router)  #new

FastAPI should be able to serve the homepage with the navbar again.