Server-Side Scripting/Routes and Templates/Python (FastAPI)

main.py

# Demonstrates a complete server-side website using:
#   * static HTML and CSS
#   * a code module
#   * a template
#
# NOTE: Router pages (.py) must be placed in a folder named "routers".
# Static pages (html, css, images, etc.) must be placed in a folder named
# "static". Template pages must be placed in a folder named "templates".
#
# Folder structure:
# main.py
# routers
#   lesson1.py
#   lesson2.py
# static
#   index.html
#   hello.html
#   styles.css
# templates
#   lesson2.html
#
# References:
#   https://fastapi.tiangolo.com/tutorial/bigger-applications/
#   https://fastapi.tiangolo.com/tutorial/static-files/

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
import uvicorn

from routers import lesson1, lesson2

app = FastAPI()
app.include_router(lesson1.router)
app.include_router(lesson2.router)

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

if __name__ == "__main__":
    uvicorn.run("main:app", host="0.0.0.0", port=5000)

routers/lesson1.py

# Displays "Hello world!"
#
# References:
#   https://en.wikiversity.org/wiki/Flask/Hello_World
#   https://fastapi.tiangolo.com/tutorial/first-steps/
#   https://fastapi.tiangolo.com/advanced/custom-response/
#   https://fastapi.tiangolo.com/tutorial/bigger-applications/

from fastapi import APIRouter
from fastapi.responses import HTMLResponse

router = APIRouter(prefix="/lesson1")

@router.get("/", response_class=HTMLResponse)
async def get_lesson1():
    return "Hello code world!"

routers/lesson2.py

# Displays "Hello template world!"
#
# References:
#   https://en.wikiversity.org/wiki/Flask/Hello_World
#   https://fastapi.tiangolo.com/tutorial/first-steps/
#   https://fastapi.tiangolo.com/advanced/custom-response/
#   https://fastapi.tiangolo.com/advanced/templates/
#   https://fastapi.tiangolo.com/tutorial/bigger-applications/

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

router = APIRouter(prefix="/lesson2")
templates = Jinja2Templates(directory="templates")

@router.get("/", response_class=HTMLResponse)
async def get_lesson2(request: Request):
    data = {
        "greeting": "Hello",
        "name": "world"
    }
    
    return templates.TemplateResponse(
        "lesson2.html", 
        {   
            "request": request,
            "data": data
        }
    )

static/hello.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="styles.css">    
  </head>
  <body>
    <p>Hello static world!</p>
  </body>
</html>

static/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Routes and Templates</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <h1>Hello World</h1>
      <ul>
          <li><a href="hello.html">Static</a></li>
          <li><a href="lesson1/">Code</a></li>
          <li><a href="lesson2/">Template</a></li>
      </ul>
  </body>
</html>

static/styles.css

body {
    color: blue;
    font-family: Arial, Helvetica, sans-serif;
    font-size: larger;
}

templates/lesson2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Lesson 2</title>
    <link rel="stylesheet" href="{{url_for('static', path='/styles.css')}}">
  </head>
  <body>
    <p>{{data.greeting}} template {{data.name}}!</p>
  </body>
</html>

Try It

Copy and paste the code above into the following free online development environment or use your own Python (FastAPI) compiler / interpreter / IDE.

Repl.it

main.py

routers/lesson1.py

routers/lesson2.py

static/hello.html

static/index.html

static/styles.css

templates/lesson2.html

Try It

See Also