realpython · acsany · Oct 3, 2025
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 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
@@ -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 = """
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Home</title>
+    </head>
+    <body>
+        <h1>Welcome to FastAPI!</h1>
+    </body>
+    </html>
+    """
+    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
@@ -0,0 +1 @@
+fastapi==0.118.0
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', 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
@@ -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,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}Color Palette Generator{% endblock %}</title>
+    <link href="/static/style.css" rel="stylesheet">
+</head>
+<body>
+    <main>
+        {% block content %}{% endblock content %}
+    </main>
+    <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,13 @@
+{% extends "base.html" %}
+
+{% block title %}Random Color: {{ color }}{% endblock %}
+
+{% block content %}
+    <style>
+        body {
+            background-color: {{ color }};
+        }
+    </style>
+    <div id="color-code">{{ color }}</div>
+    <button id="copy-button">Copy Hex Code</button>
+{% endblock %}