Setting Up a Flask App from Scratch: A Beginner's Guide

Diving into AI/ML has been an interesting shift for me. Coming from a web development background, I never really had to touch Python outside of occasional scripting. But since my final-year project involves AI, I had to set up a proper Flask backend. If you're in a similar boat, this guide will walk you through setting up a Flask app from scratch.

Why Flask?

Flask is a lightweight Python web framework that makes it easy to build small to medium-sized applications. It's simple yet powerful, making it a great choice for projects that don't need the overhead of Django.

Setting Up Your Flask Project

Before diving into the setup, let's define the typical folder structure for a Flask app:

../
├── main.py
├── requirements.txt
└── src/
    ├── __init__.py
    ├── auth.py
    ├── static/
    ├── templates/
    │   ├── base.html
    └── views.py

File/Folder Descriptions:

• main.py - Entry point for the Flask app.
• requirements.txt - Lists dependencies.
• src/ - Main app logic.
• init.py - Initializes Flask app.
• auth.py - Authentication routes.
• views.py - App routes/views.
• static/ - CSS, JS, images, etc.
• templates/ - HTML templates.

Step 1: Install Python and Create a Virtual Environment

A virtual environment (venv) allows you to manage dependencies for your Flask project without interfering with global Python packages.

Creating a Virtual Environment

Open a terminal and run:

python -m venv .venv

This creates a .venv folder inside your project, which acts as an isolated Python environment.

Activating the Virtual Environment

• Windows:

.venv\Scripts\activate

• Mac/Linux:

source .venv/bin/activate

Once activated, your terminal should show (venv) before the prompt.

Step 2: Install Flask and Essential Packages

After activating the virtual environment, install Flask using pip:

pip install flask

To ensure consistency across environments, save installed packages:

pip freeze > requirements.txt

This allows others (or future you) to install the same dependencies with:

pip install -r requirements.txt

Step 3: Creating the First Flask App

Now, let's create a basic Flask app.

Setting Up main.py

Create a file named main.py in the project root and add the following:

from src import create_app

app = create_app()

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

Setting Up __init__.py

The __init__.py file is essential because it turns our src directory into a Python package, allowing us to import modules from it. It also initializes our Flask application.

Steps:

1. Create a directory named src if it doesn't already exist.
2. Inside src, create a file named __init__.py.

Your src/__init__.py should look like this:

from flask import Flask

def create_app():
app = Flask(__name__)

    # Import and register blueprints
    from .views import main
    app.register_blueprint(main)

    return app

Why __init__.py Exists

• It initializes the Flask application.
• It registers blueprints to separate concerns (e.g: handling routes in views.py).
• It allows our src folder to be treated as a Python package, enabling imports between files.

Setting Up views.py

The views.py file defines the routes of our application—essentially, how users interact with the app via URLs.

Steps:

1. Inside src, create a file named views.py.

Your src/views.py should look like this:

from flask import Blueprint, render_template

# Creating a Blueprint to organize routes

main = Blueprint('main', __name__)

@main.route('/')
def home():
message = "Hello from the other side ;)"
return render_template('base.html', message=message)

Why views.py Exists

• It separates route logic from app initialization, making the project modular.
• It uses Flask Blueprints, which allow us to organize different parts of the app (e.g.: authentication, dashboard, API routes) separately.
• It handles requests and passes data to templates for rendering.

Setting Up base.html

Flask supports template rendering, meaning we can use HTML templates with placeholders for dynamic content.

Steps:

1. Inside src, create a directory named templates.
2. Inside templates, create a file named base.html.

Your src/templates/base.html should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask App</title>
</head>
<body>
    <h1>{{ message }}</h1>
</body>
</html>

Why base.html Exists

• It serves as a reusable template for our web pages.
• It allows us to pass dynamic data (like message) from our views.py to be displayed in the browser.
• We can extend this template later to include styles, JavaScript, or a navigation bar.

Step 4: Running Your Flask App

Once your structure is set up, you can run your Flask app with the following steps:

Steps:

1. Ensure your virtual environment is activated.

2. Run the command:

python main.py

You should see output like:

Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

4. Open your browser and visit http://127.0.0.1:5000/. You should see:

Hello from the other side ;)

Conclusion

Setting up a Flask app from scratch might seem overwhelming at first, but once you break it down into manageable steps—creating a virtual environment, installing dependencies, structuring your project, and writing basic routes—it becomes a straightforward process. Flask's simplicity and flexibility make it a great choice for beginners and experienced developers alike.

Now that you have a foundational Flask app running, you can start expanding it by adding authentication, connecting a database, or integrating an API. The next steps depend on your project's goals, but with this setup in place, you're well on your way to building something powerful.

If you're diving into Flask for AI/ML applications, like I did, this setup is just the beginning. Stay curious, keep experimenting, and happy coding!