How to Create & Deploy a Python Web Application FAST (fastHTML Tutorial)
In this blog post, we’ll walk you through creating a digital guestbook web application from scratch using a new Python package called FastHTML. This application allows users to leave messages, which will be stored in a database. The amazing part? This entire web application is written in Python—no JavaScript required!
What You’ll Learn
- How to set up FastHTML and create a simple web application
- Understanding the structure of FastHTML, FastAPI, and HTMX
- Building a multi-page application
- Deploying your guestbook online for free
Prerequisites
- Basic knowledge of Python
- Familiarity with HTML (helpful but not necessary)
Getting Started with FastHTML
- Install FastHTML: Head over to the official FastHTML documentation (link in the description box) and install the package. Run the following command in your terminal or command prompt:
pip install fasthtml
- Create Your Python File: Copy the sample code provided in the documentation and paste it into a new Python file. For this guide, let’s name it
main.py
. - Run Your Web Server: Start your web server by typing the following command in your terminal:
python main.py
Now, your application should be running on
localhost
at port 5001.
Understanding FastHTML
FastHTML combines FastAPI (the web server backbone) and HTMX (a JavaScript library that enhances HTML functionality). Here’s a brief overview of how they work together:
- FastAPI: Handles the server-side logic and routes.
- HTMX: Makes your HTML more interactive without writing JavaScript.
Building Your Guestbook Application
Setting Up the Basic Structure
- Initialize the App: Start by initializing the app and router instances. The routes are essentially the different pages of your website. For now, we will focus on the root route (homepage).
- Create Interactive Elements: Use the
hx-get
attribute to trigger GET requests when users interact with elements on your page. - Add Styling: FastHTML comes with built-in styling via the Pico CSS library. You can wrap your content in a titled element to apply styles automatically. If you prefer other CSS libraries like Tailwind, you can easily integrate them.
Creating a Multi-Page Application
To create a multi-page application, replace the hx-get
attribute with a regular link. This allows users to navigate to different pages while changing the URL accordingly.
Designing the Guestbook Form
- Create the Form: Use HTML tags in Python to create a form with fields for a name, email, and a submit button. This is where users will enter their messages.
- Group Elements: Utilize field sets to group input fields for better organization and styling.
- Display Messages: Use article elements to display user messages, including the name, message content, and submission timestamp.
Connecting to a Database
For our guestbook, we will use a PostgreSQL database from Supabase. Here’s how to set it up:
- Create a Supabase Account: Sign up and create a new organization and project.
- Set Up Your Database: Create a table for storing messages with columns for name, message, and timestamp.
- Install Required Packages: Use pip to install the Supabase Python SDK and other necessary packages:
pip install supabase pip install python-dotenv pip install pytz
- Connect to the Database: In your Python code, import necessary libraries and load environment variables to establish a connection to your Supabase database.
- Retrieve and Display Messages: Write functions to fetch messages from the database and render them on your web application.
Handling Form Submissions
- Create a Function to Insert Messages: Define a function that will save new messages to the database when users submit the form.
- Define Routes for Submissions: Set up a new route to handle POST requests for message submissions. Ensure that the response updates only the messages displayed on the page, not the entire form.
Final Touches and Deployment
- Add a Favicon: Create an assets folder for your favicon and specify it in the headers of your application.
- Version Control: Initialize a Git repository and create a
.gitignore
file to avoid committing sensitive information. - Create a Requirements File: Use
pipreqs
to generate arequirements.txt
file for your project. - Deploy Your Application: Push your code to GitHub and use Vercel to deploy your application. Make sure to enter your environment variables during the deployment process.
Conclusion
Congratulations! You’ve successfully built a dynamic web application using only Python and FastHTML. This guestbook app serves as a great foundation for further exploration of FastHTML’s capabilities.
Feel free to experiment with different features and enhance your application. Happy coding!