FastAPI Python framework - Returning HTML templates (with HTMX integration)

No video

FastAPI Python framework - Returning HTML templates (with HTMX integration)

Рет қаралды 52,791

Күн бұрын

In this video, we look at how to return HTML templates with the FastAPI web framework in Python. We will use Jinja2 templates, and will set our FastAPI function up to return a template response.
We'll also look at how to integrate with the HTMX library, allowing us to easily utilise dynamic data loading in our FastAPI application.
We will also apply some very basic styles to our page using TailwindCSS.
▶️ Full Playlist:
• FastAPI
📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
00:31 Setup
02:56 Creating FastAPI route
05:28 Adding HTMX and TailwindCSS
06:26 Displaying data in HTML table
07:52 Returning data from FastAPI route
09:26 Adding HTMX attributes to button
12:17 FastAPI headers
14:33 Adding hx-swap attribute
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugb...
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: www.bugbytes.i...
👾 Github: github.com/bug...
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
HTMX CDN: htmx.org/docs/...
TailwindCSS CDN: tailwindcss.co...
FastAPI docs: fastapi.tiango...
FastAPI headers: fastapi.tiango...
FastAPI templates: fastapi.tiango...
#fastapi #python

Пікірлер: 72

@aleksalukic1904 Жыл бұрын

The only reason why I feed my KZfaq algorithm with creators having a small number of subscribers is to not miss out on such an incredibly good KZfaq channel like this one. Thank you, you have helped me a lot with the {%for file in files%} {%endfor%} :-*

@bugbytes3923 Жыл бұрын

Thanks so much Aleksa! I'm glad the videos have helped. Thanks for watching and for the nice message!

@falcomomo Жыл бұрын

Fantastic tutorial. Every step so clear and well described. I don't know why everyone doesn't do tutorials like this.

@bugbytes3923 Жыл бұрын

Thanks a lot for the feedback! Delighted to hear that. Will have more FastAPI stuff coming up soon!

@stevekim881 2 жыл бұрын

thanks for the good video For non-English speaking Asians, your correct pronunciation is much easier to understand than an American's more difficult pronunciation. - From Korea

@bugbytes3923 2 жыл бұрын

Thank you! I'm glad my pronunciation can be understood more easily, especially as I'm from Scotland (we have very distinctive accents). PS - I look forward to visiting Korea one day!

@babc142 Жыл бұрын

@@bugbytes3923 How interesting that the Scottish accent is easier to understand. I wonder what Koreans make of other accents from the UK?

@_indrid_cold_ 4 ай бұрын

Phenomenal. I had been wondering about switching from Flask to FastAPI for some small web projects and this has convinced me to go for it. When I saw you were pulling in Tailwind I just knew you could be trusted. Excellent stuff this.

@bugbytes3923 3 ай бұрын

Thanks a lot for the comment, much appreciated!

@deymonster2u Жыл бұрын

your videos about FastApi that what I need! Doing a project now, I am newby in FastAPI, my project will be a Poll for teachers

@bugbytes3923 Жыл бұрын

Thank you! Good luck with your project - if you have any ideas for videos/series, just let me know!

@MichaelBuksas Жыл бұрын

This is great! I appreciate how you iterate to the final solution and recap the material at the end. I think that makes the video really effective. Good stuff.

@bugbytes3923 Жыл бұрын

Thank you Michael!

@mj2068 4 ай бұрын

love your style, fast pace, dense and information rich, help me to focus and pay attention. keep up the great work.😊

@bugbytes3923 4 ай бұрын

Thanks a lot, really nice comment - cheers!

@loosetorque2869 Жыл бұрын

Thanks - first video of yours I've seen, and it solved my beginner problem with Jinja2 templates. Cheers, from a fellow Scot

@bugbytes3923 Жыл бұрын

Thanks - glad the video helped! Cheers from Glasgow.

@davishek7 2 жыл бұрын

Great, Don't have enough praise for your python contents.

@bugbytes3923 2 жыл бұрын

Thank you!

@seadude Жыл бұрын

Wow! First time seeing one of your videos. STELLAR explanation. Subscribed. Thank you.

@bugbytes3923 Жыл бұрын

Awesome, thank you Eric!

@Trumancapote140 Жыл бұрын

I've been looking all over for this topic, thank you!

@bugbytes3923 Жыл бұрын

Thank you for watching, Arunen!

@shinchikichin 11 ай бұрын

You're awesome mate. Really liking your videos. Keep it up!

@bugbytes3923 11 ай бұрын

Thanks a lot, good to hear! Thanks for watching.

@theindianhindu1458 2 жыл бұрын

Great content man. As always. Looking forward to your content on using Fastapi as a full-fledged backend including django like user authentication.

@bugbytes3923 2 жыл бұрын

Thanks! I'll explore FastAPI, along with more Django, in the coming months!

@theindianhindu1458 2 жыл бұрын

@@bugbytes3923 Awesome!

