From e6846932c5e30e1f2b8148c4e50a344fb9e16814 Mon Sep 17 00:00:00 2001 From: Philipp Date: Fri, 3 Oct 2025 17:45:34 +0200 Subject: [PATCH 1/6] Add materials --- fastapi-jinja2-template/README.md | 15 +++++++ fastapi-jinja2-template/main.py | 41 ++++++++++++++++++++ fastapi-jinja2-template/requirements.txt | 1 + fastapi-jinja2-template/static/script.js | 4 ++ fastapi-jinja2-template/static/style.css | 9 +++++ fastapi-jinja2-template/templates/base.html | 14 +++++++ fastapi-jinja2-template/templates/color.html | 13 +++++++ 7 files changed, 97 insertions(+) create mode 100644 fastapi-jinja2-template/README.md create mode 100644 fastapi-jinja2-template/main.py create mode 100644 fastapi-jinja2-template/requirements.txt create mode 100644 fastapi-jinja2-template/static/script.js create mode 100644 fastapi-jinja2-template/static/style.css create mode 100644 fastapi-jinja2-template/templates/base.html create mode 100644 fastapi-jinja2-template/templates/color.html diff --git a/fastapi-jinja2-template/README.md b/fastapi-jinja2-template/README.md new file mode 100644 index 0000000000..bfe173e807 --- /dev/null +++ b/fastapi-jinja2-template/README.md @@ -0,0 +1,15 @@ +# How to Serve a Website With FastAPI Using HTML and Jinja2 + +This repository contains the code discussed in the associated tutorial [Get Started With FastAPI](https://realpython.com/fastapi-jinja2-template/). + +## Installation + +The [recommended way to install FastAPI](https://realpython.com/get-started-with-fastapi/#install-fastapi-the-right-way) is with the `[standard]` extra dependencies. This ensures you get all the tools you need for developing an API without having to hunt down additional packages later: + +```console +$ python -m pip install "fastapi[standard]" +``` + +The quotes around `"fastapi[standard]"` ensure the command works correctly across different [terminals](https://realpython.com/terminal-commands/) and operating systems. With the command above, you install several useful packages, including the [FastAPI CLI](https://fastapi.tiangolo.com/fastapi-cli/) and [uvicorn](https://www.uvicorn.org/), an [ASGI](https://en.wikipedia.org/wiki/Asynchronous_Server_Gateway_Interface) server for running your application. + +You can also use the `requirements.txt` file in this folder and run `python -m pip install -r requirements.txt` to install the standard dependencies of FastAPI. diff --git a/fastapi-jinja2-template/main.py b/fastapi-jinja2-template/main.py new file mode 100644 index 0000000000..5d0d9f9cde --- /dev/null +++ b/fastapi-jinja2-template/main.py @@ -0,0 +1,41 @@ +import random +from string import hexdigits + +from fastapi import FastAPI, Request +from fastapi.responses import HTMLResponse +from fastapi.staticfiles import StaticFiles +from fastapi.templating import Jinja2Templates + +app = FastAPI() + +app.mount("/static", StaticFiles(directory="static"), name="static") +templates = Jinja2Templates(directory="templates") + + +def generate_color(): + return f"#{''.join(random.choices(hexdigits.lower(), k=6))}" + + +@app.get("/", response_class=HTMLResponse) +def home(): + html = """ + + + + + Home + + +

Welcome to FastAPI!

