In this tutorial, we will learn how to combine two fast and powerful frameworks – FastHTML and FastAPI. FastAPI is a modern web framework for building APIs with Python 3.6+. It is based on standard Python type hints and is designed to be fast to develop with, easy to use, and easy to deploy. FastHTML, on the other hand, is a lightweight and fast template engine for HTML generation in Python. By combining these two frameworks, we can create dynamic web applications that are both fast and easy to use.
Step 1: Setting up the environment
Before we begin, make sure you have Python 3.6 or higher installed on your system. You can install FastAPI and FastHTML by using pip, the Python package manager. Open your terminal and run the following commands:
pip install fastapi
pip install uvicorn
pip install fasthtmlStep 2: Creating a FastAPI application
Let’s start by creating a simple FastAPI application that serves as our backend. Create a new Python file (e.g., main.py) and add the following code:
from fastapi import FastAPI
app = FastAPI()
@app.get("/")
def read_root():
return {"Hello": "World"}Save the file and run the FastAPI application by running the following command in the terminal:
uvicorn main:app --reloadYou should see the message "Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)".
Step 3: Creating a FastHTML template
Next, let’s create a FastHTML template that will be used to render our HTML content. Create a new directory in your project folder called "templates" and create a new HTML file (e.g., index.html) inside this directory. Add the following code to the index.html file:
<!DOCTYPE html>
<html>
<head>
<title>FastHTML and FastAPI Tutorial</title>
</head>
<body>
<h1>Hello, FastHTML and FastAPI!</h1>
</body>
</html>Step 4: Integrating FastHTML with FastAPI
Now, we will modify our FastAPI application to render the FastHTML template we created in the previous step. Modify the main.py file as follows:
from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fasthtml import HTMLResponse
app = FastAPI()
@app.get("/", response_class=HTMLResponse)
def read_root():
return HTMLResponse(content=open("templates/index.html").read())Save the file and restart the FastAPI application. Navigate to http://127.0.0.1:8000 in your browser, and you should see the "Hello, FastHTML and FastAPI!" message displayed on the page.
Congratulations! You have successfully combined FastHTML and FastAPI to create a dynamic web application. You can now expand on this project by adding more routes, implementing database connections, or integrating other libraries and frameworks. Experiment with the features of FastHTML and FastAPI to create powerful and efficient web applications.
Someone was reading my mind. Thank you.
So my goal in combining the two frameworks is just to use fast tags to generate the html. Fasthtml seems immature for production but good for generating htmx. I don’t think producing achieves what I’m looking for
I recommend Litestar instead of FastAPI for backend
What features of fastapi are not available in fasthtml? What caused you to want to combine these technologies?
But why？
thanks for your approach, are you thinking to create course about?
Hmmm interesting never heard of fasthtml. Im curious what python developers tend to most commonly use for integrating AI apps into webpages though.