@chuckbenedict7235 7 ай бұрын

Nice delivery. Well explained. Nice!

@bugbytes3923 7 ай бұрын

Thanks a lot!

@junivensaavedra882 8 ай бұрын

This is GOLD Man, my gratitude. :)

@bugbytes3923 8 ай бұрын

Thanks a lot man!

@junivensaavedra882 8 ай бұрын

@@bugbytes3923 I also loved your Django + HTMX series. :)

@devilslide8463 6 ай бұрын

“We don’t want a table embedded in a button as arguably not a best user experience “ Love that part 😂

@royale5981 Жыл бұрын

Hea @BugBytes, I really love your teaching. Can we get a full course on returning HTML templates, alongside working with forms with FastAPi please?

@xjuliodiaz888 2 жыл бұрын

Just what I was looking for, thanks !!!

@bugbytes3923 2 жыл бұрын

Thanks!

@grimonce 7 ай бұрын

Superb

@bugbytes3923 7 ай бұрын

Thanks a lot!

@LookNumber9 Жыл бұрын

Beautifully done! Thank you.

@bugbytes3923 Жыл бұрын

Thanks a lot!

@peterkim9696 Жыл бұрын

amazing video

@bugbytes3923 Жыл бұрын

Thanks !

@seol-.- 8 ай бұрын

Too GOOOD!

@bugbytes3923 8 ай бұрын

Thanks a lot!

@bn_ln Жыл бұрын

awesome content

@bugbytes3923 Жыл бұрын

Thanks Ben!

@wanomir3133 7 ай бұрын

Great series! And I like the accent 😅

@bugbytes3923 7 ай бұрын

Thank you! 😅

@StrategicCIS 3 ай бұрын

Nice video. Is there a second part with the DB setup? Thanks.

@Felipe-bi3mk 7 ай бұрын

Nice tutorial! I would have done 2 endpoints instead of looking at the headers, why that was your choice?

@SuperGrimmy 10 ай бұрын

I bet these videos suddenly became more popular right now?

@razalovepk 2 жыл бұрын

Awesome tutorial. Can you please do one video with JWT token authentication.

@AlexGarcia-ir7fl Ай бұрын

Do you know if there is something like Django-Compressor for FastAPI for sending static files like scripts? I am interested in combining this with pytailwindcss, it requires a build step but you get minimal css when using tailwind. Great tutorial btw!

@ZodakZach 6 ай бұрын

plz do more fastAPI and htmx

@bugbytes3923 6 ай бұрын

Thanks a lot! Will do very soon.

@samuelvishesh 11 ай бұрын

What about SSE with jinja2 produced HTML partials in FastAPI?? 😮

@mericcapar2447 4 ай бұрын

Hey thanks for the awesome content i was looking for FastAPI training. I am having a issue and i couldn't solve it even i copy paste your codes. Whatever i do i can't get list of movies output. I only get Movie List {% include "table.html" %} Film Name Director Load More this format. Can you help me or do you have any solution?

@alexanderscott2456 7 ай бұрын

Is HTMX lighter than a kilogramme of steel or a kilogramme of feathers?

@archibaldivanovich4103 2 жыл бұрын

Thanks bro! What about xxs attacks in this case ? In Django we have security from the box , what about fastapi?

@valuetraveler2026 Жыл бұрын

Tailwind CSS CDN not to be used in Production warning

@swelanauguste6176 2 жыл бұрын

Thanks a lot for the video, as always it is very good. Was there any reason you did not use django-ninja here?

@bugbytes3923 2 жыл бұрын

Thank you for the comment! django-ninja is good for working with Django - however, FastAPI is a fantastic Python framework itself for web apps. I wanted to demonstrate its use with templates and HTMX in this video. dango-ninja also gets most of its ideas/style from FastAPI. Both are very good choices for developing APIs in Python.

@CarstenAevermann Жыл бұрын

hey great tutorial, how can I get rid of the validation error when calling serverip:port/docs ? It says something like: Schemas -> HTTPValidationError some type error (tested with your repo) thx in advance

@in_sa_ne Жыл бұрын

Used the same code like you, but my min-w-[50%] doesn't make the table like yours. Only min-w-full works.

@ooktsl 2 жыл бұрын

gut. I want to use python function in html. Do you have an idea? For example, I want to perform string operations on {{ film.name }} in index.html in this example. Or I want to import an additional library and use it in html. didn't work. it does not memorize the variable. Actually how can round(), time.ctime() be used in html for example. I want to apply it to data from table rows.

@CarstenAevermann Жыл бұрын

You would do this in the route definition of your python. I added the following to the main.py and then adding a calc.html in templates which rounds a number 4.555 and displays 5. @app.get("/calc/", response_class=HTMLResponse) async def calculation(request: Request): calc = round(4.555) context = {"request": request, 'calc': calc} return templates.TemplateResponse("calc.html", context) and you need to call from templates/calc.html your variable calc like {{ calc }} in the body