Add materials for the FastAPI Jinja2 tutorial (#705)

acsany · martin-martin · brendaweles · web-flow · commit a4540589e6ca · 2025-10-22T20:23:08.000+02:00
* Add materials

* Update code from review and fix requirements.txt file

* Fix imports 🎉

* Adapt to tutorial code

* Update README.md

* Final QA

---------

Co-authored-by: Martin Breuss &lt;martin-martin@users.noreply.github.com&gt;
Co-authored-by: martin-martin &lt;breuss.martin@gmail.com&gt;
Co-authored-by: brendaweles &lt;160772586+brendaweles@users.noreply.github.com&gt;
Co-authored-by: Bartosz Zaczyński &lt;bartosz.zaczynski@gmail.com&gt;
diff --git a/fastapi-jinja2-template/README.md b/fastapi-jinja2-template/README.md
@@ -0,0 +1,15 @@
+# How to Serve a Website With FastAPI Using HTML and Jinja2
+
+This folder contains the code discussed in the tutorial [How to Serve a Website With FastAPI Using HTML and Jinja2](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
@@ -0,0 +1,24 @@
+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")
+
+
+@app.get("/", response_class=HTMLResponse)
+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=context
+    )
diff --git a/fastapi-jinja2-template/requirements.txt b/fastapi-jinja2-template/requirements.txt
@@ -0,0 +1 @@
+fastapi[standard]==0.119.1
diff --git a/fastapi-jinja2-template/static/script.js b/fastapi-jinja2-template/static/script.js
@@ -0,0 +1,4 @@
+document.querySelector('#copy-button').addEventListener('click', () => {
+  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
@@ -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
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Random Color Generator</title>
+    <link href="/static/style.css" rel="stylesheet">
+</head>
+<body>
+    {% block content %}{% endblock content %}
+    <script src="/static/script.js"></script>
+</body>
+</html>
diff --git a/fastapi-jinja2-template/templates/color.html b/fastapi-jinja2-template/templates/color.html
@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% block content %}
+    <style>
+        body {
+            background-color: {{ color }};
+        }
+    </style>
+    <div id="color-code">{{ color }}</div>
+    <button id="copy-button">Copy Hex Code</button>
+{% endblock %}
