Server-Side Scripting/Routes and Templates/Python (FastAPI)
main.py edit
# 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 edit
# 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 edit
# 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 edit
<!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 edit
<!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 edit
body {
color: blue;
font-family: Arial, Helvetica, sans-serif;
font-size: larger;
}
templates/lesson2.html edit
<!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 edit
Copy and paste the code above into the following free online development environment or use your own Python (FastAPI) compiler / interpreter / IDE.