Deploying Your FastHTML and Cloudinary Integrated App – ep.5

In this episode, we’ll cover how to deploy your FastHTML app that’s integrated with Cloudinary to a production environment. By the end of this tutorial, you’ll know how to prepare your app for deployment, select a hosting platform, and get your web app live for users to access.

Part 1: Preparing Your FastHTML App for Deployment

Before deploying your app, it’s essential to prepare it properly to ensure it runs smoothly in a production environment. Here are some key steps:

Step 1: Configuring Environment Variables

Storing sensitive information like Cloudinary credentials directly in your code is a security risk. Instead, use environment variables.

1. Install python-dotenv:
   This package helps manage environment variables in a .env file. Install it using pip:

   pip install python-dotenv

2. Create a .env File:
   In your project directory, create a .env file to store your Cloudinary credentials securely:

   CLOUDINARY_CLOUD_NAME=your_cloud_name
   CLOUDINARY_API_KEY=your_api_key
   CLOUDINARY_API_SECRET=your_api_secret

3. Update config.py to Use Environment Variables: Modify your config.py to load environment variables:

   import os
   from dotenv import load_dotenv
   import cloudinary
   import cloudinary.uploader
   import cloudinary.api

   # Load environment variables from .env file
   load_dotenv()

   cloudinary.config(
       cloud_name=os.getenv('CLOUDINARY_CLOUD_NAME'),
       api_key=os.getenv('CLOUDINARY_API_KEY'),
       api_secret=os.getenv('CLOUDINARY_API_SECRET')
   )

   def list_images():
       response = cloudinary.api.resources(type='upload', max_results=10)
       return response.get('resources', [])

Step 2: Preparing the Application for Production

1. Set Debug Mode to False:
   Ensure your application runs in production mode by setting the appropriate environment variable or code configuration:

   app, rt = fast_app(debug=False)

2. Optimize Static Files:
   If your application uses static files (like images or JavaScript files), ensure they are optimized and correctly referenced.

Part 2: Choosing a Hosting Platform

There are several options for hosting your FastHTML app, each with its own benefits. Here are a few popular platforms that support Python applications:

1. Vercel: Offers easy deployment for Python apps and has good integration with GitHub.
2. Railway: Provides simple, fast deployments and automatic scaling.
3. PythonAnywhere: Great for Python applications and has an intuitive setup process.
4. Hugging Face Spaces: Useful for AI and machine learning applications, with support for Python environments.

For this tutorial, we’ll use PythonAnywhere as an example because it’s straightforward for beginners.

Part 3: Deploying Your FastHTML App to PythonAnywhere

Step 1: Set Up a PythonAnywhere Account

1. Go to PythonAnywhere and sign up for a free account.

Step 2: Create a New Web App

1. Log in to your PythonAnywhere account.
2. Click on the Web tab in the dashboard.
3. Click Add a new web app.
4. Select Manual configuration and choose Python 3.7 or higher.

Step 3: Upload Your Project Files

1. **Navigate to the *Files* tab** on PythonAnywhere.
2. Use the Upload button to upload your project files, including main.py, config.py, and the .env file.

Step 4: Install Dependencies

1. Open a Bash console from the dashboard.
2. Install FastHTML and Cloudinary dependencies using pip:

   pip install python-fasthtml cloudinary python-dotenv

Step 5: Configure the Web App

1. Go back to the Web tab and edit your web app configuration.
2. In the Code section, set the WSGI configuration file. Click WSGI configuration file to edit it. Replace the default code with:

   import sys
   import os

   # Assuming your app files are in /home/yourusername/fasthtml-cloudinary-app
   project_home = '/home/yourusername/fasthtml-cloudinary-app'
   if project_home not in sys.path:
       sys.path = [project_home] + sys.path

   # Set environment variables
   from dotenv import load_dotenv
   load_dotenv(os.path.join(project_home, '.env'))

   from main import app as application

3. Save the WSGI file.

Step 6: Reload Your Web App

1. Go back to the Web tab.
2. Click the Reload button to restart your web application.

Your FastHTML app should now be live! Visit the provided URL to see your application running on PythonAnywhere.

Part 4: Testing and Optimizing Your Deployed App

Step 1: Test Your Application

Ensure all features work as expected. Test image uploads, retrieval, and any search functionalities to verify they are functioning correctly.

Step 2: Monitor Performance

Use PythonAnywhere’s logging and monitoring tools to keep an eye on your app’s performance and error logs. This helps identify any issues early and optimize your app further.

Part 5: Maintaining Your Deployed Application

Regular Updates:

• Keep your dependencies up-to-date. Regularly check for updates to FastHTML, Cloudinary SDK, and any other libraries you use.

Security Best Practices:

• Rotate your API keys periodically.
• Review your app’s security settings and ensure that your environment is not exposing sensitive information.

Conclusion

Congratulations! You have successfully deployed your FastHTML application with Cloudinary integration to a live server. In this series, you’ve learned how to build, enhance, and deploy a modern web application using Python and Cloudinary.

Homework/Assignment:

• Experiment with another deployment platform like Vercel or Railway.
• Explore adding more features, like user authentication or a database for storing metadata about your images.

Thank you for following along!

Surapong Kanoktipsatharporn

CTO at Bua Labs

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