Behind the Scenes of My Latest Flask Application

Welcome to my blog! In this post, I’ll walk you through the development process of my latest Flask application. Whether you’re new to Flask or just curious about how web applications are built, this behind-the-scenes look will give you a clearer picture of what goes into creating a Flask app.

Introduction

Flask is a lightweight and flexible web framework for Python. It’s perfect for small to medium-sized projects and provides the essentials to get a web application up and running. I chose Flask for my latest project because of its simplicity and the ease of integrating it with other tools and libraries.

Setting Up the Environment

1. Creating a Virtual Environment: I started by setting up a virtual environment to keep my project dependencies isolated. This is done using the following commands:

python -m venv venv
source venv/bin/activate  # On Windows, use `venv\Scripts\activate`

2. Installing Flask: With the virtual environment activated, I installed Flask using pip:

pip install Flask

Building the Application

Project Structure:

/my_flask_app
    /static
        /css
        /js
    /templates
        index.html
    app.py
    config.py

Key Files:

- app.py: This is the main file where the Flask application is created and routes are defined. Here’s a basic example:

from flask import Flask, render_template
from config import db, app

# Create all tables
with app.app_context():
    db.create_all()

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

- config.py: This file is used to configure various settings for the Flask application. It typically includes configurations such as secret keys, database URIs, and other application settings. Here’s an example:

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
                    
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///site.db' #sqlite uri
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False #Disabled modification tracking

db = SQLAlchemy(app)

- templates/index.html: The HTML template for the home page. Flask uses Jinja2 templating engine to render dynamic content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home - My Flask App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <h1>Welcome to My Flask Application</h1>
</body>
</html>

Adding Functionality

To enhance the application, I added a form that allows users to submit data. I used Flask’s request object to handle form submissions and then displayed the submitted data on a new page.

Form Handling Example:

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/submit', methods=['GET', 'POST'])
def submit():
    if request.method == 'POST':
        user_input = request.form['input_data']
        return f'You submitted: {user_input}'
    return render_template('submit.html')

submit.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Submit Data</title>
</head>
<body>
    <form method="post">
        <input type="text" name="input_data" required>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

Deploying the Application

I deployed my Flask application using Google Cloud Run. The process involves creating a Docker image of the application and pushing it to a container registry. From there, Google Cloud Run handles the scaling and deployment.

Conclusion

Building this Flask application was a rewarding experience, and I hope this behind-the-scenes look gives you a better understanding of the development process. If you’re new to Flask, I encourage you to dive in and start building your own projects!

Lubasi S. Nkalolang

Actuarial Analyst | Data Enthusiast and Developer