Combine Flask Blueprint Pages, Jinja Templates, and Databases
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Building pages using our models
Now that we have the ability to retrieve stored products from our database within the console, we can use SQLAlchemy to render pages that display the data for products we have.
The two routes that we will need to implement to build out our (read only) product catalog is one to list all of the products and one to display the product details.
Setting up a blueprint
As we saw earlier, blueprints are a useful organizational tool in Flask applications to split up your routes. A common pattern is to organize blueprints by the models they work with.
How large should blueprints be? As always, it varies. As a rule of thumb, if your blueprint only contains a single route, you may have gone too granular. If your blueprint is defining over ten routes, it may be too large and could benefit from splitting it up. A common way to organize blueprints is by the URL path and/or model they work with. If you blueprint is pushing 250+ lines of code, you may benefit from some additional modularization.
Here we can create a blueprint for our product catalog called products.py. To do that, we'll need to create a blueprints folder in the yumroad folder. Then inside of the blueprints folder, create a file called products.py where our blueprint and routes will be defined.
At this point, your folder structure should like this:
yumroad/
blueprints/
products.py
__init__.py
config.py
models.py
requirements.txt
conftest.py
Now within products.py, we'll set up the basics of a blueprint called products just like we did in Chapter 3.
from flask import Blueprint, render_template
products = Blueprint('products', __name__)
@products.route('/')
def index():
return "All Products: Coming soon"
Recall: The first argument of the Blueprint initialization is the name that will used when trying to get the route path when using
url_for. In this case it will beproducts
Now we need to import and register the blueprint within our create_app function (in yumroad/__init__.py). While we are at it, we can also prefix the URL of all the routes in this blueprint with /products to start building up the (conceptual) routing layout for our application.
from flask import Flask, render_template
from yumroad.blueprints.products import products
from yumroad.config import configurations
from yumroad.extensions import (db)
def create_app(environment_name='dev'):
app = Flask(__name__)
app.config.from_object(configurations[environment_name])
db.init_app(app)
app.register_blueprint(products, url_prefix="/product")
return app
# FLASK_DEBUG=true FLASK_APP="yumroad:create_app" flask run
At this point, we can now run the application using the flask run command. In our terminal, within the top level folder (that contains yumroad and requirements.txt), run the following command to set up our server FLASK_ENV=development FLASK_APP="yumroad:create_app" flask run.
Reminder: You can export the environment variables into your terminal session to only have to type
flask runor you can create a script to launch your development environment.
export FLASK_ENV=development
export FLASK_APP=yumroad:create_app
# Now you can just run the following command in your terminal
flask run
Setting up Jinja templates
In chapter 3, we talked about how to organize templates with blueprints. Since this is a new application, we'll have to set up that structure again, starting with a base_layout.html file.
Within our yumroad folder, create a folder called templates and create a base_layout.html file within it.
This file will define the outlines of a basic HTML page (using Bootstrap for basic styling) with two blocks for templates that use this base to customize the content and page title.
<!DOCTYPE html>
<html>
<head>
<title>
{% block title %}{% endblock %} Yumroad
</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand">Yumroad</a>
</nav>
This lesson preview is part of the Fullstack Flask: Build a Complete SaaS App with Flask course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack Flask: Build a Complete SaaS App with Flask with a single-time purchase.
