5: Tour Flaskinni

Expectations

Flaskinni is a simple, pre-configured Flask app we can start customizing right away. In this unit we'll get your copy setup and study its structure.

Learning Targets

  • I can describe the MVT components of Flaskinni.

  • I can describe the thread's steps as my app starts up.

Homework

  • Keep picking at tutorials or courses to learn more about the mechanics of Python, Javascript, or the like. You need to stay on the grind.

Organized code

Remember, you can help add comments and docstrings to Flaskinni and submit pull requests. Even beginners can help contribute to open source projects in surprisingly substantial ways.

App Factory

We've got a handy little method that instantiates our app, loads the settings, and straps on all its expansion packs. Let's start our tour of the code where Flask is spawned. From "Demystifying Flask’s Application Factory":

The reason why the Application Factory is so important has to do with something called Flask's Application Context. Our app's "context" is what takes the assortment of Python files and modules which make up our app and brings them together so that they see and work with one another.

Assembling the App

Let's fire up the app and talk through a bit of what's happening.

Runner

With your (venv) activated, the flask run command will start flaskinni.py and that calls the app factory in the initialization file within our app folder.

Blueprints and MVT

Flaskinni comes with the main blueprint. That'll affect your use of url_for. So if you wanted to make a link to the homepage, it'd be <a href="{{ url_for('main.index') }}">home</a>

Flaskinni comes with one blueprint. You'll probably want to add more soon

Your Flaskinni app is now working and you know what a blueprint is.

Template

Now that Flaskinni is running in your environment, local or cloud-based, let's take a tour.

File structure

The T part of our MVT all starts with base.html. See how much of the documentation you can read before your brain wimps out

The purpose of the base template is to give all the pages in your app common assets. This such as fonts, CSS files, nav bar. Every page must link to the base file. It is kept in the /templates folder, as base.html. The base template is like a picture frame, loading common elements like the nav bar, footer, and your little favicon.

I can't remember where this picture in my notes came from but it's not my creation.

This is the whole parent-child thing. The parent is the skeleton of your page. We named it base.html and it has <link>s to our Google Fonts, CSS files, and sets up nav bars and any other element that’s site-wide. It’s great! Pretty much sets up the whole theme of our site.

To put our pages inside this metaphorical picture frame, we use the command, {% extends "base.html" %} at the top of every other HTML we put in our templates folder.

The base template extends across all pages, so the website can share HTML code.

If you give this guide up and follow Mr. Grinberg's exclusively I won't judge.

Base's blocks

We’re going to make a new template that inherits from our base.html so you can experiment with this handy tool. Create a new file in your templates folder called about.html. This page will need hardly any information at all because all the setup is done in the parent. All we need to do is pass some HTML into any block.

index.html
index.html
{% extends "base.html" %}
{% block content %}
{# this is a comment #}
<div class="row justify-content-md-center">
<div class="col-md-6">
<h1>Hi</h1>
</div>
</div>
{% endblock %}

Sass and JS

Sass makes CSS easier, even if you have to spend a few minutes here and there refreshing yourself on how to use the Sass tricks and how to compile your Sass down to CSS. I personally use a VSCode extension to manage this automatically.

Don't want to learn? There is a lazy way out and that's to edit your CSS directly. No judgements.

  1. Pick out a header and a body font at fonts.google.com

  2. Add them to your collection and get the <link> we’ll use to embed a connection to Google Fonts.

  3. Replace the other <link> to fonts.google.com that was in your base.html file

  4. Add your CSS code to custom.css, something like:

custom.css
custom.css
body {
font-family: 'Roboto Mono', monospace;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Rammetto One', cursive;
}
  1. Launch your server

    1. (make sure you’ve got venv activated) source venv/bin/activate or on Windows: source venv/Scripts/Activate

    2. (use our flask-script to run the server) flask run

  2. Check out your font changes!

Views

If you want to see the new template file in action, we’ve got to build a route to that page. As of this writing, there are only two locations for routes in Flaskinni, the master __init__.py file and the views.py file inside the blog module folder. Since our homepage route is in the first file, we’ll put our about route there, too.

# Created a new route used for rendering the about page template
# Custom app routes for the end of the website url
@app.route('/about')
@app.route('/about/')
@app.route('/about.html')
# Define app route
def about():
"""Render the template"""
return render_template('about.html')

We later passed a variable to the template. We dropped <h1> {{ some_variable }} </h1> in our about.html file. Nothing shows up until we change the render_template call to something like this:

def about():
"""Render the template"""
return render_template('about.html', some_variable="Hello!")

Congratulations! You just passed your first variable to a template.

url_for

Flash Notifications

We have cool, color changing notifications in Flaskinni that rely on Bootstrap classes. So if you want to send a good alert message that something worked, you'd say: flash("Your message has been sent!", "success")

But if something failed, you'd write:

flash("Your message was destroyed by mistake. Whoops!", "danger")

What other Flash notifications are there? How are the flash notifications being built? Let's look at where they come up in the base.html file, trace back the macro that builds the flash messages and then see what other options come with Flaskinni.

There we include the _message.html partial
Those are the options you've got. You can totally add your own.

Sessions

Models

Users are special

Example Queries

Example Relationships

Extensions

Flask-Security

Flask-Mail

Flask-Migrations

Flask-Assets

Flask-RESTful