Flask Blueprints Tutorial
Blueprints and Views
Flask uses a concept of blueprints for making application components and supporting common patterns within an application or across applications. Blueprints can greatly simplify how large applications work and provide a central means for Flask extensions to register operations on applications. A Blueprint object works similarly to a Flask application object, but it is not an application. Rather it is a blueprint of how to construct or extend an application.
How many times have you found yourself lost inside a huge main.py with many different routes searching for a certain line of code that is breaking your application? Blueprints helped me to organize my projects and this tutorial introducing a base blueprints flask project. After some try and error, I ended up with a simplified implementation of flask blueprints which I found pretty handy when my projects exceed a certain size. In this tutorial, I will try to create a frontend demo app.
I am using PyCharm 2020.3.5 but you can use whichever IDLE you like.
First of all, let's create a blank new project.
This is the Project structure when we have added all the essential components.
./sem-sagemaker-frontend/
│
├── frontend/
│ ├── __init__.py
│ ├── static/
│ ├── templates/
│ │ ├── auth/
│ │ │ └── auth.html
│ │ ├── input-form/
│ │ │ └── input.html
│ │ └── model-output/
│ │ └── output.html
│ └── views/
│ ├── auth.py
│ ├── input.py
│ └── output.py
│
│
├── README.md
├── config.py
└── app.pyWe create the frontend directory and add the crucial for flask-blueprints __init__.py file. We also add a static directory where we are going to store static files like images etc. The templates directory splits into three folders based on the functionality of the Html pages it includes.
The files in the views directory will be divided with the same logic as the Html pages.
Let's populate our directories and folders.
In __init__.py we define the create app function where we are going to set the blueprints.
We import flask and create the flask app with
App = Flask(__name__)Also, we set the app secret key which serves for our app to be encrypted and more secure.
app.secret_key = ‘whatever’
In app.py we call the flask app and the configuration. We also run the WSGI (flask comes with its own WSGI development server) flask server with the app.run(debug=True) command. You can also print your app configuration to have a better understanding of them.
In config.py we store the flask configurations along with a really important config parameter to make the session work, the SESSION_COOKIE_PATH. We need to set the session cookie path to ‘/’ so that all blueprints use the same session cookie.
Create auth.py
1. We import the basic flask functions that we need like Blueprint and render_template.
2. Setting the blueprint with:
auth = Blueprint(‘auth’, __name__, template_folder= ‘templates’)3. We create our app landing route with
@auth.route(‘/’)Which returns the login.html stored in the templates/auth folder.
Create auth folder in templates directory and add inside a login.html file.
The last step is to register the blueprint in __init__.py with URL prefix=’ /’.
Run the app from the command line typing:
python app.pyYou are going to see something like this in your terminal:
Open your browser and navigate to http://127.0.0.1:5000/. Our landing page will be the login sample page which is running in http://127.0.0.1:5000/ and you expect to see the following text in your browser.
Following the same logic, you can make as many Html pages as input and output with the relevant py files that serve the Html pages.
By using blueprints you are going to organize your project thematically and avoid huge python files which are mandatory in production-level code.
Please let me know if you have any thoughts comments or suggestions!
Keep Learning!! 💻
