NB: For this tutorial, for every change you make, you need to restart your flask server. Except if you set up your Flask server with env.

Flask is a popular Python lightweight web framework that allows developers to build web applications quickly and easily. One of the most powerful features of Flask is its blueprint functionality, which enables developers to organize their code into logical modules.

After few years of working with Laravel, I learned Python and a bit of Flask at ALX Software Engineering training. While building my first real application with Flask, I quickly notice that my "route definition file" is growing too fast. It is littered with route definitions, route-associated functions and logic.

How do I effectively break it down?

Then I remembered we were thought Blueprints. Well Blueprints! In this article, we'll take a closer look at Flask blueprints and show you how they can help you build scalable and maintainable applications.

What are Flask Blueprints?

Flask blueprints are a way to organize your Flask application into reusable and most importantly maintainable units. With blueprints, you can break your application into smaller, more manageable pieces, making it easier to maintain and scale.

Each blueprint is a self-contained unit that can be registered with your Flask application. Blueprints define a set of views, templates, and static files that are associated with a specific URL prefix.
Using blueprints, you can create a flexible and extensible application structure that allows you to add new features and functionality without disrupting the existing codebase.

Now Lets get our hands dirty

Create your project folder, inside it create app.py file. Paste the code below inside this file. Afterwards, if you go to your terminal and enter "flask run" a flask server will be started for you.

from flask import Flask

def create_app():
    app = Flask(__name__)

    from blueprints.authentication.authentication import authentication as auth_blueprint
    app.register_blueprint(auth_blueprint)

    from blueprints.profile.profile import profile as profile_blueprint
    app.register_blueprint(profile_blueprint)
    return app 

Take a look on the code above and notice that two blueprints for authentication and profile has been registered already. Now lets see how to create these blueprints.

In your current folder where you have your app.py, create a folder named blueprints. Inside blueprints, create another two folders named "profile" and "authentication" respectively.

Great!

Now inside "profile" and "authentication" folders, create the following:

• a folder named static
• a folder named templates

Inside "profile", create profile.py
Inside "authentication" create authenication.py

Now inside profile.py write the following code

from flask import Blueprint, render_template

profile = Blueprint('profile', __name__, template_folder='templates', static_folder="static", static_url_path='/blueprints/profile/static')

@profile.route('/profile')
def profile_page():
    return "profile pages"

Notice the parameters of Blueprint method. We defined a few things in there most importantly, the template_folder telling Flask where to search for templates for this profile blueprint. That is a folder named templates within the profile folder. We also defined static_folder. Where to search for static files of any html file being rendered by this blueprint.

Now for authentication blueprint. The code is as follows

from flask import Blueprint, render_template

authentication = Blueprint('auth', __name__, template_folder='templates', static_folder="static", static_url_path='/blueprints/profile/static')

@authentication.route('/auth')
def auth_page():
    return "auth pages"

Static Files

At the beginning of this article, we said that each blueprint can be self contained having it's own static files and templates. Let us demonstrate that.

Inside profile blueprint folder, you must have created a template folder. The template folder create a html file named profile.html
Inside profile/static create a folder named css and inside create style.css. Here is html code to put into profile.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <!-- <link rel="stylesheet" href="/blueprints/profile/static/css/styles.css"> -->
    <link rel="stylesheet" href="{{ url_for('profile.static', filename='css/styles.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </body>
</html>

Pay special attention to the head of this html file where I included css files. I did it two different ways. Note That. That is how you can include all your static files. This works inline with definition of static_url in blueprint method.

To run your /profile url on browser, you need to modify to route to render profile.html

@profile.route('/profile')
def profile_page():
    return render_template('profile.html')

To be sure your css file is properly included, go ahead and style the page with the css file. That should be fun.

As you can see, Flask blueprint is truly self contained unit of flask application. All features of your app relating to profile can have there routes defined and handled by profile.py.
Same goes with authentication.

Thank you for reading. Dont forget to drop a comment and share.

I am Vincent Ikechukwu, Full Stack Web Developer and Software Engineer. Connect with me on social media via links below.

• Linkedin Vincent
• Facebook Vincent
• Twitter Vincent