Introduction to FastHTML and Cloudinary – ep.1

In this episode, we’ll introduce FastHTML and Cloudinary, set up the development environment, and create a basic project structure. By the end of this episode, you’ll have a simple FastHTML app running locally and be ready to integrate Cloudinary for media management.

Part 1: Overview of FastHTML and Cloudinary

FastHTML Overview
FastHTML is a Python-based web framework designed to create fast, scalable web applications using a simple and intuitive syntax. It allows developers to build modern, interactive web apps without needing to write JavaScript or manage complex client-server interactions.

Cloudinary Overview
Cloudinary is a cloud-based service that provides solutions for image and video management. It allows developers to upload, store, manipulate, and deliver media files efficiently and securely, leveraging a powerful API for all operations.

Part 2: Setting Up the Development Environment

Step 1: Install Python and pip
Make sure you have Python 3.7 or higher installed on your system. You can download it from the official Python website. Pip, the Python package installer, is typically included with Python installations.

Step 2: Install FastHTML and Cloudinary SDK
Open your terminal or command prompt and run the following commands to install FastHTML and Cloudinary:

pip install python-fasthtml
pip install cloudinary

Part 3: Setting Up a Basic FastHTML Project

Step 1: Create a Project Directory
Create a new directory for your project and navigate into it:

mkdir fasthtml-cloudinary-app
cd fasthtml-cloudinary-app

Step 2: Initialize a FastHTML App

Create a new file named main.py in your project directory and add the following code:

# main.py
from fasthtml.common import *

app, rt = fast_app()

@rt('/')
def get():
    return Div(P('Welcome to FastHTML!'), hx_get="/change")

serve()

Explanation of Code:

• from fasthtml.common import *: This line imports the necessary modules from FastHTML.
• app, rt = fast_app(): Initializes the FastHTML app and routing system.
• @rt('/'): Defines a route for the root URL (/).
• def get()...: A function that returns a simple HTML structure with a paragraph (<p>) element displaying “Welcome to FastHTML!”.
• serve(): Starts the FastHTML server to serve the application.

Step 3: Run the FastHTML App

Run your application by executing the following command in your terminal:

python main.py

You should see output similar to the following, indicating that the server is running:

Serving on http://localhost:5001

Open your web browser and navigate to http://localhost:5001. You should see a webpage with the message “Welcome to FastHTML!”.

Part 4: Setting Up Cloudinary

Step 1: Create a Cloudinary Account
Sign up for a free Cloudinary account at Cloudinary’s website. After signing up, you will get your Cloud Name, API Key, and API Secret. These credentials are essential for interacting with the Cloudinary API.

Step 2: Configure Cloudinary in Your Project

Create a new file named config.py in your project directory and add your Cloudinary configuration:

# config.py
import cloudinary
import cloudinary.uploader
import cloudinary.api

cloudinary.config(
    cloud_name='your_cloud_name',
    api_key='your_api_key',
    api_secret='your_api_secret'
)

Replace 'your_cloud_name', 'your_api_key', and 'your_api_secret' with your actual Cloudinary credentials.

Step 3: Modify the FastHTML App to Use Cloudinary

Update your main.py file to import the Cloudinary configuration:

# main.py
from fasthtml.common import *
import config  # Import Cloudinary configuration

app, rt = fast_app()

@rt('/')
def get():
    return Div(P('Welcome to FastHTML with Cloudinary!'), hx_get="/change")

serve()

Conclusion

By completing this episode, you’ve successfully set up a FastHTML development environment, created a basic web application, and configured Cloudinary for future media management integration. In the next episode, we’ll build on this foundation by adding functionality to upload images to Cloudinary directly from your FastHTML app.

Homework/Assignment:

• Complete the setup of your FastHTML environment and create a basic homepage with a welcome message.
• Sign up for a Cloudinary account and configure your project to use Cloudinary.

Make sure to test that your app is running correctly and that you are ready for the next episode.

Surapong Kanoktipsatharporn

CTO at Bua Labs

The ultimate test of your knowledge is your capacity to convey it to another.