How to Create & Deploy a Python Web Application FAST (fastHTML Tutorial)

𝗗𝗘𝗦𝗖𝗥𝗜𝗣𝗧𝗜𝗢𝗡
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
In this video, we're building a web app from scratch using a new Python package called FastHTML. This digital guestbook lets everyone leave a message, and it's all done without any JavaScript! For the database, we're going to use PostgreSQL from Supabase. To create the web app, it will be helpful if you know some HTML. However, if you are completely new to web development, don't worry. This tutorial will be beginner-friendly. I'll guide you through each step, from installing FastHTML to deploying your web application for free. By the end, you'll have your very own live guestbook on the internet!

#PythonWebApp #FastHTML #PythonProject

I reached out to Matt before releasing the video and asked for permission to “borrow” his idea. Thanks, Matt 🙏

🌍 𝗟𝗜𝗡𝗞𝗦:

⭐ 𝗧𝗜𝗠𝗘𝗦𝗧𝗔𝗠𝗣𝗦:
00:00 – Introduction
00:48 – Installing FastHTML
01:04 – Running the Example Code locally
01:38 – Explaining FastHTML with Example Code
03:45 – Styling the Application with Pico CSS
04:32 – Creating a Multi-Page Application
05:08 – Building the Guestbook Form
10:13 – Connecting to a Postgres Database with Supabase
12:30 – Fetching Data from the Database
14:07 – Inserting New Data into the Database
15:58 – Handling Form Submissions with FastHTML
17:35 – Adding a Favicon
17:55 – Deploying the Web Application to Vercel
20:28 – Testing the Live Application
20:39 – Outro

𝗧𝗢𝗢𝗟𝗦 𝗔𝗡𝗗 𝗥𝗘𝗦𝗢𝗨𝗥𝗖𝗘𝗦
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀

𝗖𝗢𝗡𝗡𝗘𝗖𝗧 𝗪𝗜𝗧𝗛 𝗠𝗘
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀

☕ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲?
If you want to support this channel, you can buy me a coffee here:

[CodingIsFun]

What types of web apps do you want to build with fastHTML? Let me know in the comments! ⤵ Cheers, Sven ✌

[KevenWebb]

Very nice tutorial. Just the right amount of detail for a demo project.

[andfanilo]

👏🏽👏🏽 awesome demo!

Wait...I thought you were testing out Reflex ahah :D how's the FastHTML experience compared to vanilla FastAPI/HTMX/PicoCSS? and Reflex?

[GenZdev]

A video on portfolio+blog will be great

[funese]

Wow, it's really the same as NextJs, but far simpler. And your tutorial is still amazing as always Sven.

[IbrahimSaeed-Plus]

Really enjoyed this. Will attempt this during the weekend. May I also know the vscode theme you are using?

[yazanrisheh]

Hi Sven. I really loved FastHTML however I legit have 0 info about HTML. Do you have any video recommendation about learning HTML so that we can build proper fastHTML websites? Thanks!

[swoopsavvy]

Great tutorial Sven! Greetings from your Dutch neighbour.

[bc]

My first goal is customer data entry forms. My ultimate goal is a full app with all the things: database, API, local- / offline-first, microservices, event-driven design, document management system, CI/CD... Oh, and I need it to be reasonably secure, too 😅

No idea yet, whether FastHTML would be my chosen tool (or one of them), but it certainly has an appeal! I very, very much want to separate the presentation and logic layers. But almost everything else would defer to achieving local- / offline-first, especially without the user needing to install any additional software. So, basically, I'm stuck with the browser, as far as I know.

[WIZURAI-AGV]

Great tutorial. Can't wait more project with python FastHtml.

[nguyenduyta]

Hi thanks so much. I have a question How does it compare to flask or Django or streamlit

[drikting]

Thanks for the tutorial. I would have liked to see how or where you learned to code it together in the background or at least mention the resources though. I mean, watching you explain everything is one thing but knowing how to code it and troubleshoot on your own is another e.g. followed along till the supabase database execute() part then an error happened on my end.

[PrkMEzoo]

Another awesome tutorial sven, can you redesign the streamlit sales dashboard using this framework in the next video?

[Aniket_Pawar]

Hello sir, will you please ever make a tutorial on using FastHTML for creating a UI website for machine learning?

[carlosz]

Excellent video! Can you create offline web desktop applications with FastHTML? Meaning, the user can simply open a unzipped package with all the files and simply open index.html in his browser and it works just fine (of course ensuring no dependencies that connect to the internet / no APIs...)

[WinnerSingh]

Can you make a video on how to upload python project on dreamhost

[prskis]

This looks kinda similar to Plotly Dash in terms of using Python to structure HTML. Probably would be easier and better to use raw HTML and htmx or maybe even just simple vanilla js?

[Joex]

Seems overly complex syntax for no reason only good thing would be using python libraries in website I guess