Table of Contents

Welcome to Day 7 of the 12 Days of the cloud provider! Today, we’re kicking off the second project in this series: an Email-Based Receipt Processing Service. This app is designed to make your life a little easier by organizing your emailed receipts into a database. No more endless scrolling through your inbox to find that one receipt you need.

If you enjoyed the Birthday Reminder Service, you’ll love this next step. It’s another practical, production-ready app that highlights how the cloud provider can help you turn ideas into real, working solutions. By the end of this tutorial, your Flask app will be live on the web and ready to process receipt data like a pro.

✨ Why This App?

cloud provider illustration for: ✨ Why This App?

We’ve all been there—scrambling to find a specific receipt for tax season or reimbursements. It’s not fun. This app aims to solve that by automating the whole process.

How the App Works

  1. You forward a receipt to a specific email address.
  2. The app extracts details like the vendor, amount, and date using smart tools.
  3. Those details are stored in a database, like PostgreSQL, where they’re neatly organized.
  4. You get a confirmation—via email or SMS—once the receipt is processed.

It’s simple, efficient, and takes a tedious task off your plate. Today, we’re focusing on building the backend system with Flask, setting it up for production with Gunicorn, and deploying it to the cloud provider’s App Platform.

🚀 What You’ll Learn

Here’s what we’ll cover today:

  1. Set up a Flask app to serve as the foundation of your receipt processor.
  2. Configure Gunicorn to handle production workloads smoothly.
  3. Use GitHub for version control and collaboration.
  4. Deploy the app to the cloud provider’s App Platform so it’s live and ready to use.

This tutorial will give you hands-on experience with deploying a real-world Flask app while keeping things manageable and fun.

🛠 What You’ll Need

Before diving in, make sure you have:

  • A cloud account. If you don’t have one, you can sign up here.
  • Python 3.8+ installed on your local machine.
  • Git installed and ready to use.

🧑‍🍳 Recipe for Day 7: Building and Deploying a Flask App

Step 1: Set Up Your Flask App

Flask will serve as the backbone of this project, handling all incoming requests and processing the receipt data. Let’s get started by setting up the basics.

Keeping everything in a dedicated folder makes managing your project easier as it grows. Run the following commands to set up the directory:

  1. Create Your Project Directory:
				
					 mkdir email-receipt-processor
 cd email-receipt-processor

A virtual environment is like a sandbox for your project. It keeps your dependencies isolated, so you don’t accidentally break other Python projects or your system’s Python setup.

  1. Set Up a Virtual Environment:
				
					 pip install virtualenv
 virtualenv -p python3 venv

Activate your virtual environment to install dependencies locally for the project:

  1. Activate the Virtual Environment:
				
					 source venv/bin/activate

Flask will be your web framework, and Gunicorn will handle production server duties.

  1. Install Flask and Gunicorn:
				
					 pip install Flask gunicorn

A requirements.txt file ensures everyone (and every machine) running your project has the same setup.

  1. Save Your Dependencies:
				
					 pip freeze > requirements.txt

Let’s start with a simple Flask app. Create a file called app.py and add the following code:

  1. Write Your Flask App:
				
					 from flask import Flask
 
 app = Flask(__name__)
 
 @app.route('/')
 def home():
 return "Welcome to the Email-Based Receipt Processor!"
 
 if __name__ == "__main__":
 app.run()

Fire up the app and check it in your browser:

  1. Test It Locally:
				
					 python app.py

Open your browser and navigate to http://localhost:5000. You should see: “Welcome to the Email-Based Receipt Processor!”

Step 2: Add Gunicorn Configuration

Flask’s built-in server is great for development, but it’s not designed to handle the traffic and performance needs of a production app. That’s where Gunicorn comes in.

Gunicorn needs a configuration file to know how to run your app. Create one with:

  1. Create a Gunicorn Config File:
				
					 touch gunicorn_config.py

