FastAPI + SQLModel + fasthtml

[TheRealBecks]

I started a project with FastAPI with SQLModel and I wanted to use HTMX. So now there's fasthtml, that's awesome! 🎉

But now I want to use this awesomeness in FastAPI with SQLModel, but does that even make sense? Has anyone already thought about that? 😀

[hugetim]

As someone only vaguely familiar with those but who has read much of the FastHTML docs, here's the little I have to offer:

• See the discussion of the relationship between FastAPI and FastHTML here: https://www.answer.ai/posts/2024-08-03-fasthtml.html#starlette Also, the next section at that link explicitly lists SQLModel as something you can use.
• Re FastAPI, see also the comment here: https://docs.fastht.ml/explains/routes.html
• SQLModel is also mentioned here: https://docs.fastht.ml/tutorials/quickstart_for_web_devs.html#what-happens-if-we-enter-incorrect-data

[psabhay]

Using all the fasttags part from FastHTML in your FastAPI app is super easy. The rough steps, other than installing both the libraries, would be something like -

1. Create a mount for your static files as you will be sending htmx.js and other assets to the browser.
2. Create a component using FastHTML
3. Convert the component to xml using the to_xml() function
4. Send back the converted component as a fastapi.responses.HTMLResponse.

Ideally, you will make a main layout that will have head, body, footer etc and add the required css and script there.

The core beauty, as far as my little understanding tells me, of FastHTML is that you can make any component you like. Everything that is a html tag can be a component.

All the components part should work fine I believe as components are rendered as html, that's it. Also, htmx part should be good as that is the idea of htmx to be just like html.
If you are using WS then you might need to do the required change.

from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fasthtml import common as fh

app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")

@app.get("/", response_class=HTMLResponse)
def home():
    return fh.to_xml(fh.Div(fh.H1("Hello World!")))

I am still exploring this project to see what all is there :-)

[dan-hoog]

I've used fasthtml to build quite a few admin/ops tools for what will be a web service. I was shocked to find the fastapi approach doesn't work.

I'll be switching to fastapi and doing something like this.

I like fastHTML, but suggest it should assume applications will comingle html and proper pydantic enforced web services.

I think I can get web services to work, but that fights to hard on the most important part of the app.

[wrb2]

I have similar thoughts - we have some apps that feel like a very good fit for FastHTML but needs both HTML and JSON endpoints (we're providing the data to both people and machines).

There's some hacky solutions (build the logic universal and include it into both FastAPI and FastHTML services, for example) but if there we non-hacky modular one, it would be great.

[gautam-e]

I wondered about the same thing. Jeremy mentioned somewhere that his web2md app has both HTML and JSON routes I think. Maybe that repo inspires some ideas?

Thinking out loud here:
Perhaps one solution is that a route's POST method returns HTML while the GET method on that route returns JSON? The POST method would obviously generate the HTML only by calling the GET method first. That way the GET method on that endpoint could be accessed directly to get only a JSON response when that's needed.

[izzybps]

Couldn't I have a FastAPI application acting as a backend and the FastHTML route makes the call to the backend api route and builds and returns the HTML on its route? I thought that was the intended use with these libs, but reading the docs i couldn't find any easy way to call endpoints inside a FastHTML route. Am i overlooking something very obvious?

[psabhay]

FastHTML has response type for json. If the return value is a string then it does html response but if the return value is of a dictionary then it will be a JSON response.

[rognoni]

I think to use this solution for my new project:

• FastHTML as "front-end" application
• and server-to-server calls (with httpx)
• to my FastAPI endpoints

[pythoninthegrass]

This is similar to what I want to accomplish. I'd like to use fasthtml for frontend, fastapi (or any async server framework really) on the backend.

[renatodamas]

I've used a similar approach from @psabhay with an existing API on FastApi + SQLModels, and I'm happy to report that it's been really successful!

I added a new endpoint for the index page of a single-page application on my server.

For the other endpoints, I've added a condition so that the same endpoint can respond with either JSON or HTMX components for my SPA.

@router.get(..., response_model=MyResponseModel):
def router_process(...):
    ...
   my_resp_model_obj = MyResponseModel(...)
   
    if hx_request:= request.headers.get('HX-Request', None):
        return HTMLResponse(my_resp_model_obj.to_html())

    return my_resp_model_obj

I've implemented the to_html() function of MyResponseModel using the fasttags part from FastHTML.

This has given me a flexible API that responds to both JSON and HTMX components, and the system is working like a charm!

I know that not using FastHTML server meant I lost some useful features on the frontend provided by FastHTML, like session management and a login system. I probably will need them in the future, though. But for now, it's all good!

I'd love to hear any tips or advice you all might have!