+ + + """ + return html + + +@app.get("/random-color", response_class=HTMLResponse) +def random_color(request: Request): + color = generate_color() + return templates.TemplateResponse( + request=request, name="color.html", context={"color": color} + ) diff --git a/fastapi-jinja2-template/requirements.txt b/fastapi-jinja2-template/requirements.txt new file mode 100644 index 0000000000..fc5ffffb11 --- /dev/null +++ b/fastapi-jinja2-template/requirements.txt @@ -0,0 +1 @@ +fastapi==0.118.0 diff --git a/fastapi-jinja2-template/static/script.js b/fastapi-jinja2-template/static/script.js new file mode 100644 index 0000000000..12740cabdb --- /dev/null +++ b/fastapi-jinja2-template/static/script.js @@ -0,0 +1,4 @@ +document.querySelector('#copy-button').addEventListener('click', function() { + const colorCode = document.querySelector('#color-code').textContent; + navigator.clipboard.writeText(colorCode); +}); diff --git a/fastapi-jinja2-template/static/style.css b/fastapi-jinja2-template/static/style.css new file mode 100644 index 0000000000..03a586b0d5 --- /dev/null +++ b/fastapi-jinja2-template/static/style.css @@ -0,0 +1,9 @@ +body { + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 120px; + font-family: monospace; +} diff --git a/fastapi-jinja2-template/templates/base.html b/fastapi-jinja2-template/templates/base.html new file mode 100644 index 0000000000..416e70275a --- /dev/null +++ b/fastapi-jinja2-template/templates/base.html @@ -0,0 +1,14 @@ + + + + + {% block title %}Color Palette Generator{% endblock %} + + + +
+ {% block content %}{% endblock content %} +
+ + + diff --git a/fastapi-jinja2-template/templates/color.html b/fastapi-jinja2-template/templates/color.html new file mode 100644 index 0000000000..51d3e87a56 --- /dev/null +++ b/fastapi-jinja2-template/templates/color.html @@ -0,0 +1,13 @@ +{% extends "base.html" %} + +{% block title %}Random Color: {{ color }}{% endblock %} + +{% block content %} + +
{{ color }}
+ +{% endblock %} From 4b3b471c036c9c951b3ba88f2296046656279f14 Mon Sep 17 00:00:00 2001 From: Philipp Date: Thu, 9 Oct 2025 14:38:06 +0200 Subject: [PATCH 2/6] Update code from review and fix requirements.txt file --- fastapi-jinja2-template/main.py | 31 ++++++------------------ fastapi-jinja2-template/requirements.txt | 2 +- 2 files changed, 8 insertions(+), 25 deletions(-) diff --git a/fastapi-jinja2-template/main.py b/fastapi-jinja2-template/main.py index 5d0d9f9cde..7dc1a4c530 100644 --- a/fastapi-jinja2-template/main.py +++ b/fastapi-jinja2-template/main.py @@ -12,30 +12,13 @@ templates = Jinja2Templates(directory="templates") -def generate_color(): - return f"#{''.join(random.choices(hexdigits.lower(), k=6))}" - - @app.get("/", response_class=HTMLResponse) -def home(): - html = """ - - - - - Home - - -

Welcome to FastAPI!

- - - """ - return html - - -@app.get("/random-color", response_class=HTMLResponse) -def random_color(request: Request): - color = generate_color() +def home(request: Request): + hex_chars = "".join(random.choices(hexdigits.lower(), k=6)) + hex_color = f"#{hex_chars}" + context = { + "color": hex_color, + } return templates.TemplateResponse( - request=request, name="color.html", context={"color": color} + request=request, name="color.html", context=context ) diff --git a/fastapi-jinja2-template/requirements.txt b/fastapi-jinja2-template/requirements.txt index fc5ffffb11..36d21e2539 100644 --- a/fastapi-jinja2-template/requirements.txt +++ b/fastapi-jinja2-template/requirements.txt @@ -1 +1 @@ -fastapi==0.118.0 +fastapi[standard]==0.118.0 From 8289e0165c30fd5841019f09545f3e06cd5359db Mon Sep 17 00:00:00 2001 From: martin-martin Date: Thu, 9 Oct 2025 18:06:53 +0200 Subject: [PATCH 3/6] =?UTF-8?q?Fix=20imports=20=F0=9F=8E=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fastapi-jinja2-template/main.py | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/fastapi-jinja2-template/main.py b/fastapi-jinja2-template/main.py index 7dc1a4c530..68564d59a5 100644 --- a/fastapi-jinja2-template/main.py +++ b/fastapi-jinja2-template/main.py @@ -1,11 +1,12 @@ import random from string import hexdigits -from fastapi import FastAPI, Request from fastapi.responses import HTMLResponse from fastapi.staticfiles import StaticFiles from fastapi.templating import Jinja2Templates +from fastapi import FastAPI, Request + app = FastAPI() app.mount("/static", StaticFiles(directory="static"), name="static") From 7bf8698a8adaf870a6e153c987ce9dfea0b61029 Mon Sep 17 00:00:00 2001 From: martin-martin Date: Thu, 9 Oct 2025 18:12:38 +0200 Subject: [PATCH 4/6] Adapt to tutorial code --- fastapi-jinja2-template/templates/base.html | 6 ++---- fastapi-jinja2-template/templates/color.html | 2 -- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/fastapi-jinja2-template/templates/base.html b/fastapi-jinja2-template/templates/base.html index 416e70275a..dbc604d57f 100644 --- a/fastapi-jinja2-template/templates/base.html +++ b/fastapi-jinja2-template/templates/base.html @@ -2,13 +2,11 @@ - {% block title %}Color Palette Generator{% endblock %} + Random Color Generator -
- {% block content %}{% endblock content %} -
+ {% block content %}{% endblock content %} diff --git a/fastapi-jinja2-template/templates/color.html b/fastapi-jinja2-template/templates/color.html index 51d3e87a56..05d54c7cdd 100644 --- a/fastapi-jinja2-template/templates/color.html +++ b/fastapi-jinja2-template/templates/color.html @@ -1,7 +1,5 @@ {% extends "base.html" %} -{% block title %}Random Color: {{ color }}{% endblock %} - {% block content %}