Open gunicorn_config.py and add:

  1. Configure Gunicorn:
				
					 bind = "0.0.0.0:8080"
 workers = 2
  • bind: Makes the app accessible over the web on port 8080
  • workers: Sets the number of simultaneous requests the app can handle. Two is a good starting point for small apps.

Step 3: Push to GitHub

GitHub is where the magic happens—it’s how we’ll version control the app and integrate it with the cloud provider.

A .gitignore file prevents unnecessary files (like your virtual environment) from being tracked by Git. Run:

  1. Initialize a Git Repository:
				
					 git init
 echo "venv/" > .gitignore
 echo "*.pyc" >> .gitignore
 git add .
 git commit -m "Initial Flask app with Gunicorn"

Here's what your project should look like in VS Code, for example:

Head to GitHub, create a new repo called email-receipt-processor, and follow the steps to set it up.

  1. Create a GitHub Repository:
  1. Push Your Code to GitHub:

Back in your terminal, type:

				
					 git branch -M main
 git remote add origin https://github.com/<your-github-username>/email-receipt-processor.git
 git push -u origin main

Replace <your-github-username> with your GitHub username

Step 4: Deploy to the cloud provider’s App Platform

Now it’s time to deploy your app! the cloud provider makes this easy with its App Platform.

Create a New App on the cloud provider

  1. Log in to your the cloud provider dashboard and go to Apps.
  2. Click Create App, select GitHub, and connect your email-receipt-processor repo.
  1. Click “Connect GitHub Account”: You will be redirected to GitHub to authorize the cloud provider. If prompted, log into GitHub and grant the cloud provider access to your repositories.

Tip: Ensure that you have selected the correct branch (e.g., main) for deployment.

  1. Select the Repository: Choose the email-receipt-processor repository you created earlier from the list of available repositories.
  1. Click Save and Continue: This redirects you back to the an app platform configuration screen.

Configure Deployment Settings

  1. Select the Repository from the Dropdown: Once back in the App Platform, you’ll see a dropdown listing your connected repositories. Select email-receipt-processor.
  1. Choose Resources: You can adjust the resource allocations (RAM, CPU, and bandwidth) for your app.
  • Click Edit to modify these settings. For this tutorial, we recommend the following configuration:
  • RAM: 512 MB
  • CPU: 1vCPU
  • Bandwidth: 50 GB

Set the Run Command

  1. Scroll Down to the Run Command Section: This step ensures the cloud provider knows how to start your app in the production environment.
  2. Click “Edit”: Replace the default command with the following:
				
					 gunicorn --worker-tmp-dir /dev/shm -c gunicorn_config.py app:app
  • This command uses Gunicorn to serve your Flask app.
  • The --worker-tmp-dir /dev/shm flag optimizes performance in containerized environments.
  1. Review Configuration: On the final screen, review your app’s settings. Ensure the resource allocations and run command are correct. Then click Back to get back to Resources.

Finalize Deployment Settings

  1. Environment Variables: On the next screen, you’ll see an option to set environment variables. For now, leave everything as default and click Next.
  1. App Region: Choose a deployment region close to your target audience or leave it as the default.
  1. Create Resources: On the final screen, review your app’s settings. Then click on Create Resources. This starts the deployment process. Sit back while the cloud provider sets everything up!

Verify the Deployment

  1. Deployment Status: Once your app is deployed, you’ll see a confirmation screen with a link to your app’s public URL.

“Welcome to the Email-Based Receipt Processor!”

  1. Test Your App: Visit the URL in your browser. You should see the message:

🎁 Wrap-Up

You did it! Here’s what you accomplished today:

  1. Built a Flask app to kickstart your receipt processor.
  2. Configured Gunicorn to make it production-ready.
  3. Deployed your app to the cloud provider’s App Platform, making it live and ready to use.

Your app is now up and running—an important milestone in this series. In the next tutorial, you’ll take things further by integrating Postmark to handle email forwarding. Get ready to level up your app—it will be awesome! 🚀

Here is the next tutorial from this series on Day 8: Connecting Postmark to Your Flask App.